flutter沉溺式透明状态栏导航栏实现/状态栏颜色设置

正文：

使用 AnnotatedRegion 组件包裹 Scaffold 支持 dark 和 light 两种颜色。通过 AnnotatedRegion 设置当前界面的状态栏及底部导航栏的样式。

如下图：

教你如何使用Flutter制作一个透明沉溺式的状态栏导航栏或修改状态栏颜色为与你应用主题匹配的颜色。

以 Flutter2.0 为例

flutter2 沉溺式透明状态栏导航栏实现代码

下面提供的几种方法可根据应用场景进行灵活使用。实现分为 Android 沉溺式和 IOS 沉溺式。

方法一：setSystemUIOverlayStyl 透明状态栏

使用 servic 方法 set 状态颜色为透明

// https://www.huizhanii.com
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main(){
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // transparent status bar
  ));
  runApp(MyApp());
}

注意，如果您的应用中在 man 入口使用了 AppBar，则该方法会被 AppBar 的值所覆盖，解决方法是将该方法移至 runApp 方法后：

方法二：systemOverlayStyle 透明状态栏

指定用于与 AppBar 重叠的系统覆盖的样式，如果 AppBar 与全局设置有重叠覆盖的情况，使用 systemOverlayStyle 可确保效果完整。

// https://www.huizhanii.com
Scaffold(
  appBar: AppBar(
    backwardsCompatibility: false,
    systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.transparent),
  ),
)

方法三：AnnotatedRegion 透明状态栏

通过 AnnotatedRegion 设置当前界面的状态栏及底部导航栏的样式，使用 AnnotatedRegion 组件包裹 Scaffold，支持 dark 和 light 两种颜色。

// https://www.huizhanii.com
@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle(
          // 设置沉浸式状态栏文字颜色
          statusBarColor: Colors.transparent, // transparent status bar
          systemNavigationBarColor: Colors.black, // navigation bar color
          statusBarIconBrightness: Brightness.dark, // status bar icons' color
          systemNavigationBarIconBrightness: Brightness.dark, //navigation bar icons' color
        ),
        child: Scaffold(
          body: _getBody(context),
        ),
      ),
    );
  }

本文章已结束，如转载请注明：汇站网 » flutter 沉溺式透明状态栏导航栏实现/状态栏颜色设置