開(kāi)發(fā)場(chǎng)景

開(kāi)發(fā)APP時(shí)，我們經(jīng)常要客制化狀態(tài)欄、導(dǎo)航欄欄等的樣式和風(fēng)格，F(xiàn)lutter開(kāi)發(fā)APP時(shí)如何滿足這些客制化要求呢？

自定義狀態(tài)欄和導(dǎo)航欄的樣式：您可以使用 SystemChrome 來(lái)定義狀態(tài)欄和導(dǎo)航欄的顏色、文字樣式等，以滿足您的設(shè)計(jì)需求。
隱藏系統(tǒng)級(jí)界面元素：如果您希望在應(yīng)用程序運(yùn)行時(shí)隱藏狀態(tài)欄、導(dǎo)航欄或全屏顯示，SystemChrome 可以幫助您實(shí)現(xiàn)這些功能。
控制屏幕方向：SystemChrome 還提供了方法來(lái)鎖定或解鎖屏幕方向，以確保應(yīng)用程序以特定方向顯示。

SystemChrome 介紹

SystemChrome 是 Flutter 中用于控制系統(tǒng)級(jí)界面樣式和行為的類。它提供了一些方法來(lái)修改應(yīng)用程序窗口的外觀和行為，例如狀態(tài)欄、導(dǎo)航欄、屏幕方向等。

SystemChrome的使用

導(dǎo)入 SystemChrome 包

在使用 SystemChrome 之前，您需要在文件中導(dǎo)入 package:flutter/services.dart 包。

import 'package:learning/routes/savecfg.dart';

隱藏狀態(tài)欄

可以使用 SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive)方法來(lái)隱藏狀態(tài)欄。

SystemUiMode.immersive：將系統(tǒng)UI完全隱藏，用戶可以通過(guò)滑動(dòng)從屏幕邊緣恢復(fù)UI的可見(jiàn)性。在此模式下，狀態(tài)欄都會(huì)隱藏。

SystemUiMode.immersiveSticky：類似于 SystemUiMode.immersive，但是用戶可以通過(guò)短暫的觸摸來(lái)恢復(fù)UI的可見(jiàn)性，而不需要完全滑動(dòng)。UI元素將會(huì)暫時(shí)出現(xiàn)并在一段時(shí)間后自動(dòng)隱藏。

SystemUiMode.edgeToEdge：在此模式下，應(yīng)用內(nèi)容將會(huì)延伸到屏幕的邊緣，覆蓋導(dǎo)航欄和狀態(tài)欄。導(dǎo)航欄和狀態(tài)欄仍然存在，但是在應(yīng)用內(nèi)部不可見(jiàn)。

效果如圖：
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive)調(diào)用前

調(diào)用后

可以看到顯示電量、時(shí)間等信息的狀態(tài)欄已經(jīng)被隱藏了。

說(shuō)明

這里我們說(shuō)SystemUiMode.immersive：用戶可以通過(guò)滑動(dòng)從屏幕邊緣恢復(fù)UI的可見(jiàn)性。

改變狀態(tài)欄的樣式

SystemChrome.setSystemUIOverlayStyle 方法用于設(shè)置系統(tǒng)級(jí)覆蓋樣式。這個(gè)方法可以接收一個(gè) SystemUiOverlayStyle 對(duì)象作為參數(shù)，用于定義狀態(tài)欄和導(dǎo)航欄的樣式。

SystemUiOverlayStyle 是一個(gè)用于描述狀態(tài)欄和導(dǎo)航欄覆蓋樣式的類。它提供了許多屬性，可以用于定義文字顏色、背景顏色、圖標(biāo)亮度等。通過(guò)設(shè)置 SystemUiOverlayStyle 的不同屬性，可以實(shí)現(xiàn)自定義的系統(tǒng)級(jí)樣式。

通過(guò)調(diào)用 SystemChrome.setSystemUIOverlayStyle 方法，可以將自定義的 SystemUiOverlayStyle 應(yīng)用于應(yīng)用程序的狀態(tài)欄和導(dǎo)航欄，從而改變它們的外觀。

例如，可以使用以下代碼將狀態(tài)欄和導(dǎo)航欄設(shè)置為深色文字和淺色背景：

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
  statusBarColor: Colors.transparent,
  statusBarBrightness: Brightness.dark,
  statusBarIconBrightness: Brightness.dark,
  systemNavigationBarColor: Colors.white,
  systemNavigationBarIconBrightness: Brightness.dark,
));

這將使?fàn)顟B(tài)欄和導(dǎo)航欄的文字變?yōu)樯钌ê谏蚧疑?，并將背景設(shè)置為淺色（白色）。通過(guò)調(diào)整 SystemUiOverlayStyle 的不同屬性值，可以根據(jù)應(yīng)用程序的需求進(jìn)行自定義。

SystemChrome.setSystemUIOverlayStyle 方法的調(diào)用通常放在應(yīng)用程序的入口處（例如 main 函數(shù)）或主題的設(shè)置中，以確保樣式在整個(gè)應(yīng)用程序中生效。
使用SystemChrome.setSystemUIOverlayStyle來(lái)改變狀態(tài)欄的樣式，例如下面的例子讓狀態(tài)欄的背景色變?yōu)榧t色。

  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
    statusBarColor: Colors.red,
  ));

效果如下：

注意事項(xiàng)

請(qǐng)注意，為了使?fàn)顟B(tài)欄的樣式生效，需要在應(yīng)用程序的根 Widget 的 build 方法中調(diào)用 SystemChrome.setSystemUIOverlayStyle() 方法。通常，這會(huì)在 runApp() 方法之前設(shè)置。

另外該代碼只在 Android 平臺(tái)上生效，iOS 平臺(tái)上的狀態(tài)欄樣式無(wú)法直接通過(guò) Flutter 控制。在 iOS 上，狀態(tài)欄的樣式由應(yīng)用程序的 Info.plist 文件中的配置決定。

其他樣式說(shuō)明

在 SystemUiOverlayStyle 對(duì)象中，除了設(shè)置 statusBarColor 外，還可以設(shè)置其他屬性，如：
systemNavigationBarColor 屬性來(lái)定義狀態(tài)欄和導(dǎo)航欄的顏色。
statusBarBrightness、statusBarIconBrightness、systemNavigationBarIconBrightness 屬性來(lái)定義狀態(tài)欄和導(dǎo)航欄文字的顏色。
控制屏幕方向：

鎖定屏幕方向

鎖定屏幕方向：使用 SystemChrome.setPreferredOrientations 方法，并傳遞一個(gè) List 參數(shù)，例如 [DeviceOrientation.portraitUp]。
解鎖屏幕方向：使用 SystemChrome.setPreferredOrientations([]) 方法，將一個(gè)空的 List 作為參數(shù)傳遞給它，以解鎖屏

鎖定屏幕方向?qū)嵗?/h3>

我本身寫的例子是豎屏的，上面的截圖也能看到，現(xiàn)在我將它轉(zhuǎn)換成橫屏顯示。添加如下代碼：

    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);

顯示效果如圖

實(shí)物圖：

注意事項(xiàng)

通過(guò)這樣設(shè)置，即使用戶旋轉(zhuǎn)設(shè)備，應(yīng)用程序仍然會(huì)保持在橫屏模式下，不會(huì)自動(dòng)切換到豎屏模式。
SystemChrome.setPreferredOrientations 方法通常會(huì)在應(yīng)用程序的根 Widget 的 build 方法之前調(diào)用，以確保首選方向設(shè)置生效。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-496637.html

到了這里，關(guān)于Flutter應(yīng)用開(kāi)發(fā)，系統(tǒng)樣式改不了？SystemChrome 狀態(tài)欄、導(dǎo)航欄、屏幕方向……想改就改的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！