Flutter AppBar

Flutter 系列文章 总体目录

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)。

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

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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值