Flutter AppBar 工具栏、导航栏

目录

参数详解

AppBar 

TabBar

 代码示例

效果图

完整代码 

---

Flutter AppBar组件是应用的工具栏，是由多个组件组成。下面详细介绍appBar使用方法、TabBar使用方法、去掉头部的appBar、仿美团发现AppBar(可滚动TabBar)

官方常用属性图文简要说明：

参数详解

AppBar 

属性	说明
leading	在标题前面显示的一个控件，在首页通常显示应用的 logo或菜单； 在其他界面通常显示为返回按钮
automaticallyImplyLeading	默认true leading为null，并且堆栈中存在页面，则自动推导为BackButton。 leading不为null，则此参数无效   为false时不会推导，使中间/标题拉伸
title	标题，通常显示为当前界面的标题文字，可以放组件
actions	通常使用 IconButton 来表示，可以放按钮组
flexibleSpace	可伸展、折叠部件
bottom	通常放 tabBar，标题下面显示一个 Tab 导航栏
elevation	阴影高度
shape	形状
backgroundColor	导航背景颜色
brightness	亮度
iconTheme	图标样式
actionsIconTheme	actions样式
textTheme	文字样式
primary	默认true
centerTitle	标题是否居中显示
titleSpacing	默认NavigationToolbar.kMiddleSpacing
toolbarOpacity	应用工具栏透明度
bottomOpacity	应用栏底部透明度

下表面对bottom做简单介绍

bottom 通常放 tabBar，标题下面显示一个 Tab 导航栏

Scaffold外层为DefaultTabController组件（嵌套），有三个属性length（TabBar个数）、initialIndex（默认显示tabbar下标）、child（子组件）。

注意事项：必须给定length属性、bottom中子组件个数与TabBarView中子组件个数相对应(不明白可以看示例代码)。

TabBar

属性	说明
tabs	子组件集合
controller	tab控制器
isScrollable	是否可滚动。默认false
indicatorColor	指示器颜色
indicatorWeight	指示器高度。默认2.0
indicatorPadding	指示器内边距。默认EdgeInsets.zero
indicator	指示器装饰/样式
indicatorSize	指示器大小计算方式，TabBarIndicatorSize.label 跟文字等宽,TabBarIndicatorSize.tab 跟每个 tab 等宽
labelColor	选中label文字颜色
labelStyle	选中label字样式
labelPadding	label内边距
unselectedLabelColor	未选中label文字颜色
unselectedLabelStyle	未选中label字样式
dragStartBehavior	默认DragStartBehavior.start
onTap

 代码示例

 appBar的基本用法：示例代码效果见（图一）

return MaterialApp(
      //去掉debug标签
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter AppBar 组件'),
          //标题不居中
          centerTitle: false,
          leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {
              print('我是leading按钮');
            },
          ),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.add_a_photo),
              onPressed: () {
                print('我是右3按钮');
              },
            ),
            IconButton(
              icon: Icon(Icons.save),
              onPressed: () {
                print('我是右2按钮');
              },
            ),
            IconButton(
              icon: Icon(Icons.close),
              onPressed: () {
                print('我是右1按钮');
              },
            ),
          ],
        ),
      ),
    );

appBar中Bottom使用方法：示例代码效果见（图二）

return MaterialApp(
      home: DefaultTabController(
        //指定tabbar个数
        length: 3,
        initialIndex:0,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Flutter AppBar 组件'),
            
            bottom: TabBar(
              tabs: <Widget>[
                Tab(text: 'PageA',),
                Tab(text: 'PageB',),
                Tab(text: 'PageC',),
              ],
            ),
          ),

          body: TabBarView(
            children: <Widget>[
              TabPageA(),
              TabPageB(),
              TabPageC(),
            ],
          ),
        ),
      ),
    );
  }
}

去掉头部的appBar ：示例代码效果见（图三）

//去掉头部的appBar(其实就是将TabBar组件放在了title中)
return MaterialApp(
      home: DefaultTabController(
        //指定tabbar个数
        length: 3,
        initialIndex:0,
        child: Scaffold(
          appBar: AppBar(
            title: TabBar(
              tabs: <Widget>[
                Tab(text: 'PageA',),
                Tab(text: 'PageB',),
                Tab(text: 'PageC',),
              ],
            ),
          ),

          body: TabBarView(
            children: <Widget>[
              TabPageA(),
              TabPageB(),
              TabPageC(),
            ],
          ),
        ),
      ),
    );

 仿 美团 发现 AppBar：示例代码效果见（图四）

    return MaterialApp(
      home: DefaultTabController(
        //指定tabbar个数
        length: 9,
        initialIndex:0,
        child: Scaffold(
          appBar: AppBar(
            title: Text('发现',style: TextStyle(fontSize: 22,color: Color(0xff000000)),),
            centerTitle: true,
            backgroundColor:Color(0xffffffff),
            elevation: 0,
            bottom: TabBar(
              labelColor: Color(0xff000000),
              labelStyle: TextStyle(fontSize: 19),
              unselectedLabelColor: Color(0xff000000),
              unselectedLabelStyle: TextStyle(fontSize: 13),
              isScrollable: true,
              indicatorColor: Color(0xff00BF00),
              indicatorSize:TabBarIndicatorSize.label,
              indicatorWeight:3.0,
              tabs: <Widget>[
                Tab(text: '推荐',),
                Tab(text: '丽人',),
                Tab(text: '旅行',),
                Tab(text: '电影',),
                Tab(text: '结婚',),
                Tab(text: '购物',),
                Tab(text: '教培',),
                Tab(text: '家装',),
                Tab(text: '亲子',),
              ],
            ),
          ),

          body: TabBarView(
            children: <Widget>[

              //  Widgets ......

              ),
            ],
          )
        ),
      ),
    );

效果图

完整代码 

查看完整代码