Flutter 41: 圖解神秘的 SystemChrome

??????小菜在切換橫豎屏?xí)r用到 SystemChrome问畅,小菜理解它作為一個全局屬性六荒,很像 AndroidApplication,功能很強(qiáng)大卵皂。

setPreferredOrientations

??????在我們?nèi)粘?yīng)用中可能會需要設(shè)置橫豎屏砚亭,或鎖定單方向屏幕等不同要求捅膘,通過 setPreferredOrientations 配合實現(xiàn);簡單可以按 portraitUp 上 / portraitDown 下 / landscapeLeft 右 / landscapeRight 左 來區(qū)分刃泌;

??????Tips:landscapeLeft 是以 portraitUp 順時針旋轉(zhuǎn) 90 度署尤;landscapeRight 是以逆時針旋轉(zhuǎn) 90 度,故是視覺相反俗扇。

1. 單方向

??????若需要固定應(yīng)用為單一方向箕别,僅需設(shè)置所需要的方向?qū)傩约纯桑?/p>

// 豎直上
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
// 豎直下
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitDown]);
// 水平左
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);
// 水平右
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeRight]);

2. 多方向

??????若需要應(yīng)用隨重力感應(yīng)變化方向究孕,需設(shè)置多個方向?qū)傩裕?/p>

// 豎直方向
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
// 水平方向
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeLeft]);
// 多方向
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeLeft, DeviceOrientation.portraitUp]);

Tips:

  1. portraitDown 屬性請注意厨诸,多方向時一般不會有效果禾酱,系統(tǒng)默認(rèn)不會顛倒;
  2. 多方向設(shè)置時初始方向分兩種情況颗管,第一種:當(dāng)前重力感應(yīng)方向不在設(shè)置多方向列表中垦江,初始方向為列表第一個設(shè)置方法;第二種:當(dāng)前重力感應(yīng)方向在設(shè)置多方向列表中绽族,無論順序第幾位衩藤,默認(rèn)均展示當(dāng)前重力感應(yīng)方向(非 portraitDown)赏表。

setEnabledSystemUIOverlays

??????setEnabledSystemUIOverlays 是指定在應(yīng)用程序運(yùn)行時可見的系統(tǒng)疊加,主要對狀態(tài)欄的操作逢慌,讀起來比較拗口间狂,但是看測試用例就很明了;參數(shù)分 top 頂部 / bottom 底部 兩種坠韩;

1. SystemUiOverlay.top

??????默認(rèn)隱藏底部虛擬狀態(tài)欄(需手機(jī)支持虛擬狀態(tài)欄設(shè)備)炼列,即三大金剛鍵俭尖;獲取焦點后展示狀態(tài)欄,展示大小為去掉狀態(tài)欄時整體大醒嫱已亥;

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

2. SystemUiOverlay.bottom

??????默認(rèn)隱藏頂部虛擬狀態(tài)欄虑椎,獲取焦點后展示狀態(tài)欄俱笛,展示大小為去掉狀態(tài)欄時整體大杏ぁ浆兰;

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

3. 兩者皆有

??????即默認(rèn)情況簸呈,頂部底部狀態(tài)欄均展示;

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom]);

setSystemUIOverlayStyle

??????setSystemUIOverlayStyle 用來設(shè)置狀態(tài)欄頂部和底部樣式卸亮,默認(rèn)有 lightdark 模式玩裙,也可以按照需求自定義樣式;

1. systemNavigationBarColor

??????該屬性僅用于 Android 設(shè)備且 SDK >= O 時溶诞,底部狀態(tài)欄顏色螺垢;

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(systemNavigationBarColor: Colors.pink));

2. systemNavigationBarDividerColor

??????該屬性僅用于 Android 設(shè)備且 SDK >= P 時枉圃,底部狀態(tài)欄與主內(nèi)容分割線顏色庐冯,效果不是很明顯;

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(systemNavigationBarDividerColor: Colors.yellow));

3. systemNavigationBarIconBrightness

??????該屬性僅用于 Android 設(shè)備且 SDK >= O 時返劲,底部狀態(tài)欄圖標(biāo)樣式篮绿,主要是三大按鍵顏色吕漂;

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(systemNavigationBarColor: Colors.pink));

4. statusBarColor

??????該屬性僅用于 Android 設(shè)備且 SDK >= M 時,頂部狀態(tài)欄顏色菩收;

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.red));

5. statusBarIconBrightness

??????該屬性僅用于 Android 設(shè)備且 SDK >= M 時,頂部狀態(tài)欄圖標(biāo)的亮度坡贺;但小菜感覺并不明顯遍坟;

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarIconBrightness: Brightness.dark));

6. statusBarBrightness

??????該屬性僅用于 iOS 設(shè)備頂部狀態(tài)欄亮度愿伴;

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarBrightness: Brightness.light));

setApplicationSwitcherDescription

??????小菜個人理解該屬性顯示效果是在應(yīng)用程序切換器相關(guān)的應(yīng)用程序的當(dāng)前狀態(tài)時,但是小菜反復(fù)測試并沒有實際效果鹅经,希望有理解的大神多多指點怎诫;

SystemChrome.setApplicationSwitcherDescription(
        const ApplicationSwitcherDescription(
            label: "Demo Flutter", primaryColor: 0xFFE53935))
    .then((_) {
  runApp(new MyApp());
});

??????整體來說 Flutter 對頂部底部狀態(tài)欄的設(shè)置很方便幻妓,只是有些小菜理解不夠深入的地方,有見解對朋友希望多多指導(dǎo)强胰!

來源:阿策小和尚

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末偶洋,一起剝皮案震驚了整個濱河市初烘,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌哆料,老刑警劉巖吗铐,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異奋渔,居然都是意外死亡壮啊,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進(jìn)店門玄渗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來狸眼,“玉大人拓萌,你說我怎么就攤上這事÷畔蓿” “怎么了骂远?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵激才,是天一觀的道長。 經(jīng)常有香客問我劣挫,道長东帅,這世上最難降的妖魔是什么靠闭? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任帐我,我火速辦了婚禮,結(jié)果婚禮上愧膀,老公的妹妹穿的比我還像新娘拦键。我一直安慰自己,他們只是感情好檩淋,可當(dāng)我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布芬为。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪媚朦。 梳的紋絲不亂的頭發(fā)上氧敢,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天,我揣著相機(jī)與錄音询张,去河邊找鬼。 笑死瑞侮,一個胖子當(dāng)著我的面吹牛的圆,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播半火,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼季俩!你這毒婦竟也來了钮糖?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤酌住,失蹤者是張志新(化名)和其女友劉穎店归,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體酪我,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡消痛,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了都哭。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片秩伞。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖欺矫,靈堂內(nèi)的尸體忽然破棺而出纱新,到底是詐尸還是另有隱情,我是刑警寧澤穆趴,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布脸爱,位于F島的核電站,受9級特大地震影響未妹,放射性物質(zhì)發(fā)生泄漏簿废。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一络它、第九天 我趴在偏房一處隱蔽的房頂上張望族檬。 院中可真熱鬧,春花似錦酪耕、人聲如沸导梆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽看尼。三九已至递鹉,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間藏斩,已是汗流浹背躏结。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留狰域,地道東北人媳拴。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像兆览,于是被迫代替她去往敵國和親屈溉。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容