一、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