Flutter | 自定义 AppBar

wuchangjian2021-11-03 15:28:39编程学习

对于简单的自定义 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

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

这是系统 AppBar 的源码:

class AppBar extends StatefulWidget implements PreferredSizeWidget {}

哦,不,是类定义。

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

剩下的都是常规操作了。

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

appbar

代码:

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

相关文章

统计学习基础——第五章 重抽样

  目录 一、重抽样 1、概念 2、用途 3、缺点 4、方法 二、交叉验证...

UI的咆哮:你是闭着眼睛写代码的吗?

UI的咆哮:你是闭着眼睛写代码的吗?

在以前,要做好设计还原其实非常繁琐,我自己也用过又换过不少工...

DOS命令打开一个软件,以及在python中的使用

以edge浏览器为例: 其路径为:  C:\Progra...

【无标题】逻辑回归代价函数的推导过程

【无标题】逻辑回归代价函数的推导过程

逻辑回归代价函数的推导过程 1、代价函数 在篇文章中,我们要介绍如何拟...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。