本文演示如何使用 TabController 控件构建一个带 Tab 功能的界面框架。
在 Flutter 的 Material 风格中,Tab 是建立在界面的上方而不是像iOS中那样在屏幕的底部。当然,它同样也具有到在组织不同功能区,让用户方便的在功能组间切换的能力。
在 Flutter 中,通过 TabController 来实现 Tab 切换的功能。
在本文中,我们将演示如何用 TabController 在两个界面中进行切换。
定义要切换的界面
首先,我们定义两个简单的界面。 在项目的 lib 目录中新建一个名为 pages.dart 的文件。在文件中定义两个界面类,如下:
1 | import 'package:flutter/material.dart'; |
可以看到,为了达到演示效果,我们只是简单的分别定义了两个文本在不同的界面。
定义 TabControoler
在 main.dart 中,将 MaterialApp 的 home 属性设置为使用 DefaultTabController。如下:
1 | import 'package:flutter/material.dart'; |