本文演示如何使用 TabController 控件构建一个带 Tab 功能的界面框架。
在 Flutter 的 Material 风格中,Tab 是建立在界面的上方而不是像iOS中那样在屏幕的底部。当然,它同样也具有到在组织不同功能区,让用户方便的在功能组间切换的能力。
在 Flutter 中,通过 TabController 来实现 Tab 切换的功能。
在本文中,我们将演示如何用 TabController 在两个界面中进行切换。
定义要切换的界面
首先,我们定义两个简单的界面。 在项目的 lib 目录中新建一个名为 pages.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
| import 'package:flutter/material.dart';
class TodoPage extends StatelessWidget {
Widget build(BuildContext context) {
return Center( child: new Column(children: <Widget>[ Text("Todo Page") ],) ); } }
class NotePage extends StatelessWidget {
Widget build(BuildContext context) {
return Center( child: new Column(children: <Widget>[ Text("Note Page") ],) ); } }
|
可以看到,为了达到演示效果,我们只是简单的分别定义了两个文本在不同的界面。
定义 TabControoler
在 main.dart 中,将 MaterialApp 的 home 属性设置为使用 DefaultTabController。如下:
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
| import 'package:flutter/material.dart'; import 'pages.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: DefaultTabController( length: 2, child: Scaffold( appBar: AppBar( title: Text("Tab Demo"), bottom: TabBar( tabs: <Widget>[ Tab(icon : Icon(Icons.date_range), text : "Todo"), Tab(icon : Icon(Icons.note), text : "Notes") ], ) ), body: TabBarView(children: <Widget>[ TodoPage(), NotePage() ],) ), ) ); } }
|