flutter 自定义AppBar

2,242 阅读1分钟

点开Scaffold 可以查看到appBar 是 PreferredSizeWidget类型,PreferredSizeWidget 是一个抽象类

image.png

如果我们想修改appBar的尺寸就可以通过 preferredSize 这个抽象方法 自定义appBar的尺寸

class MissAppBar extends StatelessWidget implements PreferredSizeWidget {
  final VoidCallback setting;

  const MissAppBar({
    Key? key,
    required this.setting,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      backgroundColor: Colors.cyan,
      foregroundColor: Colors.orange,
      centerTitle: true,
      title: const Text("诉念"),
      actions: [
        IconButton(
          onPressed: setting,
          icon: const Icon(Icons.settings),
        )
      ],
    );
  }
  @override
  Size get preferredSize => const Size(100,100);  
  }

还可以不使用AppBar 使用 PreferredSize来布局appBar 使用这个组件就可以传入自己自定义的child,拥有appBar自由,想怎么写布局都可以。

appBar: PreferredSize(
preferredSize: const Size(200,200),
child: Container(
  width: double.infinity,
  height: double.infinity,
  color: Colors.deepPurpleAccent.withOpacity(0.5),
  child: Row(
    children: [
      Expanded(
        child: GestureDetector(
          child: Text("返回"),
        ),
      ),
      Expanded(child: Text("  诉念")),

      GestureDetector(
        child: const Icon(
          Icons.settings,
          size: 25,
        ),
      ),
    ],
  ),
),
),

image.png

PreferredSize也很简单,只是继承了 StatelessWidget implements PreferredSizeWidget, 思考PreferredSize为什么不能直接继承 PreferredSizeWidget 来修改尺寸,返回自己的appBar呢?

当我直接继承PreferredSizeWidget 我需要复写9个上层未实现的方法,明明 PreferredSizeWidget 和 StatelessWidget 都是一样继承 widget

通过张老师的梦始之地的小册中介绍的抽象类的特性我们就可以知道

小册章节==>juejin.cn/book/684473…

实现类必须实现上层所有未实现方法,implements是支持多实现的,所以需要覆写全部方法,不然调用中可能出现歧义,当我继承StatelessWidget 再 implements PreferredSizeWidget 只需要实现一个抽象方法

image.png

因为在StatelessWidget内部已经帮我实现了其他的抽象方法,

image.png image.png