Flutter 水平选项卡及视图组件

Flutter 水平选项卡及视图组件(TabBar)，TabBar是一个显示水平选项卡的Material Design组件，通常需要配套Tab选项组件及TabBarView页面视图组件一起使用。

TabBar组件常见属性如下所示：

Tab组件常见属性如下所示：

TabBarView组件常见属性如下所示：

TabBar的选项卡按钮通常显示在应用页面上部，TabBarView视图布局示例参考图:

相信大家都用过地图类软件。当选择好目的地以后，会列出几个选项，比如步行、自驾、公交车等，并给出需要多长时间以及对应路线之类的信息。接下来我们就用TabBar来实现一个类似的功能页面。

实现这个示例需要以下几个组件：

• DefaultTabController
• TabBar
• Tab
• TabBarView

在编写示例之前，我们先了解一下DefaultTabController这个组件，它是TabBar和TabBarView的控制器，是关联这个两组件的桥梁。

DefaultTabController的示例代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(new DefaultTabControllerSample());
}

class DefaultTabControllerSample extends StatelessWidget {

  // 选项卡数据
  final List<Tab> myTabs = <Tab>[
    Tab(text: '选项卡一'),
    Tab(text: '选项卡二'),
  ];
  @override
  Widget build(BuildContext context) {
return MaterialApp(
  // 用来组装TabBar及TabBarView
  home: DefaultTabController(
    // 选项卡长度
    length: myTabs.length,
    child: Scaffold(
      // 应用按钮
      appBar: AppBar(
        // 页面标题
        title: Text("AppBar标题"),
        // 添加选项卡按钮，注意此bottom表示在AppBar的底部，在整个页面上来看还处于顶部区域
        bottom: TabBar(
            tabs: myTabs,
        ),
      ),
      // 添加选项卡视图，即页面中间内容显示区域
      body: TabBarView(
        // 使用map迭代显示中间内空
        children: myTabs.map((Tab tab) {
            return Center(child: Text(tab.text));
        }).toList(),
      ),
    ),
  ),
);
  }
}

上述示例代码的视图展现大致如图所示:

注意 选项卡按钮TabBar我们放在AppBar的bottom元素下，示例显示的结果却是在页面的顶部区域。原因是此bottom表示的是AppBar的底部位置，AppBar本身就是在页面的顶部区域，所以选项卡按钮TabBar自然也在页面顶部偏下的位置。

接下来我们编写TabBar水平选项卡的整个示例。步骤如下：

步骤1：首先添加视图项数据ItemView，增加title及icon两个数据项。结构如下所示：

class ItemView {
  title; //标题
  icon;   //图标
}

步骤2：组装数据，添加所有选项类目。以自驾为例，代码如下所示。还可添加自行车、轮船、公交车、火车及步行数据：

ItemView(title: '自驾', icon: Icons.directions_car),

最后用List<ItemView>组装起来：

const List<ItemView> items = const <ItemView>[];

步骤3：添加被选中的视图并命名为SelectedView，此组件需要传入视图项数据，包含图标及标题，然后通过Column组件居中显示在界面中。代码结构如下所示：

// 被选中的视图
class SelectedView extends StatelessWidget {
  // TODO构造方法

  // 视图数据
  final ItemView item;

  @override
  Widget build(BuildContext context) {
    // 渲染页面，添加图标和文本
  }
}

步骤4：添加示例的主体，命名为TabBarSample。主要用DefaultTabController来包裹并指定选项卡的数量。接着在AppBar里添加TabBar组件。注意不要将这里的bottom理解为底部，应理解为AppBar的按钮部分。TabBar需要设置为可滚动的，因为选项卡子项较多，界面需要滑动才可以显示全。TabBar的子项tabs需要使用迭代器来展示Tab内容。添加好TabBar后再添加视图TabBarView，这里同样也需要使用迭代器来展示选项卡视图。

迭代器代码如下所示：

tabs: items.map((ItemView item) {
  return Tab(
            text: item.title,
            icon: new Icon(item.icon),
            );
}).toList(),

完整的示例代码如下所示：

import 'package:flutter/material.dart';

class TabBarSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 添加DefaultTabController关联TabBar及TabBarView
      home: DefaultTabController(
        length: items.length, //传入选项卡数量
        child: Scaffold(
          appBar: AppBar(
              title: const Text('TabBar选项卡示例'),
              // 选项卡按钮
              bottom: TabBar(
                isScrollable: true,                   //设置为可以滚动
                tabs: items.map((ItemView item) { //迭代添加选项卡按钮子项
                  // 选项卡按钮由文本及图标组成
                  return Tab(
                    text: item.title,
                    icon: Icon(item.icon),
                  );
                }).toList(),
              ),
          ),
          // 添加选项卡视图
          body: TabBarView(
              // 迭代显示选项卡视图
              children: items.map((ItemView item) {
                return Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: SelectedView(item: item),
                );
              }).toList(),
          ),
        ),
      ),
    );
  }
}

// 视图项数据
class ItemView {
  const ItemView({ this.title, this.icon });     //构造方法，传入标题及图标
  final String title;   //标题
  final IconData icon; //图标
}

// 选项卡的类目
const List<ItemView> items = const <ItemView>[
  const ItemView(title: '自驾', icon: Icons.directions_car),
  const ItemView(title: '自行车', icon: Icons.directions_bike),
  const ItemView(title: '轮船', icon: Icons.directions_boat),
  const ItemView(title: '公交车', icon: Icons.directions_bus),
  const ItemView(title: '火车', icon: Icons.directions_railway),
  const ItemView(title: '步行', icon: Icons.directions_walk),
];

// 被选中的视图
class SelectedView extends StatelessWidget {
  const SelectedView({ Key key, this.item }) : super(key: key);

  // 视图数据
  final ItemView item;

  @override
  Widget build(BuildContext context) {
    // 获取文本主题样式
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    // 添加卡片组件，展示有质感
    return Card(
      // 卡片颜色
      color: Colors.white,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
    // 垂直方向最小化处理
          crossAxisAlignment: CrossAxisAlignment.
center, //水平方向居中对齐
          children: <Widget>[
            Icon(item.icon, size: 128.0, color:
textStyle.color),
            Text(item.title, style: textStyle),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(TabBarSample());
}

上述示例代码的视图展现大致如图所示。

提示 选项卡项较多时，需要左右滑动才可以展示全。建议在做实际项目时，可以减少一些选项，尽量把更多的内容归在一起。这样可以提高用户体验效果。

酷客教程相关文章：

• Flutter 底部导航条组件
• Flutter 应用按钮组件(AppBar)
• Flutter 脚手架组件(Scaffold)
• Flutter 应用组件(MaterialApp)