Flutter：在 CupertinoTabScaffold 中处理多个导航屏幕

Question

你好，我是 Flutter 的新手，我正在尝试为每个选项卡实现一个带有多个导航屏幕的底部选项卡栏。

这是我的初始设置

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return CupertinoApp(home: HomeScreen(),
        routes: {
          Screen1.id: (context) => Screen1(),
          Screen2.id: (context) => Screen1(),
          DetailScreen3.id: (context) => DetailScreen3(),
          DetailScreen4.id: (context) => DetailScreen4(),
        });
  }
}

这是我的主屏幕

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.book_solid),
            title: Text('Articles'),
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.eye_solid),
            title: Text('Views'),
          ),
        ],
      ),
      tabBuilder: (context, index) {
        if (index == 0) {
          return Screen1();
        } else {
          return Screen2();
        }
      },
    );
  }
}

这是我的屏幕1

class Screen1 extends StatelessWidget {
  static const String id = 'screen1';

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(),
      child: GestureDetector(
        onTap: () {
          Navigator.pushNamed(context, DetailScreen3.id);
        },
        child: Center(
          child: Text('Screen 1',),
        ),
      ),
    );
  }
}

这是我的屏幕3

class DetailScreen3 extends StatelessWidget {
  static const String id = 'screen3';

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(),
      child: Center(
        child: Text('terzo schermo',),
      ),
    );
  }
}

tabBar 工作正常，我可以在 2 个选项卡之间切换，但我无法从屏幕 1 导航到屏幕 3。当我点击屏幕 1 中心小部件时，屏幕开始导航，但导航到一半停止然后屏幕变成全黑...

这里是错误

There are multiple heroes that share the same tag within a subtree. Within each subtree for which heroes are to be animated (i.e. a PageRoute subtree), each Hero must have a unique non-null tag. In this case, multiple heroes had the following tag: Default Hero tag for Cupertino navigation bars with navigator NavigatorState#05492(tickers: tracking 2 tickers)

我了解到问题与导航栏的英雄标签有关，该标签必须具有唯一标识符。我应该如何解决这个问题？我应该为所有导航栏分配一个 heroTag 吗？？？

非常感谢您的帮助

Answer 1

我通过为每个 CupertinoNavigationBar 设置以下属性来解决

heroTag: 'screen1', // a different string for each navigationBar
transitionBetweenRoutes: false,

Answer 2

作为一个iOS开发者，第一次尝试flutter，这个东西导致跳转页面后黑屏，也困扰了我两天

heroTag: 'screen1', // a different string for each navigationBar
transitionBetweenRoutes: false,

Flutter：在 CupertinoTabScaffold 中处理多个导航屏幕

Flutter : handling multiple navigation screen in CupertinoTabScaffold

flutter

navigation

tabbar

cupertinotabbar