1. 寫在前面
在上篇文章中介紹了Flutter中的Image組件强窖，今天繼續(xù)學(xué)習(xí)【Flutter】基礎(chǔ)組件中的Appbar組件胰舆。
flutter.jpeg
- 【基礎(chǔ)語(yǔ)法合集】
【Flutter】Dart中的var、final 和 const基本使用
【Flutter】Dart數(shù)據(jù)類型之num
【Flutter】Dart數(shù)據(jù)類型之String
【Flutter】Dart的數(shù)據(jù)類型list&Map(數(shù)組和字典)
【Flutter】Dart的方法中的可選參數(shù)逗威、方法作為參數(shù)傳遞
【Flutter】Dart的工廠構(gòu)造方法&單例對(duì)象&初始化列表
【Flutter】Dart中的Mixins混入你知道是什么嗎寥裂？
- [基礎(chǔ)組件合集]
【Flutter】基礎(chǔ)組件【02】Container
【Flutter】基礎(chǔ)組件【03】Scaffold
【Flutter】基礎(chǔ)組件【04】Row/Column
2. Appbar
類似于我們iOS里面的導(dǎo)航欄，可以設(shè)置title赖捌，左右action祝沸，
一個(gè)
Material Design應(yīng)用程序欄，由工具欄和其他可能的widget（如TabBar和FlexibleSpaceBar）組成巡蘸。
2.1 Appbar屬性
- leading：左側(cè)的action功能
- title：標(biāo)題文字奋隶。
- actions ：右側(cè)的action功能，也可以使用 PopupMenuButton 來(lái)顯示為三個(gè)點(diǎn)悦荒，點(diǎn)擊后彈出二級(jí)菜單唯欣，實(shí)現(xiàn)功能聚合。
- bottom：通常是 TabBar搬味，Tab 導(dǎo)航欄境氢。
- elevation： 控件的 z 坐標(biāo)
- flexibleSpace：可以實(shí)現(xiàn)一些特殊的效果，該屬性通常在 SliverAppBar 中使用碰纬，類似于Android中的CollapsingToolbarLayout萍聊，可以輕松實(shí)現(xiàn)頁(yè)面頭部展開(kāi)、合并的效果悦析，這個(gè)組件后期會(huì)講到寿桨。
- backgroundColor： Appbar 的顏色，改值通常和下面的三個(gè)屬性一起使用强戴。
- brightness： Appbar 的亮度亭螟，有白色和黑色兩種主題，默認(rèn)值為 ThemeData.primaryColorBrightness骑歹。
- iconTheme ：Appbar 上圖標(biāo)的顏色预烙、透明度、和尺寸信息道媚。默認(rèn)值為 ThemeData.primaryIconTheme扁掸。
- textTheme：Appbar 上的文字樣式翘县。
- centerTitle：標(biāo)題是否居中顯示，默認(rèn)值根據(jù)不同的操作系統(tǒng)谴分，顯示方式不一樣锈麸。
- titleSpacing： 標(biāo)題與其他控件的空隙
- toolbarOpacity： AppBar tool區(qū)域透明度
- bottomOpacity： bottom區(qū)域透明度
2.2 Appbar代碼舉例
- Appbar代碼舉例
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("我是AppBar"),
),
);
}
}
- 運(yùn)行效果
image.png
2.3 leading代碼舉例
- leading相當(dāng)于返回按鈕
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
}),
2.4 actions代碼舉例
- actions 就是導(dǎo)航欄的右邊??按鈕
actions: [
IconButton(
icon: Icon(Icons.add),
onPressed: () {
}),
PopupMenuButton<String>(
padding: EdgeInsets.all(0),
itemBuilder: (context) => [
PopupMenuItem<String>(
child: Row(
children: [
Icon(
Icons.person_add,
color: Colors.black,
),
Text(
'添加好友',
style:
TextStyle(fontSize: 18,),
)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
value: 'person_add',
),
PopupMenuItem<String>(
child: Row(
children: [
Icon(Icons.camera_alt, color: Colors.black),
Text(
'拍照',
style:
TextStyle(fontSize: 18,),
)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
value: 'camera',
),
],
onSelected: (value) {
switch (value) {
case 'person_add':
print("點(diǎn)擊了添加好友");
break;
case 'camera':
print("點(diǎn)擊了拍照");
break;
}
},
),
]
- actions效果
image.png
2.5 bottom代碼舉例
- bottom就是導(dǎo)航欄下面的 tab,例如滑動(dòng)欄那種
bottom: TabBar(
controller: _tabController,//必須配置
tabs: [
Tab(text: "頁(yè)面A",),
Tab(text: "頁(yè)面B",),
Tab(text: "頁(yè)面C",)
],
),
),
body: TabBarView(
//必須配置
controller: _tabController,
children: [
Center(child:Text("頁(yè)面A")),
Center(child:Text("頁(yè)面B")),
Center(child:Text("頁(yè)面C"))
],
)),
- 完整代碼如下：
void main() {
runApp(TabControllerStu());
}
class TabControllerStu extends StatefulWidget {
TabControllerStu({Key? key}) : super(key: key);
_TabControllerStuState createState() => _TabControllerStuState();
}
class _TabControllerStuState extends State<TabControllerStu> with SingleTickerProviderStateMixin{
late TabController _tabController;
//銷毀時(shí)調(diào)用
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
//初始化調(diào)用
@override
void initState() {
super.initState();
_tabController = new TabController(length: 3, vsync: this);
_tabController.addListener(() {
//點(diǎn)擊tab回調(diào)一次，滑動(dòng)切換tab不會(huì)回調(diào)
if(_tabController.indexIsChanging){
print("ysl--${_tabController.index}");
}
//點(diǎn)擊tab時(shí)或滑動(dòng)tab回調(diào)一次
if(_tabController.index.toDouble() == _tabController.animation!.value){
print("ysl${_tabController.index}");
}
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
}),
title: Text("微信"),
actions: [
IconButton(
icon: Icon(Icons.add),
onPressed: () {
}),
PopupMenuButton<String>(
padding: EdgeInsets.all(0),
itemBuilder: (context) => [
PopupMenuItem<String>(
child: Row(
children: [
Icon(
Icons.person_add,
color: Colors.black,
),
Text(
'添加好友',
style:
TextStyle(fontSize: 18,),
)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
value: 'person_add',
),
PopupMenuItem<String>(
child: Row(
children: [
Icon(Icons.camera_alt, color: Colors.black),
Text(
'拍照',
style:
TextStyle(fontSize: 18,),
)
],
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
value: 'camera',
),
],
onSelected: (value) {
switch (value) {
case 'person_add':
print("點(diǎn)擊了添加好友");
break;
case 'camera':
print("點(diǎn)擊了拍照");
break;
}
},
),
],
bottom: TabBar(
controller: _tabController,//必須配置
tabs: [
Tab(text: "頁(yè)面A",),
Tab(text: "頁(yè)面B",),
Tab(text: "頁(yè)面C",)
],
),
),
body: TabBarView(
//必須配置
controller: _tabController,
children: [
Center(child:Text("頁(yè)面A")),
Center(child:Text("頁(yè)面B")),
Center(child:Text("頁(yè)面C"))
],
)),
);
}
}
- 運(yùn)行效果
image.png
3. 寫在后面
關(guān)注我狸剃，更多內(nèi)容持續(xù)輸出
?? 喜歡就點(diǎn)個(gè)贊吧????
?? 覺(jué)得有收獲的掐隐，可以來(lái)一波 收藏+關(guān)注狗热，以免你下次找不到我????
??歡迎大家留言交流钞馁，批評(píng)指正，
轉(zhuǎn)發(fā)請(qǐng)注明出處匿刮，謝謝支持僧凰！??
