Flutter控件演示 - TabController

本文演示如何使用 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()
],)
),
)
);
}
}

本文标题:Flutter控件演示 - TabController

文章作者:晨星

发布时间:2019年10月02日 - 08:10

最后更新:2020年05月28日 - 16:05

原始链接:https://www.mls-tech.info/app/flutter/flutter-widget-tabcontroller/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。