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。当我点击screen1中心小部件时，屏幕开始导航，但是它停止了一半，并且然后屏幕变成全黑...

这是错误

在子树中有多个共享相同标签的英雄。在每个要动画英雄的子树中（即 PageRoute子树），每个Hero必须具有唯一的非null标签。在这情况下，多个英雄具有以下标签：用于的默认英雄标签带有导航器NavigatorState＃05492的Cupertino导航栏（代码：跟踪2个股票）

我了解该问题与导航栏的hero标签有关，该标签必须具有唯一的标识符。我应该如何解决这个问题？我应该将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中处理多个导航屏幕

2 个答案: