作者：手机用户2502883383 | 来源：互联网 | 2023-10-11 07:54
Flutter提供了一种非常方便的方式来创建标签布局。为了使标签起作用，我们需要使选定的标签和内容部分保持同步。这是TabController的工作。我们的示例应用程序有一个屏幕，
Flutter提供了一种非常方便的方式来创建标签布局。为了使标签起作用，我们需要使选定的标签和内容部分保持同步。这是TabController的工作。我们的示例应用程序有一个屏幕，其中包含一个带有两个屏幕的标签栏。
要将Tabs添加到应用程序中，我所需要做的就是创建TabBar和TabBarView并将TabController附加到它们。TabController会将TabBar与TabBarView同步，以便我们可以实现所需的行为。
步骤一：创建tab页
- FirstScreen.dart
- SecondScreen.dart
在FirstScreen.dart中编写以下代码：
|
// 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中编写以下代码：
|
// 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(), ], ), ), ), ); } } |
在上面的代码中，我们导入了本文前面创建的两个屏幕。
扩展资料
- https://flutter.dev/docs/cookbook/design/tabs
- https://fidev.io/flutter-tabbar/
- http://www.ptbird.cn/flutter-tab-tabcontroller.html
京公网安备 11010802041100号