Flutter AppBar

Flutter 系列文章 总体目录

AppBar 显示在app的顶部。AppBar包含5大部分，如下图：

属性介绍：

leading	左上角的控件，一般放一个icon，位置如上图
title	标题，位置如上图
actions	一系列的组件，位置如上图
flexibleSpace	位置如上图
bottom	位置如上图
elevation	阴影Z轴
backgroundColor	背景颜色
brightness	亮度
iconTheme	图标样式
textTheme	字体样式
centerTitle	title是否显示在中间

return Scaffold(
      appBar: AppBar(
        leading: IconButton(icon: Icon(Icons.arrow_back), onPressed: () {}),
        title: Text('AppBar'),
        actions: [
          IconButton(icon: Icon(Icons.add), onPressed: () {}),
          IconButton(icon: Icon(Icons.dashboard), onPressed: () {}),
          IconButton(icon: Icon(Icons.cached), onPressed: () {}),
        ],
        flexibleSpace: Container(
          color: Colors.red,
        ),
        bottom: PreferredSize(
          child: Container(
            height: 50,
            width: double.infinity,
            color: Colors.grey,
            child: Text('bottom'),
          ),
          preferredSize: Size(30, 100),
        ),
      ),
    );

效果：

交流

如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。

同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。

Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。