Flutter系列（六）顶部导航详解
完整工程：
Flutter系列（四）底部导航+顶部导航+图文列表完整代码_摸金青年v的博客-CSDN博客
详细解读：
Flutter系列（五）底部导航详解_摸金青年v的博客-CSDN博客
一、前言
本文介绍顶部导航 的实现，使用到的组件DefaultTabController、Scaffold、PreferredSize、TabBar、TabBarView
二、组件介绍
1. DefaultTabController组件
| 属性 | 含义 | 类型 |
|---|---|---|
| length | 顶部导航的个数 | int |
| child | 子组件 | Widget |
2. Scaffold组件
Scaffold在上一章介绍过： Flutter系列（五）底部导航详解_摸金青年v的博客-CSDN博客
这里使用到它的 appBar属性，appBar的类型是PreferredSizeWidget，想要调整导航栏距离屏幕顶端的高度需要用到PreferredSize
3. PreferredSize组件
这里使用PreferredSize的目的是：方便后面的自定义搜索框的嵌入，可以控制顶部导航栏距离屏幕顶部的行距，避免被搜索框遮挡。
| 属性 | 含义 | 类型 |
|---|---|---|
| preferredSize | 导航栏距离屏幕顶端的高度 | Size |
| child | 子控件 | Widget |
4. TabBar组件和Tab组件
| 属性 | 含义 | 类型 |
|---|---|---|
| labelColor | 选中时文字颜色 | Color |
| unselectedLabelColor | 未选中时文字颜色 | Color |
| tabs | 标签内容 | List<Tab> |
这里标签内容使用Tab组件
5. TabBarView组件
顶部导航的页面，每个页面先封装函数，便于后续扩展
三、顶部导航完整代码
@overrideWidget build(BuildContext context) {return DefaultTabController(length: 3,child: Scaffold(backgroundColor: Colors.white, //顶部导航背景色appBar: const PreferredSize(preferredSize: Size.fromHeight(26), //距离屏幕顶端的高度child: TabBar(labelColor: Colors.blue, //选中时颜色unselectedLabelColor: Colors.black26, //未选中时颜色tabs: [Tab(text: '推荐'),Tab(text: '资讯'),Tab(text: '科技'),],),),body: TabBarView(children: [RecommendPage(),const Icon(Icons.directions_transit),const Icon(Icons.directions_bike),],),),);}展示样式和完整工程：
Flutter系列（四）底部导航+顶部导航+图文列表完整代码_摸金青年v的博客-CSDN博客
END...
