Flutter--自定义AppBar

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {

  final Widget child;

  CustomAppBar(this.child);

  @override
  Widget build(BuildContext context) {
    return child;
  }

  @override
  Size get preferredSize => Size(100, 100);
}



//有特殊复杂的也可用StatefulWidget来解决

class CustomAppBar extends StatefulWidget implements PreferredSizeWidget {

  final Widget child;

  CustomAppBar(this.child);

  @override
  State<StatefulWidget> createState() => _CustomAppBarState();

  @override
  Size get preferredSize => Size(100, 50);  //写啥没差，自动采用子视图尺寸

}

class _CustomAppBarState extends State<CustomAppBar> {
  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
}

实例

//使用自定义的AppBar要注意在背景装饰层里使用一个SafeArea来保证子元素别顶到信息栏

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(Container(
        color: Colors.red,
        child: SafeArea(child: Row(children: [
          BackButton()
        ], crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,)),
      )),
      body: Text("data")
    );
  }