Flutter TabBar、TabBarView、 TabController使用示例
- 发表于
- flutter
Flutter提供了一种非常方便的方式来创建标签布局。为了使标签起作用，我们需要使选定的标签和内容部分保持同步。这是TabController的工作。我们的示例应用程序有一个屏幕，其中包含一个带有两个屏幕的标签栏。
要将Tabs添加到应用程序中，我所需要做的就是创建TabBar和TabBarView并将TabController附加到它们。TabController会将TabBar与TabBarView同步，以便我们可以实现所需的行为。
步骤一：创建tab页
- FirstScreen.dart
- SecondScreen.dart
在FirstScreen.dart中编写以下代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // FirstScreen.dart import 'package:flutter/material.dart'; class FirstScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Container( child: Center( child: Text('Tab 1 Layout'), ), ); } } |
在SecondScreen.dart中编写以下代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // SecondScreen.dart import 'package:flutter/material.dart'; class SecondScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Container( child: Center( child: Text('Tab 2 Layout'), ), ); } } |
现在，剩下的就是创建一个DefaultTabController。
步骤二：创建一个DefaultTabController
在main.dart文件中编写以下代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | // main.dart import 'package:flutter/material.dart'; import './pages/FirstScreen.dart'; import './pages/SecondScreen.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: DefaultTabController( length: 2, child: Scaffold( appBar: AppBar( bottom: TabBar( tabs: [ Tab(icon: Icon(Icons.directions_car)), Tab(icon: Icon(Icons.directions_transit)) ], ), title: Text('Flutter Tabs Example'), ), body: TabBarView( children: [ FirstScreen(), SecondScreen(), ], ), ), ), ); } } |
在上面的代码中，我们导入了本文前面创建的两个屏幕。
扩展资料
原文连接：Flutter TabBar、TabBarView、 TabController使用示例 所有媒体，可在保留署名、
原文连接
的情况下转载，若非则不得使用我方内容。 
