Question

我想要实现一项功能，即当用户点击BottomNavigationBarItem时，如果当前页面索引等于点击的索引，则弹出到根目录，就像普通的iOS应用一样。我尝试如下。如果MaterialApp等于HomeScreen，currentIndex到根页面，则在index和popUntil中设置所有根页面路由。但是错误提示

颤振：处理手势时引发以下StateError：
颤抖：状态不佳：未来已经完成

我该如何进行这项工作？

代码：

// MyApp class 
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          routes: <String, WidgetBuilder>{
            '/Page1': (BuildContext context) => new Page1(),
            '/Page2': (BuildContext context) => new Page2(),
            '/Page3': (BuildContext context) => new Page3(),
            '/Page4': (BuildContext context) => new Page4(),
          },
          title: 'Flutter Example',
          home: new HomeScreen(),
        );
      }
    }


  // MyHome class
    class HomeScreen extends StatefulWidget {
      @override
      _HomeScreenState createState() => new _HomeScreenState();
    }

    class _HomeScreenState extends State<HomeScreen> {
      final List<StatelessWidget> pages = [
        new Page1(),
        new Page2(),
        new Page3(),
        new Page3(),
      ];
      final List<String> routes = [
        '/Page1',
        '/Page2',
        '/Page3',
        '/Page4',
      ];

      int currentIndex = 0;

      @override
      Widget build(BuildContext context) {
        return new WillPopScope(
          onWillPop: () => new Future<bool>.value(true),
          child: new CupertinoTabScaffold(
            tabBar: new CupertinoTabBar(
              onTap: (index) {
                if (index == currentIndex) {
                  Navigator.popUntil(context, ModalRoute.withName(routes[index]));
                }
                currentIndex = index;
              },
              backgroundColor: Colors.white,
              activeColor: Colors.blue,
              inactiveColor: Colors.grey,
              items: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_one),
                  title: Text('Page1'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_two),
                  title: Text('Page2'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_3),
                  title: Text('Page3'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_4),
                  title: Text('Page4'),
                ),
              ],
            ),
            tabBuilder: (BuildContext context, int index) {
              return new DefaultTextStyle(
                style: const TextStyle(
                  fontFamily: '.SF UI Text',
                  fontSize: 17.0,
                  color: CupertinoColors.black,
                ),
                child: new CupertinoTabView(
                  builder: (BuildContext context) {
                    return pages[index];
                  },
                ),
              );
            },
          ),
        );
      }
    }

Answer 1

自Flutter v1.1.1将navigatorKey添加到CupertinoTabView之后，现在可以实现此行为（https://github.com/flutter/flutter/commit/65df90d8b5e1145e1022c365bb0465aa8c30dcdf）

首先，您必须为每个标签声明一个GlobalKey<NavigatorState>，然后将其传递给相应的CupertinoTabView构造函数。然后，在onTap的{{1}}方法中，如果用户在停留在同一选项卡的同时进行点击，则可以使用CupertinoTabBar弹出至root用户。

下面的完整示例：

firstTabNavKey.currentState.popUntil((r) => r.isFirst)

Answer 2

这个简单的代码对我来说很重要

onPressed: () {
     Navigator.of(context).pushNamedAndRemoveUntil('/', ModalRoute.withName('/'));
            }

Answer 3

您可以使用pushAndRemoveUntil达到相同的效果（如果我正确理解了您的需求）。

final PageRouteBuilder _homeRoute = new PageRouteBuilder(
  pageBuilder: (BuildContext context, _, __) {
    return HomeScreen();
  }, 
);

void _goHome() {
  Navigator.pushAndRemoveUntil(context, _homeRoute, (Route<dynamic> r) => false);
}

这还有一个额外的好处，就是能够利用PageRouteBuilder的其他属性。

点击底部导航时，颤振弹出根

3 个答案: