flutter自定義導(dǎo)航欄更改狀態(tài)欄顏色兼容Android叉信,IOS
flutter下自定義導(dǎo)航欄更改狀態(tài)欄背景顏色和字體顏色亩冬,測試ios、Android有效
前言
flutter最近火得有些過分,做為一名后端我都想試試它硅急。國內(nèi)目前關(guān)于flutter的文檔還是挺少的覆享,很多問題都難以找到解決方案。最近在使用flutter也遇見了不少的問題营袜,就拿更改flutter狀態(tài)欄背景撒顿、字體顏色來說道說道,在百度荚板、google上隨便一搜都有一大堆的文章說明如何使用flutter屬性來實(shí)現(xiàn)凤壁,但是在真正自己實(shí)際開發(fā)中發(fā)現(xiàn)并不能達(dá)到預(yù)期的目的,ios跪另,android不同平臺上沒有真正解決實(shí)際問題拧抖。下面解決辦親測ios、Android有效
屬性
- AnnotatedRegion<SystemUiOverlayStyle>
- AppBar
兩個屬性都可以達(dá)到更改狀態(tài)欄的目的免绿,但是在真機(jī)開發(fā)過程中發(fā)現(xiàn) AnnotatedRegion 在ios下無法達(dá)到預(yù)期的效果字體和顏色都沒有改變唧席,AppBar 在Android下也不能達(dá)到預(yù)期效果。并且 AnnotatedRegion 在頁面上存 在appBar 下的情況下不會生效嘲驾。解決辦法就是通過Theme.of(context).platform判斷當(dāng)前是ios還是android根據(jù)不同的平臺使用不同的屬性淌哟,具體代實(shí)現(xiàn)碼如下
Widget build(BuildContext context) {
return AnnotatedRegion<SystemUiOverlayStyle>( // android 更改狀態(tài)欄顏色
value: SystemUiOverlayStyle(
statusBarColor: Colors.white,
statusBarIconBrightness: Brightness.dark,
systemNavigationBarColor: Colors.white,
),
child: Scaffold(
backgroundColor: Colors.white,
appBar: PreferredSize( //ios下更改狀態(tài)欄顏色
//判斷是是否是android,是android需去掉AppBar辽故,否則無AnnotatedRegion無效
child: Theme.of(context).platform == TargetPlatform.android
? Container()
: AppBar(backgroundColor: Colors.white, elevation: 0),
preferredSize: Size.fromHeight(0),
),
body:Text('hello world'),
)
)
}
查看源碼發(fā)現(xiàn)SystemUiOverlayStyle有dark和light兩個自帶的屬性徒仓,SystemUiOverlayStyle.dark和SystemUiOverlayStyle.light在ios是效果的,但是只能修改狀態(tài)的字體顏色但是無法修改背景顏色
上面的示例代碼在ios黑暗模式下狀態(tài)欄的字體顏色默認(rèn)是白色的榕暇,關(guān)于ios黑暗模式的問題解決辦法也有很多請自行g(shù)oogle