TabBar与TabBarView：Flutter中的导航利器

IOS

2023-09-01 16:36:26

在Flutter中，导航是构建流畅、用户友好的应用程序的关键。TabBar和TabBarView是小部件，它们共同提供了在应用程序的不同部分之间导航的有效且美观的方法。

TabBar

TabBar是一个水平排列的小部件，包含一组标签。当用户点击标签时，TabBarView会显示关联的视图。TabBar可以放置在屏幕的顶部或底部。

TabBarView

TabBarView是一个页面视图小部件，它显示一组页面。TabBarView的页面与TabBar中的标签相关联，当用户点击标签时，TabBarView会切换到关联的页面。

如何在Flutter中使用TabBar和TabBarView？

在Flutter中使用TabBar和TabBarView非常简单。以下是使用这些小部件的步骤：

创建TabBar和TabBarView小部件

TabBar(
  tabs: [
    Tab(icon: Icon(Icons.home), text: 'Home'),
    Tab(icon: Icon(Icons.settings), text: 'Settings'),
  ],
);

TabBarView(
  children: [
    HomePage(),
    SettingsPage(),
  ],
);

将TabBar和小部件添加到Scaffold

Scaffold(
  appBar: AppBar(
    title: Text('My App'),
    bottom: TabBar(
      tabs: [
        Tab(icon: Icon(Icons.home), text: 'Home'),
        Tab(icon: Icon(Icons.settings), text: 'Settings'),
      ],
    ),
  ),
  body: TabBarView(
    children: [
      HomePage(),
      SettingsPage(),
    ],
  ),
);