dart Flutter在TabBar上创建一个选项卡，导航到另一个屏幕

au9on6nz 于 2023-04-09 发布在 Flutter

关注(0)|答案(2)|浏览(104)

我试图开发一个应用程序，我有一个标签栏，其中每个标签显示信息的TabBarView。除了最后一个（'+新列表），在其中我想显示一个不同的屏幕使用导航时点击。
为此，我使用了GestureDetector，并在TabBarView上为该特定选项卡选择了一个空Container。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appState = context.watch<MyAppState>();

    return DefaultTabController(
      length: appState.types.length+2,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Task List'),
          centerTitle: true,
          bottom: 
            TabBar(
              labelColor: Colors.white,
              indicatorColor: Colors.white,
              isScrollable: true,
              labelPadding: EdgeInsets.only(left: 20, right: 20),
              tabs: [
                Tab(icon: Icon(Icons.star_rounded)),
                for (var type in appState.types)
                  Tab(text: type),
                
                GestureDetector(
                  child: Tab(text: '+ New List',),
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(builder: (context) => AddNewList())
                    );
                  },
                )
                
              ]
            ),
        ),
        body: TabBarView(
          children: [
            ShowTaskListPage('favorites'),
            for(var type in appState.types)
              ShowTaskListPage(type),
            Container(),
          ]
        ),
      )
    );
  }
}

问题是，它的工作原理大多数时候在这个屏幕截图：working，但有时单击该选项卡时会打开空容器而不是导航，如屏幕截图所示：bug
我试着用GestureDetector和其他方法 Package Tab，但它仍然不起作用

dart

来源：https://stackoverflow.com/questions/75964804/flutter-make-a-tab-on-tabbar-navigate-to-another-screen

2条答案

按热度按时间

omtl5h9j1#

您在标签内使用GestureDetector导航到另一个屏幕的方法看起来是正确的。但是，您可以简单地将其从子列表中忽略，仅在TabBar中使用，而不是在TabBarView中为最后一个标签使用空Container。
下面是如何修改代码来实现这一点：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appState = context.watch<MyAppState>();

    return DefaultTabController(
      length: appState.types.length + 1,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Task List'),
          centerTitle: true,
          bottom: TabBar(
            labelColor: Colors.white,
            indicatorColor: Colors.white,
            isScrollable: true,
            labelPadding: EdgeInsets.only(left: 20, right: 20),
            tabs: [
              Tab(icon: Icon(Icons.star_rounded)),
              for (var type in appState.types) Tab(text: type),
              GestureDetector(
                child: Tab(text: '+ New List'),
                onTap: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => AddNewList()),
                  );
                },
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            ShowTaskListPage('favorites'),
            for (var type in appState.types) ShowTaskListPage(type),
          ],
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2023-04-09

6jygbczu2#

因此，在意识到问题是我有时会点击侧面，因此没有点击GestureDetector，而是点击Tab的填充后，我想出了一个不同的方法。我使用TabBar的onTap属性而不是使用GestureDetector。

TabBar(
  labelColor: Colors.white,
  indicatorColor: Colors.white,
  isScrollable: true,
  tabs: [
    Tab(icon: Icon(Icons.star_rounded)),
    for (var type in appState.types)
      Tab(text: type),

    Tab(text: '+ New Label'),
  ],
  onTap: (index) {
    if (index == appState.types.length+1) {
      Navigator.of(context).push(
        MaterialPageRoute(builder: (context) => AddNewList())
      );
    }
  },
),

赞(0）回复(0）举报 2023-04-09

我来回答

dart Flutter在TabBar上创建一个选项卡，导航到另一个屏幕

2条答案

相关问题

热门标签

最新问答