美文网首页
使用 Flutter SystemChrome

使用 Flutter SystemChrome

作者: 小城哇哇 | 来源:发表于2023-01-27 20:12 被阅读0次

    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.leanBackSystemUiMode.immersiveSystemUiMode.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),
      )
    
    

    相关文章

      网友评论

          本文标题:使用 Flutter SystemChrome

          本文链接:https://www.haomeiwen.com/subject/aiwehdtx.html