Flutter控件演示 - TabController

本文演示如何使用 TabController 控件构建一个带 Tab 功能的界面框架。

在 Flutter 的 Material 风格中，Tab 是建立在界面的上方而不是像iOS中那样在屏幕的底部。当然，它同样也具有到在组织不同功能区，让用户方便的在功能组间切换的能力。

在 Flutter 中，通过 TabController 来实现 Tab 切换的功能。

在本文中，我们将演示如何用 TabController 在两个界面中进行切换。

定义要切换的界面

首先，我们定义两个简单的界面。 在项目的 lib 目录中新建一个名为 pages.dart 的文件。在文件中定义两个界面类，如下：

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。如下:

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()
          ],)
            ),
      )
    );
  }
}