Flutter TabBar、TabBarView、 TabController使用示例

Flutter提供了一种非常方便的方式来创建标签布局。为了使标签起作用,我们需要使选定的标签和内容部分保持同步。这是TabController的工作。我们的示例应用程序有一个屏幕,其中包含一个带有两个屏幕的标签栏。

Flutter TabBar、TabBarView、 TabController使用示例

要将Tabs添加到应用程序中,我所需要做的就是创建TabBar和TabBarView并将TabController附加到它们。TabController会将TabBar与TabBarView同步,以便我们可以实现所需的行为。

步骤一:创建tab页

  1. FirstScreen.dart
  2. SecondScreen.dart

在FirstScreen.dart中编写以下代码:

在SecondScreen.dart中编写以下代码:

现在,剩下的就是创建一个DefaultTabController。

步骤二:创建一个DefaultTabController

在main.dart文件中编写以下代码:

在上面的代码中,我们导入了本文前面创建的两个屏幕。

扩展资料

标签: