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 {
//界面数组
List 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(
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> | 按下其中某个按钮的回调事件。需要根据返回的索引设置当前的索引 |
个人博客