Flutter 之TabBar实现

Flutter最基础的组件类是Widget，其它所有组件都继承Widget的，紧接着下面有两大类组件： 有状态组件 及 无状态组件 。有状态组件是界面会发生变化的组件，无状态组件即界面不会发生变化的组件；

Widget

无状态组件：StatelessWidget

无状态组件（StatelessWidget）是不可变的，这意味着它们的属性是不可以改变的，所有的值都是最终的；

有状态组件：StatefulWidget

有状态组件(StatefulWidget)持有的状态可能在Widget生命周期中发生变化。
实现一个StatefulWidget至少需要两个类：

• 一个StatefulWidget类。
• 一个是State类。

StatefulWidget类本身是不变的，但是State类在Widget生命周期中始终存在。要想让界面发生变化，就要使用state对象，state要继承与StatefulWidget。StatefulWidget是描述外观的，而state管理最终显示的外观，数据的变化，当数据发生变化之后通过setState 重新渲染界面

因为TabBar的状态是会变的，所以实现TabBar的时候选用StatefulWidget，如下代码仿微信的布局方式写的：

import 'package:flutter/material.dart';

import 'package:wechat_demo/pages/chat_page.dart';
import 'package:wechat_demo/pages/discover_page.dart';
import 'package:wechat_demo/pages/friends_page.dart';
import 'package:wechat_demo/pages/mine_page.dart';

class RootPage extends StatefulWidget {
  @override
  _RootPageState createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {

  //界面数组
  List<Widget> pages = [
    ChatPage(),
    FriendsPage(),
    DiscoverPage(),
    MinePage()
  ];

  int _currentIndex = 2;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
            onTap: (int index){
              _currentIndex = index;
              setState(() {});
            },
            selectedFontSize: 12.0,  //设置选中的字体大小
            type: BottomNavigationBarType.fixed,
            fixedColor: Colors.green,
            currentIndex: _currentIndex,
            items: <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                  icon: Image(height: 20,width: 20, image: AssetImage('images/tabbar_chat.png')), //未选中时的图标
                  activeIcon: Image(height: 20,width: 20, image: AssetImage('images/tabbar_chat_hl.png')),  //选中时的图标
                  title: Text('微信')
              ),
              BottomNavigationBarItem(
                  icon: Image(height: 20,width: 20, image: AssetImage('images/tabbar_friends.png')),
                  activeIcon: Image(height: 20,width: 20, image: AssetImage('images/tabbar_friends_hl.png')),
                  title: Text('通讯录')
              ),
              BottomNavigationBarItem(
                  icon: Image(height: 20,width: 20, image: AssetImage('images/tabbar_discover.png')),
                  activeIcon: Image(height: 20,width: 20, image: AssetImage('images/tabbar_discover_hl.png')),
                  title: Text('发现')
              ),
              BottomNavigationBarItem(
                  icon: Image(height: 20,width: 20, image: AssetImage('images/tabbar_mine.png')),
                  activeIcon: Image(height: 20,width: 20, image: AssetImage('images/tabbar_mine_hl.png')),
                  title: Text('我')
              )
            ]
        ),
        body: pages[_currentIndex],
      ),
    );
  }
}

这里介绍几个关键的组件

1、Scaffold(脚手架组件)

Scaffold实现了基本的Material Design布局。只要是在Material Design中定义过的单个界面显示的布局组件元素，都可以使用Scaffold来绘制。

Scaffold常见的属性如下表：

属性名	类型	说明
APPBar	AppBar	显示在界面顶部的一个AppBar
body	Widget	当前界面所显示的主要内容
floatingActionButton	Widget	在Material Design中定义的一个功能按钮
persistentFooterButtons	List<Widget>	固定在下方显示的按钮
drawer	Widget	侧边栏组件
bottomNavgationBar	Widget	显示在底部的导航栏按钮栏
backgroundColor	Color	背景颜色
resizeToAvoidBottomPadding	bool	控制界面内容body是否重新布局来避免底部被覆盖，比如键盘显示时

2、BottomNavgationBar（底部导航条组件）

BottomNavgationBar是底部导航条，类似于iOS中的TabbarController,可以很容易的再tab之间切换，大部分APP都采用这种布局方式。
BottomNavgationBar的常见属性如下表：

属性名	类型	说明
currentIndex	int	当前索引，用来切换按钮控制
fixedColor	Color	选中按钮的颜色。如果没有指定值，则用系统主题色
iconSize	double	按钮图标大小
items	List<BottomNavgationBarItem>	底部导航条按钮集，每一项是一个BottomNavgationBarItem，有icon图标及title文本属性
onTap	ValueChanged<int>	按下其中某个按钮的回调事件。需要根据返回的索引设置当前的索引

个人博客