AppBar({
Key key,
this.leading,//在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮
this.automaticallyImplyLeading = true,
this.title,//Toolbar 中主要内容，通常显示为当前界面的标题文字
this.actions,//一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单
this.flexibleSpace,//一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样，可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用
this.bottom,//一个 AppBarBottomWidget 对象，通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏
this.elevation = 4.0,//纸墨设计中控件的 z 坐标顺序，默认值为 4，对于可滚动的 SliverAppBar，当 SliverAppBar 和内容同级的时候，该值为 0， 当内容滚动 SliverAppBar 变为 Toolbar 的时候，修改 elevation 的值
this.backgroundColor,//APP bar 的颜色，默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用
this.brightness,//App bar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness
this.iconTheme,//App bar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme
this.textTheme,//App bar 上的文字样式。默认值为 ThemeData.primaryTextTheme
this.primary = true,
this.centerTitle,//标题是否居中显示，默认值根据不同的操作系统，显示方式不一样,true居中 false居左
this.titleSpacing = NavigationToolbar.kMiddleSpacing,
this.toolbarOpacity = 1.0,
this.bottomOpacity = 1.0,
})
隐藏返回按钮
automaticallyImplyLeading: false,
| 属性 | 描述 |
|---|---|
| tabs | 显示的标签内容，一般使用 Tab 对象,也可以是其他 的 Widget |
| controller | TabController 对象 |
| isScrollable | 是否可滚动 |
| indicatorColor | 指示器颜色 |
| indicatorWeight | 指示器高度 |
| indicatorPadding | 底部指示器的 Padding |
| indicator | 指示器 decoration，例如边框等 |
| indicatorSize | 指示器大小计算方式，TabBarIndicatorSize.label 跟文 字等宽,TabBarIndicatorSize.tab 跟每个 tab 等宽 |
| labelColor | 选中 label 颜色 |
| labelStyle | 选中 label 的 Style |
| labelPadding | 每个 label 的 padding 值 |
| unselectedLabelColor | 未选中 label 颜色 |
| unselectedLabelStyle | 未选中 label 的 Style |
只有APPbar的写法
Widget build(BuildContext context) {
return new Scaffold(
/// Line 1
appBar: new AppBar(
leading: IconButton(
icon: Icon(Icons.close),
onPressed: () {
Navigator.maybePop(context);
}),
automaticallyImplyLeading: true,
elevation: 10,
centerTitle: true,
title: Text("主标题"),
actions: <Widget>[
IconButton(
icon: Icon(Icons.alarm),
onPressed: () {
print("alarm");
}),
IconButton(
icon: Icon(Icons.home),
onPressed: () {
print("home");
}),
PopupMenuButton(
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
PopupMenuItem<String>(
child: Text("热度"),
value: "hot",
),
PopupMenuItem<String>(
child: Text("最新"),
value: "new",
),
],
onSelected: (String action) {
switch (action) {
case "hot":
print("hot");
break;
case "new":
print("new");
break;
}
},
onCanceled: () {
print("onCanceled");
},
)
],
),
);
appbar + tabs
appbar 增加tabs，需要再MaterialApp 和 Scaffold 控件中间增加DefaultTabController
DefaultTabController({
Key key,
@required this.length, // 有几个tabs
this.initialIndex = 0,
@required this.child, // 一般写Scaffold 也就tabbar的父控件
})
在顶部没有AppBar的情况
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
bottom: TabBar(
tabs: <Widget>[Tab(text: "热门"), Tab(text: "推荐")],
),
),
body: TabBarView(
children: <Widget>[
ListView(
children: <Widget>[
ListTile(title: Text("第一个tab")),
ListTile(title: Text("第一个tab")),
ListTile(title: Text("第一个tab"))
],
),
ListView(
children: <Widget>[
ListTile(title: Text("第二个tab")),
ListTile(title: Text("第二个tab")),
ListTile(title: Text("第二个tab"))
],
)
],
),
));
}
顶部有APPbar ，这个时候会出现多了appbar的空间，这个时候不能写到bottom中，要写到title中
image.png
image.png
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Row(
children: <Widget>[
Expanded(
flex: 1,
child: TabBar(
tabs: <Widget>[Tab(text: "热门"), Tab(text: "推荐")],
),
)
],
),
),
body: TabBarView(
children: <Widget>[
ListView(
children: <Widget>[
ListTile(title: Text("第一个tab")),
ListTile(title: Text("第一个tab")),
ListTile(title: Text("第一个tab"))
],
),
ListView(
children: <Widget>[
ListTile(title: Text("第二个tab")),
ListTile(title: Text("第二个tab")),
ListTile(title: Text("第二个tab"))
],
)
],
),
));
}
通过TabController 定义TabBar 来获取点击事件
1、必须继承StatefulWidget
2、必须实现SingleTickerProviderStateMixin
3、页面初始化，实例化TabController
4、页面结束，tabController.dispose()
5、TabBar 指定controller
6、TabBarView指定controller
| 属性 | 描述 |
|---|---|
| animation | 官方：一个动画，其值表示TabBar所选选项卡指示器的当前位置以及TabBar 和TabBarView的scrollOffsets。 |
| index | 当前tab索引，跳转后执行 |
| indexIsChanging | 动画是时为true |
| length | tab总数 |
| offset | 动画的值和索引之间的差异。偏移量必须在-1.0和1.0之间 |
| previousIndex | 前tab索引，跳转后执行 |
| animateTo | 从当前tab跳到目标tab并执行动画 |
| dispose | 销毁 |
| addListener | 添加监听 |
| noSuchMethod | 当访问不存在的属性或方法时调用（不知道是什么鬼） |
| notifyListeners | 调用所有监听器 |
| removeListener | 清除监听器 |
class TabBarControllerPage extends StatefulWidget {
@override
_TabBarControllerPageState createState() => _TabBarControllerPageState();
}
class _TabBarControllerPageState extends State<TabBarControllerPage>
with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
@override
void initState() {
super.initState();
_tabController = new TabController(
vsync: this,
length: 2,
);
_tabController.addListener(() {
if (_tabController.indexIsChanging) {
// 因为回调2次，加上就回调1次
print(_tabController.index);
print(_tabController.previousIndex);
}
});
}
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
controller: _tabController,
tabs: <Widget>[
Tab(
text: "text1",
),
Tab(
text: "text1",
),
],
),
),
body: TabBarView(
// controller: _tabController,
children: <Widget>[
Center(
child: Text("tabbar1"),
),
Center(
child: Text("tabbar2"),
)
],
),
));
}
}
网友评论