Flutter - Tab标签页

中间件 2020-05-20

展开全文

日常工作中，我们有可能会有顶部的Tab页进行切换。
这时候我们就用到了三个Widget。

TabBar
Tab
TabBarView
那么他们该怎么用呢?下面我们由代码来讲解。
首先我们回顾下前面的appBar，这个widget实际上就是用来定义app顶部界面的，所以我们的顶部Tab标签就应该放在appBar里面。在前面的文章中我们已经介绍过的appBar有哪些属性呢？
leading 顶部靠左
actions 顶部靠右
那今天我们来说另外个，就是bottom。所以我们将Tab标签页放在appBar的bottom中，看下代码:

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigreation',
            onPressed: () => debugPrint('Navigreation button is pressed'),
          ),
          title: Text('导航'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              tooltip: 'Search',
              onPressed: () => debugPrint('Search button is pressed'),
            ),
            IconButton(
              icon: Icon(Icons.more_horiz),
              tooltip: 'More',
              onPressed: () => debugPrint('More button is pressed'),
            )
          ],
          bottom: TabBar(
            tabs: <Widget>[
              Tab(icon: Icon(Icons.local_florist)),
              Tab(icon: Icon(Icons.change_history)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],
          ),
        ),
      ),
    );
  }
}

TabBar可以看成是一行标签页，里面放着tabs数组，每个元素就是我们的一个个Tab了。Tab里面就是一个个标签小图标。
那么如何点击tab标签切换页面呢，这个时候就用到我们上面说的TabBarView这个widget了。

        body: TabBarView(
          children: <Widget>[
            Icon(Icons.local_florist, size: 128.0, color: Colors.black12),
            Icon(Icons.change_history, size: 128.0, color: Colors.black12),
            Icon(Icons.directions_bike, size: 128.0, color: Colors.black12),
          ],
        ),

在body里面放入TabBarView标签，里面的元素和上面的TabBar一一对应。点击tab，就会自动切换body下面的Icon了。当然也可以滑动切换啦。
界面展示图如下:

tab.png

看了展示图，我们想说，这个标签页图片的颜色感觉都差不多，这样不怎么好区分哪个标签选中还是未选中啊。下来我们就说说如何自定义标签的一些样式。
在TabBar这个widget中，有几个属性可以设置:

unselectedLabelColor 未选中标签颜色
indicatorColor 标签下方的一小条横线颜色
indicatorSize 标签下方的一小条横线长度
indicatorWeight 标签下方的一小条横线厚度
那我们这时候来设置下这几个属性再看下效果:

          bottom: TabBar(
            unselectedLabelColor: Colors.green,
            indicatorColor: Colors.orange,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorWeight: 10.0,
            tabs: <Widget>[
              Tab(icon: Icon(Icons.local_florist)),
              Tab(icon: Icon(Icons.change_history)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],
          ),

tabbar.png

仔细的同学，在点击tab的时候会发现有一层浅浅的水波纹效果，这是material风格的一种特点。
那我们如何去自定义按钮水波纹的效果看起来明显点呢？
我们可以在MaterialApp里面的theme属性中设置

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
          primarySwatch: Colors.yellow,
          highlightColor: Color.fromRGBO(136, 207, 126, 1),
          splashColor: Colors.purple),
    );
  }
}

highlightColor: 点击按钮的背景色
splashColor: 水波纹效果的颜色

完整代码:

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
        primarySwatch: Colors.yellow,
        highlightColor: Color.fromRGBO(136, 207, 126, 1),
        splashColor: Colors.purple),
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigreation',
            onPressed: () => debugPrint('Navigreation button is pressed'),
          ),
          title: Text('导航'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              tooltip: 'Search',
              onPressed: () => debugPrint('Search button is pressed'),
            ),
            IconButton(
              icon: Icon(Icons.more_horiz),
              tooltip: 'More',
              onPressed: () => debugPrint('More button is pressed'),
            )
          ],
          bottom: TabBar(
            unselectedLabelColor: Colors.green,
            indicatorColor: Colors.orange,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorWeight: 10.0,
            tabs: <Widget>[
              Tab(icon: Icon(Icons.local_florist)),
              Tab(icon: Icon(Icons.change_history)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Icon(Icons.local_florist, size: 128.0, color: Colors.black12),
            Icon(Icons.change_history, size: 128.0, color: Colors.black12),
            Icon(Icons.directions_bike, size: 128.0, color: Colors.black12),
          ],
        ),
      ),
    );
  }
}

谢谢大家~