Flutter应用开发,系统样式改不了?SystemChrome 状态栏、导航栏、屏幕方向……想改就改

简介: Flutter应用开发,系统样式改不了?SystemChrome 状态栏、导航栏、屏幕方向……想改就改

开发场景

开发APP时,我们经常要客制化状态栏、导航栏栏等的样式和风格,Flutter开发APP时如何满足这些客制化要求呢?


自定义状态栏和导航栏的样式:您可以使用 SystemChrome 来定义状态栏和导航栏的颜色、文字样式等,以满足您的设计需求。

隐藏系统级界面元素:如果您希望在应用程序运行时隐藏状态栏、导航栏或全屏显示,SystemChrome 可以帮助您实现这些功能。

控制屏幕方向:SystemChrome 还提供了方法来锁定或解锁屏幕方向,以确保应用程序以特定方向显示。


SystemChrome 介绍

SystemChrome 是 Flutter 中用于控制系统级界面样式和行为的类。它提供了一些方法来修改应用程序窗口的外观和行为,例如状态栏、导航栏、屏幕方向等。


SystemChrome的使用

导入 SystemChrome 包

在使用 SystemChrome 之前,您需要在文件中导入 package:flutter/services.dart 包。

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

隐藏状态栏

可以使用 SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive)方法来隐藏状态栏。


SystemUiMode.immersive:将系统UI完全隐藏,用户可以通过滑动从屏幕边缘恢复UI的可见性。在此模式下,状态栏都会隐藏。


SystemUiMode.immersiveSticky:类似于 SystemUiMode.immersive,但是用户可以通过短暂的触摸来恢复UI的可见性,而不需要完全滑动。UI元素将会暂时出现并在一段时间后自动隐藏。


SystemUiMode.edgeToEdge:在此模式下,应用内容将会延伸到屏幕的边缘,覆盖导航栏和状态栏。导航栏和状态栏仍然存在,但是在应用内部不可见。


效果如图:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive)调用前


d48de62a49734b67886788833e855e75.png


调用后

df53248cbd5a471a9abf1b3399b996ee.png


可以看到显示电量、时间等信息的状态栏已经被隐藏了。


说明

这里我们说SystemUiMode.immersive:用户可以通过滑动从屏幕边缘恢复UI的可见性。


改变状态栏的样式

SystemChrome.setSystemUIOverlayStyle 方法用于设置系统级覆盖样式。这个方法可以接收一个 SystemUiOverlayStyle 对象作为参数,用于定义状态栏和导航栏的样式。


SystemUiOverlayStyle 是一个用于描述状态栏和导航栏覆盖样式的类。它提供了许多属性,可以用于定义文字颜色、背景颜色、图标亮度等。通过设置 SystemUiOverlayStyle 的不同属性,可以实现自定义的系统级样式。


通过调用 SystemChrome.setSystemUIOverlayStyle 方法,可以将自定义的 SystemUiOverlayStyle 应用于应用程序的状态栏和导航栏,从而改变它们的外观。


例如,可以使用以下代码将状态栏和导航栏设置为深色文字和浅色背景:

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

这将使状态栏和导航栏的文字变为深色(黑色或灰色),并将背景设置为浅色(白色)。通过调整 SystemUiOverlayStyle 的不同属性值,可以根据应用程序的需求进行自定义。


SystemChrome.setSystemUIOverlayStyle 方法的调用通常放在应用程序的入口处(例如 main 函数)或主题的设置中,以确保样式在整个应用程序中生效。

使用SystemChrome.setSystemUIOverlayStyle来改变状态栏的样式,例如下面的例子让状态栏的背景色变为红色。

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

效果如下:


aa8f7fbe6f914d88bf6d35759193c347.png

注意事项

请注意,为了使状态栏的样式生效,需要在应用程序的根 Widget 的 build 方法中调用 SystemChrome.setSystemUIOverlayStyle() 方法。通常,这会在 runApp() 方法之前设置。


另外该代码只在 Android 平台上生效,iOS 平台上的状态栏样式无法直接通过 Flutter 控制。在 iOS 上,状态栏的样式由应用程序的 Info.plist 文件中的配置决定。


其他样式说明

在 SystemUiOverlayStyle 对象中,除了设置 statusBarColor 外,还可以设置其他属性,如:

systemNavigationBarColor 属性来定义状态栏和导航栏的颜色。

statusBarBrightness、statusBarIconBrightness、systemNavigationBarIconBrightness 属性来定义状态栏和导航栏文字的颜色。

控制屏幕方向:


锁定屏幕方向

锁定屏幕方向:使用 SystemChrome.setPreferredOrientations 方法,并传递一个 List 参数,例如 [DeviceOrientation.portraitUp]。

解锁屏幕方向:使用 SystemChrome.setPreferredOrientations([]) 方法,将一个空的 List 作为参数传递给它,以解锁屏


锁定屏幕方向实例

我本身写的例子是竖屏的,上面的截图也能看到,现在我将它转换成横屏显示。添加如下代码:

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

显示效果如图

ac7df450cd5e413e81dab4c35cc12e07.png

实物图:


3a8de429eebc43d198dd862286fa0377.jpg

注意事项

通过这样设置,即使用户旋转设备,应用程序仍然会保持在横屏模式下,不会自动切换到竖屏模式。

SystemChrome.setPreferredOrientations 方法通常会在应用程序的根 Widget 的 build 方法之前调用,以确保首选方向设置生效。


相关文章
|
26天前
|
UED
Flutter&鸿蒙next 中的 Drawer 导航栏
在 Flutter 中,Drawer 是一个常用的侧边栏导航组件,通过点击菜单按钮或滑动屏幕显示。它用于展示导航项、用户信息和应用设置等。本文通过一个简单的示例代码,介绍了如何使用 Drawer 实现多页面导航,包括 Drawer 的基本结构、ListView 和 ListTile 的使用,以及页面内容的切换。希望对理解和使用 Flutter 的 Drawer 组件有所帮助。
80 1
|
28天前
|
容器
深入理解 Flutter 鸿蒙版的 Stack 布局:适配屏幕与层叠样式布局
Flutter 的 Stack 布局组件允许你将多个子组件层叠在一起,实现复杂的界面效果。本文介绍了 Stack 的基本用法、核心概念(如子组件层叠、Positioned 组件和对齐属性),以及如何使用 MediaQuery 和 LayoutBuilder 实现响应式设计。通过示例展示了照片展示与文字描述、动态调整层叠布局等高级用法,帮助你构建更加精美和实用的 Flutter 应用。
118 2
|
28天前
|
Dart UED 开发者
Flutter&鸿蒙next中的按钮封装:自定义样式与交互
在Flutter应用开发中,按钮是用户界面的重要组成部分。Flutter提供了多种内置按钮组件,但有时这些样式无法满足特定设计需求。因此,封装一个自定义按钮组件变得尤为重要。自定义按钮组件可以确保应用中所有按钮的一致性、可维护性和可扩展性,同时提供更高的灵活性,支持自定义颜色、形状和点击事件。本文介绍了如何创建一个名为CustomButton的自定义按钮组件,并详细说明了其样式、形状、颜色和点击事件的处理方法。
75 1
|
7月前
|
开发框架 前端开发 数据安全/隐私保护
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
【4月更文挑战第30天】本文探讨了Flutter的布局和样式设计,关键点包括:1) 布局基础如Column、Row和Stack用于创建复杂结构;2) Container、Center和Expanded等常用组件的作用;3) Theme和Decoration实现全局样式和组件装饰;4) 实战应用如登录界面和列表页面的构建;5) 响应式布局利用MediaQuery和弹性组件适应不同屏幕;6) 性能优化,避免过度复杂设计。了解并掌握这些,有助于开发者创建高效美观的Flutter应用。
195 0
【Flutter 前端技术开发专栏】Flutter 中的布局与样式设计
|
4月前
|
Android开发 iOS开发
Flutter中获取监听屏幕方向、锁定屏幕方向
Flutter中获取监听屏幕方向、锁定屏幕方向
169 2
|
4月前
|
Dart 安全 API
Android跨平台开发之Dart 3.5 与 Flutter 3.24:革新跨平台应用开发
【Dart 3.5 与 Flutter 3.24:革新跨平台应用开发】首发于公众号“AntDream”。本文深度解析 Dart 3.5 和 Flutter 3.24 的新特性,包括空安全强化、Web 与原生互操作性增强及 Flutter GPU API 等,展示了如何提升代码质量和用户体验。
66 1
|
4月前
|
存储 JavaScript 开发者
Flutter应用开发:掌握StatefulWidget的实用技巧
Flutter应用开发:掌握StatefulWidget的实用技巧
61 0
|
7月前
|
Dart 物联网 Android开发
移动应用开发的未来:Flutter与系统融合的创新之路
【5月更文挑战第27天】 在移动应用的广阔天地中,开发者们始终在寻找能够提升用户体验、增强性能并缩短开发周期的新技术。本文聚焦于探讨Google推出的UI工具包——Flutter,它如何通过跨平台能力和与操作系统的深度融合,为移动应用开发带来革命性的变革。我们将分析Flutter的核心原理,其与原生系统的交互方式,以及其在现代移动应用开发中的实践应用和未来趋势。
|
7月前
|
前端开发 开发者 UED
【Flutter前端技术开发专栏】Flutter中的图标、字体与样式管理
【4月更文挑战第30天】本文介绍了在Flutter中管理图标、字体和样式的做法。Flutter提供`Icons`类用于内置矢量图标,支持第三方图标库如FontAwesome。自定义字体可通过添加字体文件至`assets`目录并配置`pubspec.yaml`,然后使用`TextStyle`设置。借助`ThemeData`,开发者能统一管理应用主题样式,局部样式可覆盖全局。通过集中管理样式,提升代码复用性和应用一致性。
181 0
【Flutter前端技术开发专栏】Flutter中的图标、字体与样式管理
|
7月前
|
前端开发 UED 开发者
【Flutter前端技术开发专栏】Flutter中的主题与样式主题化
【4月更文挑战第30天】Flutter是一款由谷歌开发的开源移动应用框架,因其高性能和跨平台能力受到开发者青睐。本文聚焦Flutter中的主题与样式主题化,阐述如何通过`ThemeData`定义和设置全局主题,以及如何利用`TextStyle`、`AppBarTheme`和`ButtonTheme`定制文本、AppBar和按钮样式。了解并运用这些知识,能提升应用的统一风格和用户体验,助力Flutter开发。
60 0
【Flutter前端技术开发专栏】Flutter中的主题与样式主题化