Vue3 Teleport 将组件传送到外层DOM位置

设置状态栏存在两种方法：

1. 全局设置状态栏

通过使用 SystemChrome 类的 setSystemUIOverlayStyle 方法来设置状态栏的样式，包括透明状态栏。

以下是一个简单的示例：

首先，在 pubspec.yaml 文件中添加 flutter/services 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter/services:

然后，在Flutter代码中使用 SystemChrome 来设置状态栏透明：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 设置状态栏透明
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
        statusBarColor: Colors.transparent, // 设置状态栏颜色为透明
        statusBarIconBrightness: Brightness.dark, // 设置状态栏图标颜色为深色
      ),
    );

    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Transparent Status Bar'),
      ),
      body: Center(
        child: Text('This is the body of the app'),
      ),
    );
  }
}

在上面的代码中，SystemChrome.setSystemUIOverlayStyle 方法被用于设置状态栏的样式。通过 SystemUiOverlayStyle 对象，你可以指定状态栏的颜色，这里将其设置为透明色，同时还可以设置状态栏图标的颜色等。

请注意，这样设置状态栏透明后，状态栏将不再占用应用程序的布局空间，而是覆盖在应用程序上方。这可能会影响你的布局和UI。如果需要处理状态栏高度的问题，你可能需要适当调整你的布局。

2. 对于当前界面设置状态栏

通过使用 AnnotatedRegion 组件来为单个页面设置状态栏透明。AnnotatedRegion 允许你在应用程序的一部分（通常是单个页面）上方覆盖特定的系统UI样式。

以下是一个示例，演示如何在Flutter中设置单个页面的状态栏透明：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle(
          statusBarColor: Colors.transparent, // 设置状态栏颜色为透明
          statusBarIconBrightness: Brightness.dark, // 设置状态栏图标颜色为深色
        ),
        child: Center(
          child: Text('This is the body of the page'),
        ),
      ),
    );
  }
}

在上面的代码中，AnnotatedRegion<SystemUiOverlayStyle> 将 SystemUiOverlayStyle 应用于 Scaffold 的 body 部分。通过设置 statusBarColor 为透明色，我们实现了状态栏透明的效果。

请注意，这只影响当前页面，其他页面的状态栏样式仍然会受到默认设置。如果需要在整个应用程序中使用透明状态栏，可以在 MaterialApp 中的 theme 中设置 SystemUiOverlayStyle。