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组件

5. TabBarView组件

                   顶部导航的页面，每个页面先封装函数，便于后续扩展

三、顶部导航完整代码

@override
  Widget 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...