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)调用前

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

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

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

说明

这里我们说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,
  ));

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

注意事项

请注意,为了使状态栏的样式生效,需要在应用程序的根 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,
    ]);

显示效果如图
Flutter应用开发,系统样式改不了?SystemChrome 状态栏、导航栏、屏幕方向……想改就改
实物图:
Flutter应用开发,系统样式改不了?SystemChrome 状态栏、导航栏、屏幕方向……想改就改

注意事项

通过这样设置,即使用户旋转设备,应用程序仍然会保持在横屏模式下,不会自动切换到竖屏模式。
SystemChrome.setPreferredOrientations 方法通常会在应用程序的根 Widget 的 build 方法之前调用,以确保首选方向设置生效。文章来源地址https://www.toymoban.com/news/detail-496637.html

到了这里,关于Flutter应用开发,系统样式改不了?SystemChrome 状态栏、导航栏、屏幕方向……想改就改的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flutter开发实战-应用更新apk下载、安装apk、启动应用实现

    flutter开发实战-应用更新apk下载、安装apk、启动应用实现 在开发过程中,经常遇到需要更新下载新版本的apk文件,之后进行应用更新apk下载、安装apk、启动应用。我们在flutter工程中实现下载apk,判断当前版本与需要更新安装的版本进行比对判断,通过判断VersionCode来确定下载

    2024年02月02日
    浏览(57)
  • Flutter 应用开发的pubspec.yaml文件说明

    pubspec.yaml是Flutter项目中的配置文件,它用于定义项目的依赖项、资源文件以及其他相关配置。 以下是pubspec.yaml文件的一些关键点: 项目名称:通过name字段指定项目的名称。 项目描述:通过description字段提供对项目的简要描述。 依赖项:使用dependencies字段定义项目所依赖的

    2024年02月05日
    浏览(41)
  • Flutter中的Web应用程序开发:构建现代Web应用程序

    作者:禅与计算机程序设计艺术 作为人工智能专家,程序员和软件架构师,CTO,我今天将为大家分享有关 Flutter 中 Web 应用程序开发的见解。在这篇文章中,我们将深入探讨 Flutter Web 应用程序的开发过程、技术原理以及最佳实践。 引言 随着移动设备的普及,Web 应用程序在全

    2024年02月12日
    浏览(78)
  • flutter 开发应用 上架到 testFlight 闪退崩溃

    现象描述: 本地模拟器和真机运行正常,上架到testFlight 一直崩溃闪退。 解决思路: 1、进行崩溃日志分析 ❌-》没有结果 iOS上获取崩溃日志的N+1种方法_plcrashreport-CSDN博客 mac 台式机上可以安装testflight 也可以进行测试 也可以分析崩溃日志 2、进行排除法 对错误地方进行定位

    2024年02月07日
    浏览(52)
  • Flutter开发笔记 —— sqflite插件数据库应用

    今天在观阅掘金大佬文章的时候,了解到了该 sqflite 插件,结合官网教程和自己实践,由此总结出该文,希望对大家的学习有帮助! Flutter的 SQLite 插件。支持 iOS、Android 和 MacOS。 支持事务和batch模式 打开时自动进行版本管理 插入/查询/更新/删除查询的助手 iOS 和 Android 上的

    2024年02月04日
    浏览(58)
  • Flutter移动应用开发 - 01 Flutter初次安装、模拟器配置教程(手把手版)

    首先先安装一个编辑器,这边选用的是Android Studio(Android Studio)。Android Studio的下载和项目创建平平无奇,唯一可能有问题的就是gradle文件的下载,如果没翻墙的话需要手动下载和配置,在此不多介绍。 接下来文件的配置。 官网下载并解压Flutter SDK 版本列表 - Flutter 中文文档

    2023年04月25日
    浏览(54)
  • Android应用开发-Flutter的LongPressDraggable控件回调函数onDraggableCanceled使用

    以下是如何使用 onDraggableCanceled 的示例: velocity 参数表示拖动被取消时的速度信息。 offset 参数表示拖动被取消时的偏移量信息。 这个回调通常用于在拖动被取消时执行一些清理工作或展示一些反馈。例如,你可能想要将拖动对象返回到原始位置,或者显示一个提示,告诉用

    2024年03月08日
    浏览(42)
  • HarmonyOS鸿蒙开发指南:基于ArkTS开发 轻量级智能穿戴 体验应用、构建布局、绘制样式​​​​​​​和交互事件

    目录 体验应用 构建布局 绘制样式​​​​​​​ 交互事件 HelloWorld工程目录如下图所示: 图1  目录结构 pages/index/index.hml

    2024年02月01日
    浏览(56)
  • Flutter应用发布流程详解:从开发到上架一站式指南

    Flutter是一款由Google推出的跨平台移动应用开发框架,其强大的性能和流畅的用户体验使其备受开发者青睐。然而,开发一款应用只是第一步,将其成功上架到苹果商店才是实现商业目标的关键一步。本文将详细介绍如何使用Flutter将应用程序上架到苹果商店,让您的应用更快

    2024年04月09日
    浏览(89)
  • Flutter开发实践:用一套代码构建多端精美应用

    🏆作者简介,黑夜开发者,CSDN领军人物,全栈领域优质创作者✌,CSDN博客专家,阿里云社区专家博主,2023年6月CSDN上海赛道top4。 🏆数年电商行业从业经验,历任核心研发工程师,项目技术负责人。 🎉欢迎 👍点赞✍评论⭐收藏 在移动应用开发中,为了在不同平台上提供

    2024年02月05日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包