AppBar
appBar: AppBar(
title: Text('title'), // 標(biāo)題
actions: [
Icon(Icons.share)
], // 用來展示右側(cè)的組件
elevation: 20, // z 軸陰影
backgroundColor: Colors.red, // 背景色
centerTitle: false,
titleSpacing: 10,
toolbarOpacity: .5,
bottomOpacity: .5,
leading: Icon(Icons.star), // 用來顯示一個(gè)按鈕去關(guān)閉當(dāng)前頁面或者打開一個(gè) drawer
flexibleSpace: FlexibleSpaceBar(
title: Text('flexibleSpace'),
),
bottom: PreferredSize(
child: Container(
color: Colors.red,
child: Text('bottom'),
),
preferredSize: Size(500.0, 100.0)
),
automaticallyImplyLeading: true,
)
title 標(biāo)題
leading 用來顯示一個(gè)按鈕去關(guān)閉當(dāng)前頁面或者打開一個(gè) drawer,
automaticallyImplyLeading ????不知道有啥用
actions: <Widget>[] 右側(cè)操作按鈕等
flexibleSpace 創(chuàng)建一個(gè)靈活的空格 一般是 FlexibleSpace
bottom 一個(gè) block
elevation 陰影
backgroundColor 背景色
-
brightness [ Brightness.dark, Brightness.light] 亮度联逻，這里改變的是 wifi 和電量的顏色
image
image -
iconTheme
iconTheme: IconThemeData( color: Colors.white, opacity: 0.5 ), // 改變圖標(biāo)樣式 -
textTheme 改變字體樣式 TextTheme 可以選擇更改多種標(biāo)題的樣式
textTheme: TextTheme( title: TextStyle( fontSize: 18 ) ) -
primary 這個(gè)應(yīng)用程序欄是否顯示在屏幕頂部
如果為真，Appbar 的工具欄元素和 [ bottom ] 小部件將被系統(tǒng)狀態(tài)欄的高度填充在頂部检痰。[ flexibleSpace ] 的布局不受 [ primary ] 屬性的影響包归。
以 iphone 為例： primary: false 時(shí)展示成：
image centerTitle 標(biāo)題是否展示在中間
titleSpacing 標(biāo)題的間距, 默認(rèn)為 NavigationToolbar.kMiddleSpacing
沒有 leading 的時(shí)候可能需要設(shè)置toolbarOpacity 透明度 不影響 [ bottom ] 和 flexibleSpace
bottomOpacity [ bottom ] 的透明度
BottomNavigation
bottomNavigationBar: BottomNavigationBar(
iconSize: 20.0,
type: BottomNavigationBarType.fixed,
fixedColor: Colors.blue,
onTap: (index) {
_currentIndex = index;
print(index);
},
currentIndex: _currentIndex,
items: <BottomNavigationBarItem> [
BottomNavigationBarItem(
icon: Icon(Icons.star),
title: Text('星星-1'),
activeIcon: Icon(
Icons.star,
color: Colors.red,
)
),
BottomNavigationBarItem(
icon: Icon(Icons.nature),
title: Text('星星-2')
),
BottomNavigationBarItem(
icon: Icon(Icons.menu),
title: Text('星星-3')
),
],
)
items 必須大于等于 2
iconSize 設(shè)置 icon 大小 默認(rèn)為 24
onTap 點(diǎn)擊事件
currentIndex 當(dāng)前選中的 index
type:
BottomNavigationBarType.fixed 具有固定的寬度，始終顯示其文本標(biāo)簽铅歼，并且在單擊時(shí)不移位公壤。
BottomNavigationBarType.shifting 標(biāo)簽的位置和大小會(huì)在點(diǎn)擊時(shí)淡入。只有選中的項(xiàng)目顯示其文本標(biāo)簽椎椰。fixedColor type = BottomNavigationBarType.fixed 的時(shí)候 設(shè)置文字的顏色
Drawer
主要是通過 child 設(shè)置列表
drawer: Drawer(
child: Text('Drawer')
),
通過代碼控制抽屜打開
leading: Builder(
builder: (context) => IconButton(
icon: new Icon(Icons.settings),
onPressed: () => Scaffold.of(context).openDrawer(),
),
),
Scaffold
backgroundColor 設(shè)置背景色
appBar 詳情見上 AppBar
drawer 從左往右的抽屜導(dǎo)航 見上 Drawer
-
endDrawer 從右往左的抽屜導(dǎo)航
打開 抽屜的方法為Scaffold.of(context).openDrawer(), bottomNavigationBar 見上 BottomNavigationBar
body 頁面主
floatingActionButton 懸浮按鈕
floatingActionButtonLocation 懸浮按鈕位置
floatingActionButtonAnimator 懸浮按鈕位置變換動(dòng)畫
persistentFooterButtons 曾現(xiàn)在 body 下面 bottomNavigationBar 上面
bottomSheet 底部的 block
