一健提、概述
上篇文章介紹 MaterialApp 、Scaffold 桨螺，但是沒有內(nèi)容比較多恰梢，沒有介紹完畢佛南。本篇文章繼續(xù)上文繼續(xù)說明。
二嵌言、 Scaffold Widget 補(bǔ)充
bottomNavigationBar 是 Scaffold 的屬性嗅回，用來設(shè)置應(yīng)用程序的底部應(yīng)用或?qū)Ш綑冢涫且粋€(gè) Widget 摧茴，通常使用 BottomAppBar 或 BottomNavigationBar 绵载。主要用來顯示消息以及提供特定功能的導(dǎo)航。
BottomAppBar 是一個(gè)頂部可以有凹口的 Widget 苛白，是一個(gè) StatefulWidget 娃豹。通常與 FloatingActionButton 一起使用。其構(gòu)造方法如下：
const BottomAppBar({
Key key,
//Color類型可選命名參數(shù)购裙，底部程序欄的背景色
this.color,
//double類型可選命名參數(shù)懂版，相對于其父應(yīng)用程序欄放置底部應(yīng)用程序欄的z坐標(biāo)
this.elevation,
//NotchedShape類型可選命名參數(shù)，為浮動(dòng)操作按鈕制作的凹槽
this.shape,
//Clip類型可選命名參數(shù)躏率，設(shè)置內(nèi)容裁剪方式
this.clipBehavior = Clip.none,
//double類型可選命名參數(shù)躯畴，浮動(dòng)動(dòng)作按鈕和底部應(yīng)用欄的凹口之間的邊距
this.notchMargin = 4.0,
//Widget類型可選命名參數(shù)民鼓，要顯示的Widget
this.child,
})
使用如下：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyFirstPage(),
);;
}
}
class MyFirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Page 1"),
),
body: Container(
color: Colors.yellow,
child: Center(child: Text("主體內(nèi)容"),),
),
endDrawer: Drawer(),
bottomNavigationBar: BottomAppBar(
color: Colors.deepPurpleAccent,
child: Text("底部BottomAppBar"),
),
floatingActionButton: FloatingActionButton(
onPressed: (){
print("點(diǎn)擊");
},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
}
如果不提供 BottomAppBar 的 child 設(shè)置，不會(huì)拋出異常蓬抄，但是不會(huì)顯示 BottomAppBar 丰嘉。
本例的效果如下：
2020312245.jpg
如果想要設(shè)置 BottomAppBar 的高度，可以通過嵌套使用帶有高度的 Widget 嚷缭，如下使用 Container ：
class MyFirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Page 1"),
),
body: Container(
color: Colors.yellow,
child: Center(child: Text("主體內(nèi)容"),),
),
endDrawer: Drawer(),
bottomNavigationBar: BottomAppBar(
color: Colors.deepPurpleAccent,
child: Container(
child: Text("底部BottomAppBar"),
height: 50.0,
),
),
floatingActionButton: FloatingActionButton(
onPressed: (){
print("點(diǎn)擊");
},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
}
2020312513.jpg
使用有凹口的 BottomAppBar 需要 shape 和 FloatingActionButtonLocation.centerDocked 或 FloatingActionButtonLocation.endDocked 配合使用饮亏。如下：
class MyFirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Page 1"),
),
body: Container(
color: Colors.yellow,
child: Center(child: Text("主體內(nèi)容"),),
),
endDrawer: Drawer(),
bottomNavigationBar: BottomAppBar(
color: Colors.deepPurpleAccent,
shape: const CircularNotchedRectangle(),
child: Container(
height: 50.0,
),
),
floatingActionButton: FloatingActionButton(
onPressed: (){
print("點(diǎn)擊");
},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
}
效果如下圖：
2020312725.jpg
BottomAppBar 中也可以顯示多個(gè) Widget ，需要使用 Row 橫向布局 Widget 容器峭状，后面會(huì)詳細(xì)介紹 Row 克滴。使用如下：
class MyFirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Page 1"),
),
body: Container(
color: Colors.yellow,
child: Center(child: Text("主體內(nèi)容"),),
),
endDrawer: Drawer(),
bottomNavigationBar: BottomAppBar(
color: Colors.deepPurpleAccent,
shape: const CircularNotchedRectangle(),
child: Container(
child: Row(
children: <Widget>[
IconButton(icon: Icon(Icons.print), onPressed: (){}),
IconButton(icon: Icon(Icons.add), onPressed: (){}),
IconButton(icon: Icon(Icons.add_a_photo), onPressed: (){}),
],
),
height: 50.0,
),
),
floatingActionButton: FloatingActionButton(
onPressed: (){
print("點(diǎn)擊");
},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
}
效果如下圖：
2020312739.jpg
BottomNavigationBar 主要用于應(yīng)用的底部導(dǎo)航逼争，繼承自 StatefulWidget 优床，為有狀態(tài)的 Widget ，構(gòu)造函數(shù)如下：
BottomNavigationBar({
Key key,
//List<BottomNavigationBarItem>類型必傳參數(shù)誓焦，底部導(dǎo)航欄中的選項(xiàng)
@required this.items,
//ValueChanged<int>類型可選命名參數(shù)胆敞，點(diǎn)擊某個(gè)選項(xiàng)時(shí)的回調(diào)函數(shù)
this.onTap,
//int類型可選命名參數(shù)，當(dāng)前被選擇的選項(xiàng)索引
this.currentIndex = 0,
//double類型可選命名參數(shù)杂伟，此底部導(dǎo)航欄的z坐標(biāo)移层。
this.elevation = 8.0,
//BottomNavigationBarType類型可選命名參數(shù)，定義底部導(dǎo)航欄的布局和行為
BottomNavigationBarType type,
//Color類型可選命名參數(shù)赫粥，被選擇的選項(xiàng)的顏色观话，get屬性
Color fixedColor,
//Color類型可選命名參數(shù)，底部導(dǎo)航欄背景色
this.backgroundColor,
//double類型可選命名參數(shù)越平，底部導(dǎo)航中的圖標(biāo)的大小
this.iconSize = 24.0,
//Color類型可選命名參數(shù)频蛔，所選底部導(dǎo)航圖標(biāo)和底部導(dǎo)航圖標(biāo)標(biāo)簽的顏色
Color selectedItemColor,
//Color類型可選命名參數(shù)，未選擇的底部導(dǎo)航圖標(biāo)和底部導(dǎo)航圖標(biāo)標(biāo)簽的顏色
this.unselectedItemColor,
//IconThemeData類型可選命名參數(shù)秦叛，當(dāng)前選定的底部導(dǎo)航圖標(biāo)中圖標(biāo)的大小晦溪、不透明度和顏色
this.selectedIconTheme = const IconThemeData(),
//IconThemeData類型可選命名參數(shù)，當(dāng)前未選中的底部導(dǎo)航圖標(biāo)中圖標(biāo)的大小挣跋、不透明度和顏色
this.unselectedIconTheme = const IconThemeData(),
//double類型可選命名參數(shù)三圆，選擇時(shí)底部導(dǎo)航項(xiàng)標(biāo)簽的字體大小
this.selectedFontSize = 14.0,
//double類型可選命名參數(shù)，未選擇時(shí)底部導(dǎo)航項(xiàng)標(biāo)簽的字體大小
this.unselectedFontSize = 12.0,
//TextStyle類型可選命名參數(shù)避咆，選擇時(shí)底部導(dǎo)航項(xiàng)標(biāo)簽的文本樣式舟肉。
this.selectedLabelStyle,
//TextStyle類型可選命名參數(shù)，未選擇時(shí)底部導(dǎo)航項(xiàng)標(biāo)簽的文本樣式查库。
this.unselectedLabelStyle,
//bool類型可選命名參數(shù)度气，是否為選擇的底部導(dǎo)航圖標(biāo)顯示標(biāo)簽文本
this.showSelectedLabels = true,
//bool類型可選命名參數(shù)，是否為未選定的底部導(dǎo)航項(xiàng)顯示標(biāo)簽文本
bool showUnselectedLabels,
})
BottomNavigationBarItem 為帶有圖標(biāo)和標(biāo)題的交互式按鈕膨报，通常與 BottomNavigationBar 一起使用磷籍，構(gòu)造方法如下：
const BottomNavigationBarItem({
//Widget類型必傳參數(shù)适荣，底部導(dǎo)航選項(xiàng)的圖標(biāo)
@required this.icon,
//Widget類型可選命名參數(shù)，底部導(dǎo)航選項(xiàng)的標(biāo)題
this.title,
//Widget類型可選命名參數(shù)院领，選擇底部導(dǎo)航選項(xiàng)的替代圖標(biāo)弛矛。當(dāng)選項(xiàng)被選擇時(shí)將使用此設(shè)置的圖標(biāo)，如果不為null
Widget activeIcon,
//Color類型可選命名參數(shù)比然，底部導(dǎo)航欄的背景徑向動(dòng)畫的顏色丈氓。只有當(dāng)設(shè)置BottomNavigationBarType.shifting
//時(shí)才生效，點(diǎn)擊后底部導(dǎo)航背景色將變化為此色
this.backgroundColor,
})
使用方法如下：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyRootNavigationPage(),
);;
}
}
class MyRootNavigationPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _MyRootNavigationPage();
}
}
class _MyRootNavigationPage extends State<MyRootNavigationPage> {
final List<String> _pageTitles = <String>[
"page 1",
"page 2",
"page 3"
];
String _pageTitle;
int _currentSelected = 0;
final List<Widget> _pageWidget = <Widget>[
_FirstPage(),
_SecondPage(),
_ThirdPage(),
];
_itemSelected(int valueIndex) {
setState(() {
_currentSelected = valueIndex;
_pageTitle = _pageTitles.elementAt(valueIndex);
});
}
@override
void initState() {
super.initState();
_pageTitle = _pageTitles.first;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("$_pageTitle"),
),
body: Container(
child: _pageWidget.elementAt(_currentSelected),
),
endDrawer: Drawer(),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.print),
title: Text("Page1"),
),
BottomNavigationBarItem(
icon: Icon(Icons.party_mode),
title: Text("Page2"),
),
BottomNavigationBarItem(
icon: Icon(Icons.add_a_photo),
title: Text("Page3"),
),
],
currentIndex: _currentSelected,
onTap: _itemSelected,
backgroundColor: Colors.yellowAccent,
selectedItemColor: Colors.red,
unselectedItemColor: Colors.black45,
),
);
}
}
class _FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text("Page 1"));
}
}
class _SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text("Page 2"));
}
}
class _ThirdPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(child: Text("Page 3"));
}
}
對于 BottomNavigationBarItem 內(nèi)的顯示圖標(biāo)强法，可以使用 Image 加載自定義的圖片万俗。上述代碼效果如下：
20203121058.jpg
BottomNavigationBar 的 type 為 BottomNavigationBarType 類型，是一個(gè)枚舉類型饮怯，如下：
enum BottomNavigationBarType {
//底部導(dǎo)航條的底部導(dǎo)航條有固定的寬度
fixed,
//底部導(dǎo)航欄底部導(dǎo)航欄的位置和大小動(dòng)畫和標(biāo)簽在被點(diǎn)擊時(shí)淡入
shifting,
}
Scaffold 的 persistentFooterButtons 為 List<Widget> 類型闰歪，是一組顯示在 Scaffold 底部的 Widget ，通常使用 FlatButton 蓖墅。這組 Widget 會(huì)呈現(xiàn)在 bottomNavigationBar 的上方库倘，body 下方。他們是持續(xù)可見的论矾，即使 body 進(jìn)行滾動(dòng)依然如此教翩。使用方式如下：
persistentFooterButtons: <Widget>[
FlatButton(onPressed: (){}, child: Text("按鈕1")),
FlatButton(onPressed: (){}, child: Text("按鈕1")),
FlatButton(onPressed: (){}, child: Text("按鈕1"))
],
效果如下圖：
20203121115.jpg
bottomSheet 對應(yīng)的是一個(gè) Widget ，是一個(gè)始終可見的 Widget 贪壳”ヒ冢可以用來定義底部的菜單或?qū)υ捒颉Ｒ部梢允褂?Flutter 提供好的
使用任意 Widget 的方法如下：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyFirstPage(),
);;
}
}
class MyFirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Page 1"),
),
body: Container(
color: Colors.yellow,
child: Center(child: Text("主體內(nèi)容"),),
),
bottomSheet: Container( //bottomSheet
color: Colors.red,
height: 80,
child: Center(child: Text("BottomSheet")),
),
endDrawer: Drawer(),
);
}
}
效果如下圖：
2020313235.jpg
在底部展示消息還可以使用 SnackBar Widget 闰靴，其是一個(gè) StatefulWidget 彪笼，是一個(gè)輕量級的帶有可選操作的在屏幕底部暫時(shí)出現(xiàn)的 Widget。其構(gòu)造方法如下：
const SnackBar({
Key key,
//Widget類型必傳參數(shù)传黄，要顯示的Widget
@required this.content,
//Color類型可選命名參數(shù)杰扫，用于指定背景色
this.backgroundColor,
//double類型可選命名參數(shù)，SnackBar的z坐標(biāo)膘掰，這可以控制SnackBar下方陰影的大小
this.elevation,
//ShapeBorder類型可選命名參數(shù)章姓，SnackBar的形狀
this.shape,
//SnackBarBehavior類型可選命名參數(shù)，用于設(shè)置SnackBar的行為和位置
this.behavior,
//SnackBarAction類型可選命名參數(shù)识埋，要執(zhí)行的行為
this.action,
//Duration類型可選命名參數(shù)凡伊，SnackBar的持續(xù)顯示時(shí)間
this.duration = _snackBarDisplayDuration,
//Animation<double>類型可選命名參數(shù)，動(dòng)畫
this.animation,
//VoidCallback類型可選命名參數(shù)窒舟，第一次在Scaffold中出現(xiàn)時(shí)的回調(diào)函數(shù)
this.onVisible,
})
使用如下：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyFirstPage(),
);;
}
}
class MyFirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Page 1"),
),
body: Builder(
builder: (BuildContext context){
return Container(
color: Colors.yellow,
child: Center(
child: RaisedButton(
child: Text("SnackBar"),
onPressed: (){
ScaffoldState state = Scaffold.of(context);
SnackBar snBar = SnackBar(
content: Text("這是一個(gè)提示信息"),
backgroundColor: Colors.deepPurpleAccent,
action: SnackBarAction(
label: "點(diǎn)擊查看詳情",
onPressed: (){
print("詳情內(nèi)容");
},
),
onVisible: ()=> print("第一次出現(xiàn)執(zhí)行系忙，僅執(zhí)行一次"),
);
state.showSnackBar(snBar);
},
),
),
);
},
),
endDrawer: Drawer(),
);
}
}
效果如下：
2020314732.gif
三、MaterialApp Widget 補(bǔ)充
MaterialApp 中的 theme 和 darkTheme 均是 ThemeData 類型惠豺，用于設(shè)置應(yīng)用的主題顏色和板式值银还》缒可以配置 Theme 或 MaterialApp Widget ，獲取當(dāng)前的主題蛹疯，可以使用 Theme.of 戒财。區(qū)別在于 darkTheme 意思是提供暗黑模式的主題，在設(shè)置 ThemeData 的 Brightness 時(shí)應(yīng)設(shè)置為 dark 捺弦。如果同時(shí)提供 theme 和 darkTheme 饮寞，則可以設(shè)置 themeMode 進(jìn)行主題選擇，這就是同時(shí)提供兩種主題模式的用途列吼，可以通過不同的設(shè)置提供不同的主題樣式幽崩。主題主要用來定義應(yīng)用程序通用的樣式和顏色基調(diào)，可以再對不同的 Widget 做具體細(xì)節(jié)調(diào)整寞钥。其構(gòu)工廠造函數(shù)如下：
factory ThemeData({
//Brightness類型可選命名參數(shù)慌申，用于設(shè)置主題的模式，dark或者light
Brightness brightness,
//MaterialColor類型可選命名參數(shù)凑耻，用于定義一種單一的顏色太示，此顏色帶有始終色調(diào)的顏色樣本
MaterialColor primarySwatch,
//Color類型可選命名參數(shù)柠贤，用于設(shè)置工具欄香浩、標(biāo)簽欄等的背景色
Color primaryColor,
//Brightness類型可選命名參數(shù)，在主題模式不變的情況下設(shè)置基色(工具欄等)的文本和圖標(biāo)反色
Brightness primaryColorBrightness,
//Color類型可選命名參數(shù)臼勉，原色的較輕版本
Color primaryColorLight,
//Color類型可選命名參數(shù)邻吭，原色的較暗版本
Color primaryColorDark,
//Color類型可選命名參數(shù)，小部件的前景色(旋鈕宴霸、文本囱晴、過卷邊緣效果等)
Color accentColor,
//Brightness類型可選命名參數(shù)，用于確定放置在強(qiáng)調(diào)色頂部的文本和圖標(biāo)的顏色(例如瓢谢，浮動(dòng)操作按鈕上的圖標(biāo))
Brightness accentColorBrightness,
//Color類型可選命名參數(shù)畸写，畫布顏色
Color canvasColor,
//Color類型可選命名參數(shù)，Scaffold的頁面背景色
Color scaffoldBackgroundColor,
//Color類型可選命名參數(shù)氓扛，底部應(yīng)用欄的默認(rèn)顏色
Color bottomAppBarColor,
//Color類型可選命名參數(shù)枯芬，Card的顏色
Color cardColor,
//Color類型可選命名參數(shù)，分隔線和彈出窗口的顏色也用于列表間采郎、數(shù)據(jù)表中的行間等等
Color dividerColor,
//Color類型可選命名參數(shù)千所，使用的焦點(diǎn)顏色表示組件具有輸入焦點(diǎn)
Color focusColor,
//Color類型可選命名參數(shù)，用于指示指針何時(shí)懸停在組件上的懸停顏色
Color hoverColor,
//Color類型可選命名參數(shù)蒜埋，高亮顏色
Color highlightColor,
//Color類型可選命名參數(shù)淫痰，InkWell顏色
Color splashColor,
//InteractiveInkFeatureFactory類型可選命名參數(shù)，定義墨水池和墨水響應(yīng)產(chǎn)生的墨水飛濺的外觀
InteractiveInkFeatureFactory splashFactory,
//Color類型可選命名參數(shù)整份，用于突出顯示選定行的顏色
Color selectedRowColor,
//Color類型可選命名參數(shù)待错，處于非活動(dòng)(但已啟用)狀態(tài)的小部件所用的顏色
Color unselectedWidgetColor,
//Color類型可選命名參數(shù)籽孙，不工作的小部件所用的顏色，與它們的狀態(tài)無關(guān)
Color disabledColor,
//Color類型可選命名參數(shù)火俄，“凸起”按鈕中使用的材料的默認(rèn)填充顏色
Color buttonColor,
//ButtonThemeData類型可選命名參數(shù)蚯撩，定義按鈕小部件的默認(rèn)配置，如上升按鈕和平板按鈕
ButtonThemeData buttonTheme,
//ToggleButtonsThemeData類型可選命名參數(shù)烛占，定義ToggleButtons小部件的默認(rèn)配置
ToggleButtonsThemeData toggleButtonsTheme,
//Color類型可選命名參數(shù)胎挎，當(dāng)有選定行時(shí)，分頁數(shù)據(jù)表的標(biāo)題顏色
Color secondaryHeaderColor,
//Color類型可選命名參數(shù)忆家，文本字段中文本選擇的顏色犹菇，如文本字段
Color textSelectionColor,
//Color類型可選命名參數(shù)，TextField(如文本字段)等中光標(biāo)的顏色
Color cursorColor,
//Color類型可選命名參數(shù)芽卿，用于調(diào)整當(dāng)前所選文本部分的手柄顏色
Color textSelectionHandleColor,
//Color類型可選命名參數(shù)揭芍，與原色形成對比的顏色，例如用作進(jìn)度條的剩余部分
Color backgroundColor,
//Color類型可選命名參數(shù)卸例，對話框元素的背景顏色
Color dialogBackgroundColor,
//Color類型可選命名參數(shù)称杨，標(biāo)簽欄中所選標(biāo)簽指示器的顏色
Color indicatorColor,
//Color類型可選命名參數(shù)，用于提示文本或占位符文本的顏色筷转，例如在文本字段中
Color hintColor,
//Color類型可選命名參數(shù)姑原，用于輸入驗(yàn)證錯(cuò)誤的顏色，例如在文本字段中
Color errorColor,
//Color類型可選命名參數(shù)呜舒，用于突出顯示可切換小部件(如開關(guān)锭汛、收音機(jī)和復(fù)選框)活動(dòng)狀態(tài)的顏色
Color toggleableActiveColor,
//String類型可選命名參數(shù)，用于設(shè)置字體名稱
String fontFamily,
//TextTheme類型可選命名參數(shù)袭蝗，文字顏色與卡片和畫布顏色
TextTheme textTheme,
//TextTheme類型可選命名參數(shù)唤殴，與原色形成對比的文本主題
TextTheme primaryTextTheme,
//TextTheme類型可選命名參數(shù)，與強(qiáng)調(diào)色形成對比的文本主題
TextTheme accentTextTheme,
//InputDecorationTheme類型可選命名參數(shù)到腥，輸入編輯器朵逝、文本字段和文本表單字段的默認(rèn)輸入配置值基于此主題
InputDecorationTheme inputDecorationTheme,
//IconThemeData類型可選命名參數(shù)，與卡片和畫布顏色形成對比的圖標(biāo)主題
IconThemeData iconTheme,
//IconThemeData類型可選命名參數(shù)乡范，與原色形成對比的圖標(biāo)主題
IconThemeData primaryIconTheme,
//IconThemeData類型可選命名參數(shù)配名，與強(qiáng)調(diào)色形成對比的圖標(biāo)主題
IconThemeData accentIconTheme,
//SliderThemeData類型可選命名參數(shù)，用于渲染滑塊的顏色和形狀
SliderThemeData sliderTheme,
//TabBarTheme類型可選命名參數(shù)篓足，用于自定義標(biāo)簽欄指示器的大小段誊、形狀和顏色的主題
TabBarTheme tabBarTheme,
//TooltipThemeData類型可選命名參數(shù)，用于自定義工具提示視覺屬性的主題
TooltipThemeData tooltipTheme,
//CardTheme類型可選命名參數(shù)栈拖，用于渲染卡片的顏色和樣式
CardTheme cardTheme,
//ChipThemeData類型可選命名參數(shù)连舍，用于渲染芯片的顏色和樣式
ChipThemeData chipTheme,
//TargetPlatform類型可選命名參數(shù)，材料部件應(yīng)適應(yīng)目標(biāo)的平臺(tái)
TargetPlatform platform,
//MaterialTapTargetSize類型可選命名參數(shù)，配置某些材質(zhì)小部件的命中測試大小
MaterialTapTargetSize materialTapTargetSize,
//bool類型可選命名參數(shù)索赏，在材質(zhì)表面應(yīng)用半透明疊加顏色盼玄，以指示深色主題的高度
bool applyElevationOverlayColor,
//PageTransitionsTheme類型可選命名參數(shù)，每個(gè)目標(biāo)平臺(tái)的默認(rèn)材質(zhì)頁面輸出轉(zhuǎn)換
PageTransitionsTheme pageTransitionsTheme,
//AppBarTheme類型可選命名參數(shù)潜腻，用于自定義應(yīng)用欄的顏色埃儿、高度、亮度融涣、圖標(biāo)主題和文本主題的主題
AppBarTheme appBarTheme,
//BottomAppBarTheme類型可選命名參數(shù)童番，用于自定義底部工具欄的形狀、高度和顏色的主題
BottomAppBarTheme bottomAppBarTheme,
//ColorScheme類型可選命名參數(shù)威鹿，一組十三種顏色剃斧，可用于配置大多數(shù)組件的顏色屬性
ColorScheme colorScheme,
//DialogTheme類型可選命名參數(shù)，用于自定義對話框形狀的主題
DialogTheme dialogTheme,
//FloatingActionButtonThemeData類型可選命名參數(shù)忽你，用于自定義浮動(dòng)動(dòng)作按鈕的形狀幼东、高度和顏色的主題
FloatingActionButtonThemeData floatingActionButtonTheme,
//Typography類型可選命名參數(shù)，用于配置文本主題科雳、主文本主題和重音文本主題的顏色和幾何文本主題值
Typography typography,
//CupertinoThemeData類型可選命名參數(shù)根蟹，要從“材料”主題“數(shù)據(jù)”自適應(yīng)中覆蓋的CupertinoThemeData的組件
CupertinoThemeData cupertinoOverrideTheme,
//SnackBarThemeData類型可選命名參數(shù)，用于自定義SnackBar的顏色糟秘、形狀简逮、高度和行為的主題
SnackBarThemeData snackBarTheme,
//BottomSheetThemeData類型可選命名參數(shù)，用于自定義底部工作表的顏色蚌堵、高度和形狀的主題
BottomSheetThemeData bottomSheetTheme,
//PopupMenuThemeData類型可選命名參數(shù)买决，用于自定義彈出菜單的顏色沛婴、形狀吼畏、高度和文本樣式的主題
PopupMenuThemeData popupMenuTheme,
//MaterialBannerThemeData類型可選命名參數(shù)，用于自定義材質(zhì)橫幅的顏色和文本樣式的主題
MaterialBannerThemeData bannerTheme,
//DividerThemeData類型可選命名參數(shù)嘁灯，自定義分割線泻蚊、垂直分割線等的顏色、厚度和縮進(jìn)的主題
DividerThemeData dividerTheme,
//ButtonBarThemeData類型可選命名參數(shù)丑婿，自定義按鈕欄小部件外觀和布局的主題
ButtonBarThemeData buttonBarTheme,
})
關(guān)于 ThemeData 的不同屬性只是翻譯自官方文檔性雄，部分沒有做驗(yàn)證看效果，各位要自己試驗(yàn)看效果羹奉。
locale 用于設(shè)置應(yīng)用程序的本地語言初始化環(huán)境值秒旋。如果為 null ，則使用系統(tǒng)的區(qū)域設(shè)置值诀拭。如果 Localizations.locale 的值與 supportedLocales 之一匹配迁筛，則它將等于該語言環(huán)境。 否則它將是第一個(gè) supportedLocale耕挨。
關(guān)于國際化的使用方式查看官方網(wǎng)址：https://flutter.dev/docs/development/accessibility-and-localization/internationalization 细卧。后續(xù)文章也會(huì)詳細(xì)介紹尉桩。
上述說的都是單獨(dú)的界面，如果涉及到頁面的切換贪庙，比如查看列表的詳細(xì)信息蜘犁，進(jìn)入下一級等，需要使用到 Navigator Widget 止邮。
Navigator 是使用堆棧規(guī)則管理一組 Widget 这橙，這些 Widget (界面)稱為 Route 對象 。其繼承自 StatefulWidget 导披，是一個(gè)有狀態(tài)的 Widget 析恋。其構(gòu)造方法如下：
const Navigator({
Key key,
//String類型可選命名參數(shù)，要顯示的第一個(gè)路由(頁面)的名稱
this.initialRoute,
//RouteFactory類型必傳參數(shù)盛卡，調(diào)用以生成給定路由設(shè)置的路由
@required this.onGenerateRoute,
//RouteFactory類型必傳參數(shù)助隧，當(dāng)onGenerateRoute無法生成路由時(shí)調(diào)用
this.onUnknownRoute,
//List<NavigatorObserver>類型必傳參數(shù)，導(dǎo)航器的觀察者列表
this.observers = const <NavigatorObserver>[],
})
在執(zhí)行路由線路切換需要使用 Navigator 的 push 和 pop 方法滑沧，如下：
//將制定路由添加到到導(dǎo)航的路由棧中
@optionalTypeArgs
static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
return Navigator.of(context).push(route);
}
//用于彈出最頂端的路由
@optionalTypeArgs
static bool pop<T extends Object>(BuildContext context, [ T result ]) {
return Navigator.of(context).pop<T>(result);
}
Navigator.push() 接收兩個(gè)參數(shù)并村，一個(gè)是上下文信息，另一個(gè)是 Route 滓技，可以使用 MaterialPageRote的實(shí)例哩牍。其構(gòu)造函數(shù)如下：
MaterialPageRoute({
//WidgetBuilder類型必傳參數(shù)，構(gòu)建路線的主要內(nèi)容
@required this.builder,
//RouteSettings類型可選命名參數(shù)令漂，路由的設(shè)置
RouteSettings settings,
//bool類型可選命名參數(shù)膝昆，路由處于非活動(dòng)狀態(tài)時(shí)是否應(yīng)保留在內(nèi)存中
this.maintainState = true,
//bool類型可選命名參數(shù)，此頁面路由是否為全屏對話框叠必。在iOS上荚孵，
//這些頁面從底部到頂部（而不是水平）進(jìn)行動(dòng)畫處理。
bool fullscreenDialog = false,
})
使用方式如下：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);;
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("HomePage"),
),
body: Builder(
builder: (BuildContext context){
return Container(
color: Colors.yellow,
child: Center(
child: RaisedButton(
child: Text("下一頁"),
onPressed: (){
Navigator.push(context, MaterialPageRoute(
builder: (context) => FirstPage(),
fullscreenDialog: false, //如果為true纬朝，則動(dòng)畫為從下至上推出
));
},
),
),
);
},
),
endDrawer: Drawer(),
);
}
}
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("FirstPage"),
),
body: Center(
child: RaisedButton(
child: Text("上一頁"),
onPressed: (){
Navigator.pop(context);
},
),
),
);
}
}
效果如下：
2020315123.gif
也可以通過設(shè)置 Material.routes 來設(shè)置導(dǎo)航的頂級路由路線收叶，通過 Navigator.pushNamed 方法進(jìn)行導(dǎo)航界面切換，pushNamed 方法原型如下：
@optionalTypeArgs
static Future<T> pushNamed<T extends Object>(
//BuildContext類型必傳參數(shù)共苛，上線文
BuildContext context,
//String類型必傳參數(shù)判没，路由路徑名稱
String routeName, {
//Object類型可選命名參數(shù)，參數(shù)
Object arguments,
}) {
return Navigator.of(context).pushNamed<T>(routeName, arguments: arguments);
}
使用方式如下：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
routes: {
"/first" : (context)=> FirstPage(),
},
);;
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("HomePage"),
),
body: Builder(
builder: (BuildContext context){
return Container(
color: Colors.yellow,
child: Center(
child: RaisedButton(
child: Text("下一頁"),
onPressed: (){
Navigator.pushNamed(context, "/first");
},
),
),
);
},
),
endDrawer: Drawer(),
);
}
}
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("FirstPage"),
),
body: Center(
child: RaisedButton(
child: Text("上一頁"),
onPressed: (){
Navigator.pop(context);
},
),
),
);
}
}
因?yàn)樵?home 中設(shè)置了首頁隅茎，所以在 routes 中不需要設(shè)置 / 來表示首頁澄峰，home 等同于 / 。
如果涉及到頁面?zhèn)髦当傧騻髦等绻褂?Navigator.push() 俏竞，可以使用被傳遞參數(shù)的 Widget 的構(gòu)造方法，使用Navigator.pushNamed() ，可以使用其第三個(gè)參數(shù) arguments 進(jìn)行參數(shù)設(shè)置胞此。 反向可以使用 Navigator.pop 的參數(shù)進(jìn)行設(shè)置臣咖。如下：
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("HomePage"),
),
body: Builder(
builder: (BuildContext context){
return Container(
color: Colors.yellow,
child: Center(
child: RaisedButton(
child: Text("下一頁"),
onPressed: (){
//使用push
Navigator.push(context, MaterialPageRoute(
builder: (context) => FirstPage("hike"),
fullscreenDialog: false,
)
).then((value){
print(value);
});
},
),
),
);
},
),
endDrawer: Drawer(),
);
}
}
class FirstPage extends StatelessWidget {
FirstPage(this.userName);
final String userName;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("FirstPage"),
),
body: Center(
child: RaisedButton(
child: Text("上一頁 名字為:$userName"),
onPressed: (){
Navigator.pop(context, "返回給HomePage的值");
},
),
),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("HomePage"),
),
body: Builder(
builder: (BuildContext context){
return Container(
color: Colors.yellow,
child: Center(
child: RaisedButton(
child: Text("下一頁"),
onPressed: () async {
final result = await Navigator.pushNamed(context, "/first", arguments: <String, String>{
"name" : "hike",
"age" : "20",
});
print(result);
},
),
),
);
},
),
endDrawer: Drawer(),
);
}
}
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
RouteSettings setting = ModalRoute.of(context).settings;
final Map args = ModalRoute.of(context).settings.arguments;
print(setting.name);
return Scaffold(
appBar: AppBar(
title: Text("FirstPage"),
),
body: Center(
child: RaisedButton(
child: Text("上一頁"),
onPressed: (){
Navigator.pop(context, <String>["hike", "nick"]);
},
),
),
);
}
}
在正向傳值中，使用 Navigator.pushNamed() 方法時(shí)漱牵，參數(shù) arguments 參數(shù)為 Object 類型夺蛇，所以可以定義任意類型參數(shù)，也可以使用 class 等包裝參數(shù)進(jìn)行傳遞酣胀。當(dāng)在接收參數(shù)頁面接收參數(shù)時(shí)刁赦，使用 ModalRoute.of 進(jìn)行獲取，其返回一個(gè)帶有參數(shù)的當(dāng)前路由闻镶。
在反向傳值時(shí)甚脉，當(dāng)調(diào)用 Navigator.pop() 時(shí)，會(huì)將其中的參數(shù)包裝到該方法返回的 Feature 對象中铆农。后續(xù)文章會(huì)詳細(xì)介紹牺氨。可以查看官方說明文檔：https://flutter.dev/docs/cookbook/navigation/returning-data
