Flutter | 自定义 AppBar

对于简单的自定义 AppBar，使用系统提供的 AppBar，给 title 赋值 widget 就够用了:

class _ScaffoldDemoPage3State extends State<ScaffoldDemoPage3> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // title是个widget，一般的自定义appbar可以通过这里处理
        title: Container(
          alignment: Alignment.center,
          width: 200,
          height: 30,
          color: Colors.red,
          child: Text(
            '自定义appbar',
            style: TextStyle(fontSize: 14),
          ),
        ),
      ),
    );
  }
}

效果：

如果想完全自定义 AppBar，不使用系统的 AppBar，那么可以参考系统的 AppBar。

不用它，但可以向它学习。

这是系统 AppBar 的源码：

class AppBar extends StatefulWidget implements PreferredSizeWidget {}

哦，不，是类定义。

有了这一句类定义代码就足够了。

剩下的都是常规操作了。

比如下面这个自定义导航栏：

代码：

class _ScaffoldDemoPage4State extends State<ScaffoldDemoPage4> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _MyAppBar(),
    );
  }
}

class _MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  const _MyAppBar({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: ScreenUtil.topPadding, left: 20, right: 20),
      alignment: Alignment.center,
      color: Colors.blue,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            width: 30,
            height: 30,
            color: Colors.yellow,
          ),
          Text(
            '完全自定义的导航栏',
            style: TextStyle(fontSize: 16),
          ),
          Container(
            width: 30,
            height: 30,
            color: Colors.red,
          ),
        ],
      ),
    );
  }

  @override
  Size get preferredSize => Size(
      ScreenUtil.screenWidth, ScreenUtil.appBarHeight + ScreenUtil.topPadding);
}

标签：自定义,AppBar,30,ScreenUtil,extends,override,Flutter
来源： https://blog.csdn.net/m0_59449563/article/details/121121335