flutter修改状态栏学习

在flutter中如何动态更改状态栏的颜色和风格。

前置知识点学习

AnnotatedRegion

`AnnotatedRegion` 是 Flutter 中的一个小部件，用于在特定区域中提供元数据（metadata）以影响某些系统级的行为或外观。它通常用于改变系统 UI 的外观，比如状态栏或导航栏的颜色和风格。

主要用途

1.系统 UI 风格：最常见的用途是与 `SystemUiOverlayStyle` 一起使用，来指定状态栏和导航栏的颜色和图标样式。

2.区域性元数据：它允许在特定的 `Widget` 子树中提供数据，这些数据可以被 Flutter 的其他系统或组件读取和使用。

典型用法

在 Flutter 中，`AnnotatedRegion` 经常用于设置状态栏的样式。通过包裹一个子组件树，并提供一个 `SystemUiOverlayStyle` 值，系统会在该区域应用指定的状态栏样式。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class MyStatusBarDemoPage extends StatelessWidget {
  const MyStatusBarDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle.light,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('AnnotatedRegion Example'),
          ),
          body: const Center(
            child: Text('Hello, World!'),
          ),
        ));
  }
}

注意事项

1.优先级：如果有多个嵌套的 `AnnotatedRegion`，最内层的 `AnnotatedRegion` 的值将会覆盖外层的值。

2.适用范围：`AnnotatedRegion` 适用于需要传递元数据以影响子树行为的场景，主要是系统 UI 样式设置。

3.应用场景：非常适合需要在应用程序的不同页面或部分动态设置状态栏或导航栏风格的情况。

总结

`AnnotatedRegion` 是一个强大的工具，可以在 Flutter 应用的特定区域中设置系统级别的 UI 样式。这使得开发者可以更细粒度地控制应用的视觉风格，特别是在需要根据不同界面动态调整状态栏和导航栏的外观时。通过理解和使用 `AnnotatedRegion`，可以大大增强应用的用户界面体验。

SystemUiOverlayStyle

`SystemUiOverlayStyle` 是 Flutter 中用于定义系统 UI 覆盖层外观的一个类。它主要用于控制状态栏和导航栏的颜色和图标样式。这在提供一致的用户体验和匹配应用的主题时非常有用。

主要属性

`SystemUiOverlayStyle` 提供了一些属性来控制状态栏和导航栏的外观：

1.`statusBarColor`：

• 定义状态栏的背景颜色。

• 仅在 Android 上有效，因为 iOS 的状态栏颜色是由系统控制的。

2.`statusBarIconBrightness`：

• 控制状态栏中图标的亮度（深色或浅色）。
• 可选值为 `Brightness.light` 和 `Brightness.dark`。

• 影响状态栏图标和文字的颜色。

3.`statusBarBrightness`：

• 控制 iOS 状态栏的亮度。

• 用于在 iOS 上设置状态栏内容的颜色（文字和图标）。

4.`systemNavigationBarColor`：

• 定义系统导航栏的背景颜色。

• 仅在 Android 上有效。

5.`systemNavigationBarIconBrightness`：

• 控制导航栏中图标的亮度。

• 适用于 Android。

6.`systemNavigationBarDividerColor`：

• 定义导航栏分隔线的颜色。

• 适用于 Android。

使用示例

可以通过 `SystemChrome.setSystemUIOverlayStyle` 方法应用 `SystemUiOverlayStyle`，或者通过 `AnnotatedRegion` 小部件在特定区域应用。

class MyStatusBarDemoPage extends StatelessWidget {
  const MyStatusBarDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        statusB