Flutter Appbar 控制元件介紹
一、使用方法
AppBar({
Key key,
this.leading,//在標題前面顯示的一個控制元件，在首頁通常顯示應用的
logo；在其他介面通常顯示為返回按鈕
this.automaticallyImplyLeading = true,//控制是否應該嘗試暗示前導小部件為null
this.title,//當前介面的標題文字
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, //頂部的工具欄部分的透明度 <=1.0
this.bottomOpacity = 1.0,//bottom的工具欄部分的透明度 <=1.0
})
複製程式碼二、常用屬性
- 在標題前面顯示的一個控制元件，在首頁通常顯示應用的logo；在其他介面通常顯示為返回按鈕
leading: Icon(_selectedChoice.icon) ,
複製程式碼- 控制是否應該嘗試暗示前導小部件為null
automaticallyImplyLeading:true ,
複製程式碼- 當前介面的標題文字
title: Text(_selectedChoice.title )
複製程式碼- 一個 Widget 列表，代表 Toolbar 中所顯示的選單，對於常用的選單，通常使用 IconButton 來表示；對於不常用的選單通常使用 PopupMenuButton 來顯示為三個點，點選後彈出二級選單
actions: <Widget>[
new IconButton( // action button
icon: new Icon(choices[0].icon),
onPressed: () { _select(choices[0]); },
),
new IconButton( // action button
icon: new Icon(choices[1].icon),
onPressed: () { _select(choices[1]); },
),
new PopupMenuButton<Choice>( // overflow menu
onSelected: _select,
itemBuilder: (BuildContext context) {
return choices.skip(2).map((Choice choice) {
return new PopupMenuItem<Choice>(
value: choice,
child: new Text(choice.title),
);
}).toList();
},
)
],
複製程式碼- 一個顯示在 AppBar 下方的控制元件，高度和 AppBar 高度一樣，可以實現一些特殊的效果，該屬性通常在 SliverAppBar 中使用
// flexibleSpace: Container(
// color: Colors.blue,
// width: MediaQuery.of(context).size.width,
// child: Text("aaaaaaaaaa"),
// height: 10,
// )
複製程式碼- 一個 AppBarBottomWidget 物件，通常是 TabBar。用來在 Toolbar 標題下面顯示一個 Tab 導航欄
bottom: new TabBar(
isScrollable: true,
tabs: choices.map((Choice choice) {
return new Tab(
text: choice.title,
icon: new Icon(choice.icon),
);
}).toList(),
)
複製程式碼- 材料設計中控制元件的 z 座標順序，預設值為 4，對於可滾動的 SliverAppBar， 當 SliverAppBar 和內容同級的時候，該值為 0， 當內容滾動 SliverAppBar 變為 Toolbar 的時候，修改 elevation 的值
elevation: 1
複製程式碼- APP bar 的顏色，預設值為 ThemeData.primaryColor。改值通常和下面的三個屬性一起使用
backgroundColor: Colors.red,
複製程式碼- App bar 的亮度，有白色和黑色兩種主題，預設值為 ThemeData.primaryColorBrightness
brightness:Brightness.light ,
複製程式碼- App bar 上圖示的顏色、透明度、和尺寸資訊。預設值為 ThemeData().primaryIconTheme
iconTheme: ThemeData().iconTheme,
複製程式碼- App bar 上的文字主題。預設值為 ThemeData（）.primaryTextTheme
textTheme: ThemeData().accentTextTheme,
複製程式碼- 此應用欄是否顯示在螢幕頂部
primary: true,
複製程式碼- 標題是否居中顯示，預設值根據不同的作業系統，顯示方式不一樣,true居中 false居左
centerTitle: true,
複製程式碼- 橫軸上標題內容 周圍的間距
titleSpacing: NavigationToolbar.kMiddleSpacing,
複製程式碼- 頂部的工具欄部分的透明度 <=1.0
toolbarOpacity:1.0,
複製程式碼- bottom的工具欄部分的透明度 <=1.0
bottomOpacity: 0.5,
複製程式碼三、一個完整的例子
import 'package:flutter/material.dart';
import 'ChoiceCard.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text Demo',
theme: ThemeData(
primarySwatch: Colors.green
),
home: AppbarPageDemo(title: 'Text Demo'),
);
}
}
class AppbarPageDemo extends StatefulWidget {
AppbarPageDemo({Key key, this.title}) : super(key: key);
final String title;
@override
_AppbarPageDemoState createState() => _AppbarPageDemoState();
}
class _AppbarPageDemoState extends State<AppbarPageDemo>{
Choice _selectedChoice = choices[0]; // The app's "state".
void _select(Choice choice) {
setState(() { // Causes the app to rebuild with the new _selectedChoice.
_selectedChoice = choice;
});
}
@override
Widget build(BuildContext context) {
var _name = "flutter ";
return DefaultTabController(
length: choices.length,
child: Scaffold(
appBar: AppBar(
//1.在標題左側顯示的一個控制元件，在首頁通常顯示應用的 logo；在其他介面通常顯示為返回按鈕
leading: Icon(_selectedChoice.icon) ,
//2. ? 控制是否應該嘗試暗示前導小部件為null
automaticallyImplyLeading:true ,
//3.當前介面的標題文字
title: Text(_selectedChoice.title ),
//4.一個 Widget 列表，代表 Toolbar 中所顯示的選單，對於常用的選單，通常使用 IconButton 來表示；
//對於不常用的選單通常使用 PopupMenuButton 來顯示為三個點，點選後彈出二級選單
actions: <Widget>[
new IconButton( // action button
icon: new Icon(choices[0].icon),
onPressed: () { _select(choices[0]); },
),
new IconButton( // action button
icon: new Icon(choices[1].icon),
onPressed: () { _select(choices[1]); },
),
new PopupMenuButton<Choice>( // overflow menu
onSelected: _select,
itemBuilder: (BuildContext context) {
return choices.skip(2).map((Choice choice) {//skip 跳開前面的兩條資料
return new PopupMenuItem<Choice>(
value: choice,
child: new Text(choice.title),
);
}).toList();
},
)
],
//5.一個顯示在 AppBar 下方的控制元件，高度和 AppBar 高度一樣，
// 可以實現一些特殊的效果，該屬性通常在 SliverAppBar 中使用
// flexibleSpace: Container(
// color: Colors.blue,
// width: MediaQuery.of(context).size.width,
// child: Text("aaaaaaaaaa"),
// height: 10,
// ),
//6.一個 AppBarBottomWidget 物件，通常是 TabBar。用來在 Toolbar 標題下面顯示一個 Tab 導航欄
bottom: new TabBar(
isScrollable: true,
tabs: choices.map((Choice choice) {
return new Tab(
text: choice.title,
icon: new Icon(choice.icon),
);
}).toList(),
) ,
//7.? 材料設計中控制元件的 z 座標順序，預設值為 4，對於可滾動的 SliverAppBar，
// 當 SliverAppBar 和內容同級的時候，該值為 0， 當內容滾動 SliverAppBar 變為 Toolbar 的時候，修改 elevation 的值
elevation: 1,
//APP bar 的顏色，預設值為 ThemeData.primaryColor。改值通常和下面的三個屬性一起使用
backgroundColor: Colors.red,
//App bar 的亮度，有白色和黑色兩種主題，預設值為 ThemeData.primaryColorBrightness
brightness:Brightness.light ,
//App bar 上圖示的顏色、透明度、和尺寸資訊。預設值為 ThemeData().primaryIconTheme
iconTheme: ThemeData().iconTheme,
//App bar 上的文字主題。預設值為 ThemeData（）.primaryTextTheme
textTheme: ThemeData().primaryTextTheme,
//此應用欄是否顯示在螢幕頂部
primary: true,
//標題是否居中顯示，預設值根據不同的作業系統，顯示方式不一樣,true居中 false居左
centerTitle: true,
//橫軸上標題內容 周圍的間距
titleSpacing: NavigationToolbar.kMiddleSpacing,
//頂部的工具欄(toolbar)部分的透明度 <=1.0
toolbarOpacity:0.8,
//bottom的工具欄(tabbar)部分的透明度 <=1.0
bottomOpacity: 0.8,
),
body : TabBarView(
children: choices.map((Choice choice) {
return new Padding(
padding: const EdgeInsets.all(16.0),
child: new ChoiceCard(choice: choice),
);
}).toList(),
),
)
);
}
}
const List<Choice> choices = const <Choice>[
const Choice(title: 'Car', icon: Icons.directions_car),
const Choice(title: 'Bicycle', icon: Icons.directions_bike),
const Choice(title: 'Boat', icon: Icons.directions_boat),
const Choice(title: 'Bus', icon: Icons.directions_bus),
const Choice(title: 'Train', icon: Icons.directions_railway),
const Choice(title: 'Walk', icon: Icons.directions_walk),
];
複製程式碼