Question

我有一个简单的自定义 AppBar，其中包含以下代码（为了简化，我已经去掉了一些代码。问题没有必要。）：

class SimpleAppBarPageState extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => const Size.fromHeight(100);

  @override
  Widget build(BuildContext context) => DefaultTabController(
    length: 2,
    child: Scaffold(
      appBar: AppBar(
        ...
        bottom: TabBar(
          isScrollable: true,
          indicatorColor: Colors.white,
          indicatorWeight: 5,
          tabs: [
            Tab(child: Text('1',
              style: TextStyle(
                fontWeight: FontWeight.w700,
                fontSize: 20,
              ),
            ),
            ),
            Tab(child: Text('2',
              style: TextStyle(
                fontWeight: FontWeight.w700,
                fontSize: 20,
              ),
            ),
            )
          ],
        ),
        elevation: 20,
        titleSpacing: 20,
      ),
      body: TabBarView(
        children: [
          buildPageOne(),
          buildPageTwo()
        ],
      ),
    ),
  );

现在我有两个 dart 文件，其中一个包含第一页的代码，另一个文件包含第二页的代码。

现在我希望在选择选项卡“1”时打开第一页，并在选择选项卡“2”时打开第二页。

因此我想到定义一个新的Widget来打开相应的页面。以下是我的想法：

Widget buildPageOne() {
    Navigator.of(context)
        .push(
      MaterialPageRoute(
          builder: (context) => PageOne()
      ),
    );
  }

我认为最后一个代码示例完全没有用，但它表明我的意图应该发生什么。

你们能帮我解决这个问题吗？

我会很高兴得到答案！问候

Answer 1

首先，如果您使用 Tabs，请不要使用 Navigator。其次，您需要一个 TabController 来处理您的标签，例如您可以使用 DefaultTabController。使用 TabBar，您可以设置应用栏下方每个标签的文本/图标。在您的 TabBarView 中，您可以设置要显示的小部件。在您的情况下，省略导航器，只需提供您想要在 TabBarView

中显示的小部件

DefaultTabController(
  length: 2,
  child: Scaffold(
    appBar: AppBar(
      title: 'Tabs',
      bottom: TabBar(
        tabs:[
          Tab(icon: Icon(Icons.home)),
          Tab(icon: Icon(Icons.settings)),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        Widget1(),
        Widget2()
      ]
      ),
  ),
);

Answer 2

不要使用方法导航到新屏幕。创建 2 个独立的无状态或有状态小部件：Widget1()、Widget2()、

并且在 TabBarView 的孩子中使用这两个小部件作为孩子。

body: TabBarView(
      children: [
        Widget1(),
        Widget2(),
      ],
    ),

保存它们，热重启

如何使用 AppBars TabBar 从一个页面切换到另一个页面？

2 个答案: