本次主要是記錄Fultter Theme主題的設(shè)備與AppBar中的一些屬性的使用及說(shuō)明恼琼。目前項(xiàng)目開(kāi)發(fā)有了四個(gè)界面。前期主題沒(méi)太注意屏富,今天看來(lái)要好好總結(jié)一下近期所學(xué)晴竞。
首先,Android主題沉浸式設(shè)置狠半,F(xiàn)lutter篇:
import 'dart:io';
import 'package:flutter/services.dart';
void main(){
runApp(MyApp());
if (Platform.isAndroid) {
// 以下兩行 設(shè)置android狀態(tài)欄為透明的沉浸噩死。寫在組件渲染之后颤难,是為了在渲染后進(jìn)行set賦值,覆蓋狀態(tài)欄已维,寫在渲染之前MaterialApp組件會(huì)覆蓋掉這個(gè)值行嗤。
SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
}
根據(jù)字面意思就能看出來(lái)是對(duì)狀態(tài)懶得設(shè)置,其中用到了 dart:io 與 flutter/services.dart這兩個(gè)重點(diǎn)Mark一下垛耳,有時(shí)間深入探究一下用法跟能力栅屏。回歸正題堂鲜。
ThemeData:
主題數(shù)據(jù)栈雳,其中最常用的是primarySwatch、primaryColor缔莲、accentColor甫恩。
primarySwatch:UI右下角的FloatingActionButton的顏色就是默認(rèn)取值MaterialColor,
默認(rèn)是藍(lán)色的酌予,如果修改成primarySwatch,就會(huì)變成這個(gè)顏色值奖慌。只支持MaterialColor抛虫。
primaryColor:頂部導(dǎo)航欄和狀態(tài)欄的顏色修改,需要用到這個(gè)屬性简僧,類型 Color建椰。
accentColor:前景色(文本、按鈕岛马、覆蓋邊緣效果等)棉姐。
AppBar:
看一下項(xiàng)目中的使用
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
centerTitle: true,
brightness: Brightness.dark,
iconTheme: IconThemeData(
color: Colors.white,
),
title: Text(
_messionItem.m_name,
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
),
),
),
...
}
其中brightness主題設(shè)置較為關(guān)鍵,它是設(shè)置狀態(tài)欄圖標(biāo)與字體顏色的啦逆。
brightness: Brightness.dark 狀態(tài)欄圖標(biāo)與字體顏色為白色伞矩。
brightness: Brightness.light 狀態(tài)欄圖標(biāo)與字體顏色為黑色。
iconTheme:設(shè)置appbar icon的顏色夏志,appbar中icon的顏色會(huì)根據(jù)primaryColor的改變來(lái)確定自身的顏色乃坤,這里可以在iconTheme中指定icon的顏色。
默認(rèn)不做修改前:
修改之后: