我目前有一个应用程序,该应用程序包含一个底部标签导航,我希望用户可以对其进行导航,以浏览所点击的页面。我目前正在使用搜索页面,用户可以进入该页面,然后单击其搜索字段,将其带到一个抽屉,在抽屉中,他们可以通过showSearch()方法输入搜索输入进入我的TextField小部件上的onTap回调。
除了可以单击文本字段本身的选项之外,我还希望当用户单击位于底部标签导航上的搜索图标时,此showSearch()抽屉作为默认显示。问题是BottomNavigationBarItem窗口小部件不接受任何回调函数作为参数。
向前,我计划重新配置BottomNavigationBar以接受确实接受回调函数的IconButton小部件。
我的问题是,我如何做到这一点,以便能够将showSearch()方法传递到位于底部标签导航中的实际搜索图标中,使其与搜索栏相同?
底部标签导航小部件
class BottomTabNavigation extends StatefulWidget {
@override
_BottomTabNavigationState createState() => _BottomTabNavigationState();
}
class _BottomTabNavigationState extends State<BottomTabNavigation> {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
int _selectedIndex = 0;
final List<Widget> _children = [
PracticionerMainView(),
PracticionerSearchView(),
PracticionerProfileView(),
];
void _onTappedHandler(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: HealthHubAppBar(
scaffoldKey: _scaffoldKey,
),
drawer: HealthHubDrawer(),
body: _children[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
onTap: _onTappedHandler,
currentIndex: _selectedIndex,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('User'),
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text('Search'),
),
BottomNavigationBarItem(
icon: Icon(Icons.person_outline),
title: Text('My Appointments'),
),
],
selectedItemColor: Colors.blue[200],
),
);
}
}
搜索视图小部件
class SearchFieldDelegation extends SearchDelegate {
@override
List<Widget> buildActions(BuildContext context) {
return [
IconButton(
icon: Icon(Icons.clear),
onPressed: () {
query = '';
},
),
];
}
@override
Widget buildLeading(BuildContext context) {
return IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
close(context, null);
},
);
}
@override
Widget buildResults(BuildContext context) {
return Column();
}
@override
Widget buildSuggestions(BuildContext context) {
return Column();
}
}
class PracticionerSearchView extends StatefulWidget {
@override
_PracticionerSearchViewState createState() => _PracticionerSearchViewState();
}
class _PracticionerSearchViewState extends State<PracticionerSearchView> {
TextEditingController _handleSearchEdit = TextEditingController();
String searchEntry;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Expanded(
child: ListView(
children: <Widget>[
Center(
child: Container(
padding: EdgeInsets.all(25.0),
child: TextField(
onTap: () {
showSearch(
context: context,
delegate: SearchFieldDelegation(),
);
},
decoration: InputDecoration(
labelText: 'Search',
hintText: 'Search Practitioners',
prefixIcon: Icon(Icons.search),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(25.0),
),
),
),
),
),
),
],
),
),
],
),
},
},
我想您可以在_onTapHandler方法中完成它。
void _onTapHandler(int index) {
// assuming index 1 is your search tab
if(index == 1) {
showSearch(
context: context,
delegate: SearchFieldDelegation(),
);
} else {
setState(() {
_selectedIndex = index;
});
}
}