Flutter沉浸式透明状态栏-flutter自定义凸起BottomAppBar导航

在Flutter中，如果你想要实现沉浸式的透明状态栏，并且创建一个凸起的BottomAppBar导航栏，你可以使用AnnotatedRegion来设置状态栏为透明并且使用Material控件的elevation属性来创建凸起的效果。以下是一个简单的示例代码：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle.light,
        child: Container(
          color: Colors.deepOrange,
          // 这里是你的内容，可以是其他你想展示的widget
          child: Center(
            child: Text(
              'Hello, World!',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
        ),
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Container(
          height: 50.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              IconButton(icon: Icon(Icons.home), onPressed: () {}),
              IconButton(icon: Icon(Icons.mail), onPressed: () {}),
              IconButton(icon: Icon(Icons.message), onPressed: () {}),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，HomePage使用AnnotatedRegion来设置状态栏为SystemUiOverlayStyle.light，这样状态栏就会是透明的。BottomAppBar有一个圆形凹槽，这是通过shape属性设置的，其中CircularNotchedRectangle是Flutter提供的用于创建凸起效果的类。这个BottomAppBar包含了三个IconButton，用于导航。