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...

你可能感兴趣的:(flutter,flutter)