Flutter SystemChrome使用方法詳解

更新時間：2022年12月12日 11:49:47 作者：IAM17

這篇文章主要為大家介紹了Flutter SystemChrome使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

SystemChrome 控制操作系統(tǒng)圖形界面的特定方面以及它如何與應用程序交互。

需要注意的是在使用的時候一定要保證先執(zhí)行 WidgetsFlutterBinding.ensureInitialized();

setPreferredOrientations 設置橫屏或堅屏

一般我們顯示是要強制堅屏，只需要指定 DeviceOrientation.portraitUp 就夠了。

SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);

不需要再加上 DeviceOrientation.portraitDown，因為加上也不會有效果。

SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp，DeviceOrientation.portraitDown]);

這樣寫也可以，只有后面的 portraitDown 有點多余，如果可以的話，系統(tǒng)不允許在豎直方向倒過來，所以即使是手機設置中沒有打開方向鎖定，也不用擔心會倒過來。

如果想在豎直方向倒過來，可以只指定 portraitDown。這樣畫面就會一直倒置。

SystemChrome.setPreferredOrientations([DeviceOrientation.portraitDown]);

如果想設置畫面水平一般會同時設置兩個。當手機反轉的時候，畫面也可以隨著反轉。（沒有設置鎖定的情況下）

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

只有禁用多任務處理時，此設置才會在 iPad 上生效。

setEnabledSystemUIMode 設置全屏顯示

用 manual 的方式可以指定顯下面或下面的 overlay，或都不顯示。

//都不顯示，全屏
 SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,overlays: []);
 //顯示上面
 SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,overlays: [SystemUiOverlay.top]);
 //顯示下面
 SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,overlays: [SystemUiOverlay.bottom]);

setSystemUIOverlayStyle 設置 overlay 樣式，

overlay 的顯示樣式，比如可以顯示 dark style

  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

android 有效，ios 可能沒有效果。

如果有的設置沒生效，可以重新啟動 app 試試

全屏播放視頻

如果要全屏播放視頻可以做如下設置，橫屏，并去掉 overlays。

 SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,overlays: []);
 SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,DeviceOrientation.landscapeRight]);

setSystemUIChangeCallback

只在 android 有效，SystemUiMode 設置 SystemUiMode.leanBack 或 SystemUiMode.immersive 或 SystemUiMode.immersiveSticky 的時候， overlays 會隨著與用戶交互消失或出現(xiàn)，可以監(jiān)聽 setSystemUIChangeCallback 讓 overlays 自動恢復原來的狀態(tài)。

WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
SystemChrome.setSystemUIChangeCallback((systemOverlaysAreVisible) async {
  await Future.delayed(const Duration(seconds: 1));
  SystemChrome.restoreSystemUIOverlays();
});

AnnotatedRegion

如果想控制 status bar 的樣式還可以用 AnnotatedRegion，需要注意的是，使用 AnnotatedRegion 就不要使用 AppBar了，否則會被 AppBar了覆蓋。

AnnotatedRegion(
    child: Text('IAM17'),
    value: SystemUiOverlayStyle(
        statusBarColor: Colors.green,
        statusBarIconBrightness: Brightness.light,
        //底部navigationBar背景顏色
        systemNavigationBarColor: Colors.white),
  )

以上就是Flutter SystemChrome使用方法詳解的詳細內容，更多關于Flutter SystemChrome使用的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: