Question

我目前有一个应用程序，该应用程序包含一个底部标签导航，我希望用户可以对其进行导航。我当前正在使用搜索页面，用户可以进入该页面，然后单击其搜索字段，将其带到一个抽屉，在抽屉中，他们可以通过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),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  },
},

Answer 1

我想您可以在_onTapHandler方法中实现它。

void _onTapHandler(int index) {
  // assuming index 1 is your search tab
  if(index == 1) {
    showSearch(
      context: context,
      delegate: SearchFieldDelegation(),
    );
  } else {
    setState(() {
      _selectedIndex = index;
    });
  }
}

向BottomNavigationBarItem Flutter添加回调函数

1 个答案: