Flutter 封装可自定义样式的沉浸式导航栏 NavigationBar

navigation_bar.dart

// 提供设置状态栏样式的枚举
enum StatusStyle { DARK_CONTENT, LIGHT_CONTENT }

class NavigationBar extends StatelessWidget {
  final StatusStyle statusStyle; // 状态栏样式
  final Color color;
  final double height; // 导航栏的高度
  final Widget child; // 外部传入的自定义 Widget

  const NavigationBar(
      {Key key,
      this.statusStyle = StatusStyle.DARK_CONTENT,
      this.color = Colors.white,
      this.height = 46,
      this.child})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    _statusBarInit();
    // 状态栏高度
    var top = MediaQuery.of(context).padding.top;
    return Container(
      width: MediaQuery.of(context).size.width,
      // 屏幕宽度
      height: top + height,
      // 导航栏高度
      child: child,
      padding: EdgeInsets.only(top: top),
      decoration: BoxDecoration(color: color),
    );
  }

  void _statusBarInit() {
    // 沉浸式状态栏样式
    FlutterStatusbarManager.setColor(color, animated: false);
    FlutterStatusbarManager.setStyle(statusStyle == StatusStyle.DARK_CONTENT
        ? StatusBarStyle.DARK_CONTENT
        : StatusBarStyle.LIGHT_CONTENT);
  }
}

如何使用

NavigationBar(
      height: 50,
      child: _appBar(), // 自定义 Widget
      color: Colors.white,
      statusStyle: StatusStyle.DARK_CONTENT)