Flutter自定义标题栏之处理状态栏高度

App在很多情况下由于各种需求需要自定义标题栏，而在能够构建Android和IOS应用的Flutter中，如果不在Scaffold中使用AppBar会发现默认是沉浸式。

猜想：我们使用自定义标题栏好像需要知道状态栏的高度，我看到网上很多人想要自定义标题栏，却老是去找怎么获取状态栏的高度

解惑：其实并不用获取状态栏的高度，你想AppBar也是状态栏，它也需要知道状态栏的高度，它需要说明Flutter已经帮我们获取到了

接下来一步一步来看

一、怎么自定义标题栏

轻车熟路的就直接看第二步

自定义MAppBar类

class MAppBar extends StatefulWidget implements PreferredSizeWidget {
  MAppBar({@required this.child}) : assert(child != null);
  final Widget child;
  @override
  Size get preferredSize {
    return new Size.fromHeight(56.0);
  }
  @override
  State createState() {
    return new MAppBarState();
  }
}
class MAppBarState extends State<MAppBar> {
  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
}

使用

class GoodsPageState extends State<GoodsPage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new MAppBar(
        child: new Text("我是标题"),
      ),
      body: new Text("我是内容"),
    );
  }
}

效果

二、增加状态栏

修改代码

class MAppBarState extends State<MAppBar> {
  @override
  Widget build(BuildContext context) {
    return new SafeArea(
      top: true,
      child: widget.child,
    );
  }
}

说明

/// Whether to avoid system intrusions at the top of the screen, typically the
/// system status bar.
final bool top;

效果

扫描二维码关注公众号，回复： 4541914 查看本文章

效果已经很明显了