Flutter--AppBar组件和TabBar组件

一、AppBar介绍

AppBar：一个非常好用的导航条，一般为Scaffold这个组件appBar属性所用

二、AppBar源码

AppBar({
    Key key,
    this.leading,//导航条左边的组件
    this.automaticallyImplyLeading = true,//配合leading使用
    this.title,//标题
    this.actions,//导航条右边的组件数组
    this.flexibleSpace,//可伸展、折叠部件
    this.bottom,//导航条底部组件，一般配合TabBar使用
    this.elevation,//阴影高度
    this.shadowColor,//阴影颜色
    this.shape,//边框样式
    this.backgroundColor,//背景色
    this.brightness,//设置导航条顶部状态栏的亮度
    this.iconTheme,//图标样式
    this.actionsIconTheme,//actions样式
    this.textTheme,//文字样式
    this.primary = true,//是否沉浸在状态栏下
    this.centerTitle,//标题是否居中显示
    this.excludeHeaderSemantics = false,
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,标题左右两边的间距
    this.toolbarOpacity = 1.0,//工具栏透明度
    this.bottomOpacity = 1.0,//底部透明度
    this.toolbarHeight,//工具栏高度
    this.leadingWidth,
  }) : assert(automaticallyImplyLeading != null),
       assert(elevation == null || elevation >= 0.0),
       assert(primary != null),
       assert(titleSpacing != null),
       assert(toolbarOpacity != null),
       assert(bottomOpacity != null),
       preferredSize = Size.fromHeight(toolbarHeight ?? kToolbarHeight + (bottom?.preferredSize?.height ?? 0.0)),
       super(key: key);

20190618152106894.png

三、AppBar属性介绍

属性	说明
leading	导航条左边的组件
automaticallyImplyLeading	配合leading使用 automaticallyImplyLeading的值为true,leading为null,栈内还有别的页面，会默认添加BackButton按钮 automaticallyImplyLeading的值为true,leading不为null,无效
title	标题
actions	导航条右边的组件数组
flexibleSpace	可伸展、折叠部件
bottom	导航条底部组件，一般配合TabBar使用（TabBar的使用见下文）
elevation	阴影高度
shadowColor	阴影颜色
shape	边框样式
backgroundColor	背景色
brightness	导航栏顶部状态栏的样式 Brightness.dark白色 Brightness.light黑色
iconTheme	图标的样式，如果未设置actionsIconTheme，actions的样式也以iconTheme为主，设置了actionsIconTheme，actions的样式以actionsIconTheme为主
actionsIconTheme	actions图标的样式
textTheme	文本的样式
primary	是否沉浸在状态栏下面，默认为true false，沉浸在状态栏下面
centerTitle	标题是否居中
titleSpacing	标题左右两边的间距，默认为NavigationToolbar.kMiddleSpacing
toolbarOpacity	工具栏透明度，值为1.0完全不透明，值为0.0完全透明
bottomOpacity	bottom透明度，值为1.0完全不透明，值为0.0完全透明
toolbarHeight	工具栏高度

三、AppBar的demo

return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            //导航条左边的组件
            leading: Icon(Icons.backspace_outlined),
            //配合leading使用
            automaticallyImplyLeading: false,
            //标题
            title: Text("AppBar学习"),
            //做折叠效果使用
//              flexibleSpace: FlexibleSpaceBar(),

            //导航条右边的一组组件
            actions: [
              Icon(Icons.settings),
              Icon(Icons.search),
              Icon(Icons.add_circle)
            ],
            //阴影
            elevation: 10,
            //阴影颜色
            shadowColor: Colors.yellow,
            //边框样式
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(10))),
            //背景色
            backgroundColor: Colors.red,
            //设置状态栏模式
            brightness: Brightness.dark,
            //设置图标的样式（颜色，不透明度和大小）
            iconTheme: IconThemeData(color: Colors.yellow),
            //设置actions图标的样式（颜色，不透明度和大小）
            actionsIconTheme: IconThemeData(color: Colors.purple),
            //设置文字的样式
            textTheme: TextTheme(),
            //是否沉浸在状态栏下，false会沉浸在状态栏下
            primary: true,
            //标题是否会显示在中间
            centerTitle: true,
            //标题左右两边的间距，默认为NavigationToolbar.kMiddleSpacing
            titleSpacing: NavigationToolbar.kMiddleSpacing,
            //工具栏透明度，值为1.0完全不透明，值为0.0完全透明
            toolbarOpacity: 1.0,
            //bottom透明度，值为1.0完全不透明，值为0.0完全透明
            bottomOpacity: 1.0,
            //工具栏高度
              toolbarHeight:40,
          ),
          body: Container()),
    );

a30146a72342989b866d538946d63d1.png

四、AppBar的bottom属性通常放TabBar组件，即添加一个Tab导航条

TabBar使用
①Scaffold外层需要添加DefaultTabController，有三个属性
length--tab的个数
initialIndex--默认选中tab的index
child--子组件
②必须给定length属性，length大小为tabs的个数

五、TabBar的源码

const TabBar({
    Key key,
    @required this.tabs,//tab组件数组
    this.controller,//tab控制器
    this.isScrollable = false,//是否可滚动
    this.indicatorColor,//指示器颜色
    this.indicatorWeight = 2.0,//指示器高度
    this.indicatorPadding = EdgeInsets.zero,//指示器内边距
    this.indicator,//指示器样式
    this.indicatorSize,//指示器宽度
    this.labelColor,//选中文本颜色
    this.labelStyle,//选中文本样式
    this.labelPadding,//文本内边距
    this.unselectedLabelColor,//未选中文本颜色
    this.unselectedLabelStyle,//未选中文本样式
    this.dragStartBehavior = DragStartBehavior.start,
    this.mouseCursor,
    this.onTap,//选中监听
    this.physics,
  }) : assert(tabs != null),
       assert(isScrollable != null),
       assert(dragStartBehavior != null),
       assert(indicator != null || (indicatorWeight != null && indicatorWeight > 0.0)),
       assert(indicator != null || (indicatorPadding != null)),
       super(key: key);

六、TabBar的属性介绍

属性	说明
tabs	tab组件集合
controller	tab控制器
isScrollable	tabs是否可滚动，tabs的数量多的话，需要设置这个属性为true
indicatorColor	指示器颜色
indicatorWeight	指示器高度
indicatorPadding	指示器内边距
indicator	指示器样式，可以设置圆角，填充色等
indicatorSize	指示器宽度，有两种样式 TabBarIndicatorSize.tab和tab的宽度相同 TabBarIndicatorSize.label和文本的宽度相同
labelColor	选择文本的颜色
labelStyle	选中文本的样式
labelPadding	文本的内边距
unselectedLabelColor	未选中文本的颜色
unselectedLabelStyle	未选中文本的样式
onTap	选中监听

七、AppBar的bottom属性添加TabBar的demo

return MaterialApp(
        home: DefaultTabController(
      length: 9,
      initialIndex: 0,
      child: Scaffold(
          appBar: AppBar(
            title: Text("AppBar学习"),
            bottom: TabBar(
              //tab组件集合
              tabs: [
                Tab(text: "1111"),
                Tab(text: "2222"),
                Tab(text: "3333"),
                Tab(text: "4444"),
                Tab(text: "5555"),
                Tab(text: "6666"),
                Tab(text: "7777"),
                Tab(text: "8888"),
                Tab(text: "9999"),
              ],
              //tab是否可滚动
              isScrollable: true,
              //指示器颜色
              indicatorColor: Colors.red,
              //指示器高度
              indicatorWeight: 4,
              //指示器内边距
              indicatorPadding: EdgeInsets.all(10),
              //指示器样式
              indicator: BoxDecoration(
                  color: Colors.purple,
                  borderRadius: BorderRadius.all(Radius.circular(20))),
              //指示器宽度
              indicatorSize: TabBarIndicatorSize.tab,
              //文本颜色
              labelColor: Colors.amberAccent,
              //文本样式
              labelStyle: TextStyle(fontSize: 15),
              //文本内边距
              labelPadding:
                  EdgeInsets.only(left: 10, top: 0, right: 10, bottom: 0),
              //未选中文本的颜色
              unselectedLabelColor: Colors.orange,
              //未选中文本的样式
              unselectedLabelStyle: TextStyle(fontSize: 10),
              //回调监听
              onTap: (index) {
                print(index);
              },
            ),
          ),
          body: Container()),
    ));

f66e3af8704a44f2080c95c1383340a.png

八、去掉AppBar头部的，TabBar的demo

return MaterialApp(
        home: DefaultTabController(
      length: 4,
      initialIndex: 0,
      child: Scaffold(
          appBar: AppBar(
            title: TabBar(
              //tab组件集合
              tabs: [
                Tab(text: "1111"),
                Tab(text: "2222"),
                Tab(text: "3333"),
                Tab(text: "4444"),
              ],
              //tab是否可滚动
              isScrollable: true,
              //指示器颜色
              indicatorColor: Colors.red,
              //回调监听
              onTap: (index) {
                print(index);
              },
            ),

          ),
          body: TabBarView(
            children: [
              MyPage1(),
              MyPage2(),
              MyPage3(),
              MyPage4(),
            ],
          )

      ),
    ));

226f31f6e1b983c3f05489ae5922423.png