一 。AppBar、
1.1 簡介
AppBar “應用欄”
- 應用欄由工具欄組成，或者是工具欄和其他 widget 組合形成，例如 TabBar和FlexibleSpaceBar;
- 應用欄通常用於 Scaffold.appBar 屬性，該屬性將應用欄放置在螢幕頂部的固定高度小部件中;
- 對於可滾動的應用欄，請參閱SliverAppBar，它將AppBar嵌入 sliver 中以便在CustomScrollView中使用; """
1.2 基本用法
AppBar 主要屬性：
- leading：
如果省略了 leading ，但 AppBar 在帶有 Drawer 的 Scaffold 中，則會插入一個 button 以開啟 Drawer。如果沒有Drawer ， 預設的是個返回箭頭，可以通過設定來關閉automaticallyImplyLeading 為false ， - automaticallyImplyLeading = true：
如果有 leading 這個不會管用 ； 如果沒有leading ，當有側邊欄的時候， false：不會顯示預設的圖片，true 會顯示 預設圖片，並響應開啟側邊欄的事件 - title: 標題
- actions,右邊的icon， 一般的是icon 或者是文字
- flexibleSpace, 在title上面的一個東西，一般無用
- bottom, 一般就是tabbar ， 也可以是別的
- elevation, Z軸高度，也就是陰影 預設是1 預設就是有高度 陰影的
- backgroundColor,導航欄的顏色 預設是 ThemeData 的顏色
- brightness,狀態列的深度 有白色和黑色兩種主題
- iconTheme,
- centerTitle, title是否居中
- titleSpacing flexibleSpace 和 title 的距離 預設是重合的
- NavigationToolbar.kMiddleSpacing,
- toolbarOpacity = 1.0 導航欄的透明度
- bottomOpacity = 1.0 bottom的透明度
1.3 圖片
1.4 demo
import 'package:flutter/material.dart';
class AppBarDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return AppBarForTabBarDemo();
}
}
class AppBarForTabBarDemo extends State with SingleTickerProviderStateMixin {
final List<Tab> _tabs = <Tab>[
new Tab(text: '關注'),
new Tab(text: '推按'),
new Tab(text: '視訊'),
new Tab(text: '遊戲'),
new Tab(text: '音樂'),
new Tab(text: '體育'),
new Tab(text: '生活'),
new Tab(text: '圖片'),
];
var _tabController;
@override
void initState() {
_tabController = TabController(vsync: this, length: _tabs.length);
super.initState();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
drawer: _drawer(context),
body: new TabBarView(
controller: _tabController,
children: _tabs.map((Tab tab) {
return new Center(child: new Text(tab.text));
}).toList(),
),
appBar: AppBar(
leading: Icon(Icons.home),
// 如果沒有設定這項， 二級頁面 會預設是返回箭頭 ， 有側邊欄的頁面預設有圖示（用來開啟側邊欄）
automaticallyImplyLeading: true,
// 如果有 leading 這個不會管用 ； 如果沒有leading ，當有側邊欄的時候， false：不會顯示預設的圖片，true 會顯示 預設圖片，並響應開啟側邊欄的事件
title: Text("標題"),
centerTitle: true,
// 標題是否在居中
actions: <Widget>[
IconButton(
icon: Icon(Icons.save),
tooltip: 'Add Alarm',
onPressed: () {
// 不寫onPressed 預設，這個圖片不能點選 且會有不可點選的樣式（和 寫了這個有不同的樣式）
// 如果有 onPressed 但是值是null 也會是不可點選的樣式
}),
IconButton(
icon: Icon(Icons.add_alarm),
tooltip: 'Add Alarm',
onPressed: () {
// do nothing
})
],
bottom: TabBar(
isScrollable: true,
labelColor: Colors.redAccent, // 選中的Widget顏色
indicatorColor:Colors.redAccent, // 選中的指示器顏色
labelStyle: new TextStyle(fontSize: 15.0),// 必須設定，設定 color 沒用的，因為 labelColor 已經設定了
unselectedLabelColor: Colors.white,
unselectedLabelStyle: new TextStyle(
fontSize: 15.0), // 設定 color 沒用的，因為unselectedLabelColor已經設定了
controller: _tabController,
// tabbar 必須設定 controller 否則報錯
indicatorSize: TabBarIndicatorSize.label,
// 有 tab 和 label 兩種
tabs: _tabs,
),
// elevation: 0.1, // 導航欄Z軸的高度，預設是1 預設就是有高度 陰影的
// backgroundColor: Colors.red,// 導航欄的顏色 預設是 ThemeData 的顏色
// flexibleSpace: FlexibleSpaceBar(title: Text("你號"),),//這個堆疊在工具欄上面 一般 appbar不用 主要用在 SliverAppBar上
// brightness: Brightness.light, //狀態列的深度 有白色和黑色兩種主題
// titleSpacing: 10,//flexibleSpace 和 title 的距離 預設是重合的
// toolbarOpacity: 0.5,// 導航欄透明度 預設是1 ，不包括flexibleSpace
// bottomOpacity: 0.5,
),
);
}
}
Drawer _drawer(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.lightBlueAccent,
),
child: Center(
child: SizedBox(
width: 60.0,
height: 60.0,
child: CircleAvatar(
child: Text('頭像'),
),
),
),
),
ListTile(
title: Text('Item 1'),
leading: new CircleAvatar(
child: new Icon(Icons.school),
),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
title: Text('Item 2'),
leading: new CircleAvatar(
child: new Text('B2'),
),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
title: Text('Item 3'),
leading: new CircleAvatar(
child: new Icon(Icons.list),
),
onTap: () {
Navigator.pop(context);
},
),
],
),
);
}
複製程式碼