Flutter AppBar

Flutter AppBar

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

在这里插入图片描述

属性介绍:

leading左上角的控件,一般放一个icon,位置如上图
title标题,位置如上图
actions一系列的组件,位置如上图
flexibleSpace位置如上图
bottom位置如上图
elevation阴影Z轴
backgroundColor背景颜色
brightness亮度
iconTheme图标样式
textTheme字体样式
centerTitletitle是否显示在中间
return Scaffold(
      appBar: AppBar(
        leading: IconButton(icon: Icon(Icons.arrow_back), onPressed: () {}),
        title: Text('AppBar'),
        actions: <Widget>[
          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)。

同时也