Flutter--自定义AppBar

最新推荐文章于 2025-03-31 11:56:46 发布

原创最新推荐文章于 2025-03-31 11:56:46 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

flutter开发专栏收录该内容

44 篇文章

订阅专栏

本文介绍了如何在Flutter中创建自定义AppBar，包括使用StatelessWidget和StatefulWidget两种方式，并强调了在背景装饰层中使用SafeArea的重要性，确保内容不被信息栏遮挡。示例代码展示了自定义AppBar的构建过程及其在Scaffold中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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")
    );
  }