logo标签列表

在Flutter的选项卡栏中，在应用栏中添加返回按钮

flutter
3

我需要在选项卡视图的应用栏中添加返回按钮。

当您将选项卡视图控制器推送到导航堆栈上时，我无法在选项卡菜单的应用栏中看到返回按钮。当我从左向右滑动时，我回到了上一个屏幕，但是我无法在应用栏中看到返回按钮。

以下是我将选项卡推入导航堆栈的方式：

Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => TabBarScreen()),
              );


class TabBarScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
            automaticallyImplyLeading: true,

          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}
2个回答
11

因为您的TabBarScreen内部有一个MaterialApp，它有自己的Navigator和导航堆栈。所以，从它的角度来看，它是在“第一个屏幕”。

如果您从widget树中删除MaterialApp小部件，则会看到返回按钮。

这就是我的意思：

class TabBarScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.directions_car)),
              Tab(icon: Icon(Icons.directions_transit)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],
          ),
          title: Text('Tabs Demo'),
          automaticallyImplyLeading: true,
        ),
        body: TabBarView(
          children: [
            Icon(Icons.directions_car),
            Icon(Icons.directions_transit),
            Icon(Icons.directions_bike),
          ],
        ),
      ),
    );
  }
}
3

因为你没有使用这里链接的Navigator，所以不应该有返回按钮，我无法理解除非我误解了你的请求，否则你为什么要一个返回按钮。

https://api.flutter.dev/flutter/widgets/Navigator-class.html

tabBarView不改变页面，只改变显示内容。您只是控制body中的小部件。如果您想要有一个返回按钮，则需要在第二/第三屏幕的appBar中硬编码一个iconButton，并使该按钮setState selectedIndex，这样可以像tabBarView一样交换body中的小部件。我不是专家，但我希望这能帮助您一点或指引您朝着正确的方向！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接