flutter - 有没有办法将 ontap 函数添加到 bottomNavigationBar？

Question

我已经实现了一个bottomNavigationBar 及其子项：TabBar。

由于我在一个标签屏幕中有多层导航，有没有办法让用户点击底部导航上的标签并将它们带回原始标签屏幕？

我已经分享了我的代码的下半部分，上面有一个标签控制器。

bottomNavigationBar: SafeArea(
      child: MediaQuery(
        data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
        child: Container(
          padding: EdgeInsets.only(top: 1.0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30.0),
            color: Theme.of(context).accentColor.withOpacity(0.2),
          ),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(30.0),
                  topLeft: Radius.circular(30.0)),
              color: Theme.of(context).scaffoldBackgroundColor,
            ),
            child: TabBar(
              onTap: (index) {
                _tabController.index = _tabController.index;
              },
              labelColor: Theme.of(context).accentColor,
              unselectedLabelColor: Colors.grey,
              labelStyle: TextStyle(
                fontSize: 15.0,
                fontWeight: FontWeight.w300,
              ),
              tabs: <Widget>[
                Tab(
                  icon: Icon(
                    Icons.home,
                    size: 24.0,
                  ),
                  text: 'Home',
                ),
                Tab(
                  icon: Icon(
                    Icons.edit,
                    size: 24.0,
                  ),
                  text: 'List1',
                ),
                Tab(
                  icon: Icon(
                    Icons.menu_book,
                    size: 24.0,
                  ),
                  text: 'List2',
                ),
                Tab(
                  icon: Icon(
                    Icons.person,
                    size: 24.0,
                  ),
                  text: 'Profile',
                ),
              ],
              controller: _tabController,
            ),
          ),
        ),
      ),
    ),

标签： flutterflutter-layout

Answer 1

TabBar.onTap是一个很好的地方：

TabBar(
  onTap: (index) {
     if (index == _tabController.index) {
       // The user has pressed the selected tab.
       // Access the selected tab's navigator, and pop it back until root
       final navigator = ...
       navigator.popUntil((_) => true);
     }
  }
);