天天看點

使用 Flutter SystemChrome

SystemChrome 控制作業系統圖形界面的特定方面以及它如何與應用程式互動。需要注意的是在使用的時候一定要保證先執行 WidgetsFlutterBinding.ensureInitialized();

setPreferredOrientations 設定橫屏或堅屏

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

SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
複制代碼           

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

SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,DeviceOrientation.portraitDown]);
複制代碼           

這樣寫也可以,隻有後面的 portraitDown 有點多餘,如果可以的話,系統不允許在豎直方向倒過來,是以即使是手機設定中沒有打開方向鎖定,也不用擔心會倒過來。

如果想在豎直方向倒過來,可以隻指定 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 會随着與使用者互動消失或出現,可以監聽 setSystemUIChangeCallback 讓 overlays 自動恢複原來的狀态。

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),
  )           

繼續閱讀