1.1 简介

AppBar “应用栏”

  • 应用栏由工具栏组成,或者是工具栏和其他 widget 组合形成,例如 TabBar和FlexibleSpaceBar;
  • 应用栏通常用于 Scaffold.appBar 属性,该属性将应用栏放置在屏幕顶部的固定高度小部件中;
  • 对于可滚动的应用栏,请参阅SliverAppBar,它将AppBar嵌入 sliver 中以便在CustomScrollView中使用;

1.2 基本用法

AppBar 主要属性:

  • leading
    如果省略了 leading ,但 AppBar 在带有 Drawer 的 Scaffold 中,则会插入一个 button 以打开 Drawer。如果没有Drawer , 默认的是个返回箭头,可以通过设置来关闭automaticallyImplyLeading 为false ,
  • automaticallyImplyLeading = true:
    如果有 leading 这个不会管用 ; 如果没有leading ,当有侧边栏的时候, false:不会显示默认的图片,true 会显示 默认图片,并响应打开侧边栏的事件
  • title: 标题
  • actions,右边的icon, 一般的是icon 或者是文字
  • flexibleSpace, 在title上面的一个东西,一般无用
  • bottom, 一般就是tabbar , 也可以是别的
  • elevation, Z轴高度,也就是阴影 默认是1 默认就是有高度 阴影的
  • backgroundColor,导航栏的颜色 默认是 ThemeData 的颜色
  • brightness,状态栏的深度 有白色和黑色两种主题
  • iconTheme,
  • centerTitle, title是否居中
  • titleSpacing flexibleSpace 和 title 的距离 默认是重合的
  • NavigationToolbar.kMiddleSpacing,
  • toolbarOpacity = 1.0 导航栏的透明度
  • bottomOpacity = 1.0 bottom的透明度

Flutter-AppBar的更多相关文章

  1. Flutter AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换

    Flutter AppBar 自定义顶部按钮图 标.颜色 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用 的 logo;在其他界面通常显示为返回按钮 title 标题,通常显 ...

  2. Flutter——AppBar组件(顶部导航组件)

    AppBar组件的常用属性如下: 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 title 标题,通常显示为当前界面的标题文字,可 ...

  3. 19 Flutter 自定义AppBar 定义顶部Tab切换 底部Tab结合顶部Tab实现类似头条页面布局(27分36秒)

    Flutter AppBar自定义顶部导航按钮图标.颜色以及TabBar定义顶部Tab切换. leading:在标题前面显示的一个控件,在首页通常显示应用的logo:在其他界面通常显示为付汇按钮. t ...

  4. AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换

    一.Flutter AppBar 自定义顶部按钮图标.颜色 leading   在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 title  标题,通常显示为当 ...

  5. Flutter 控件之 AppBar 和 SliverAppBar

    AppBar 和 SliverAppBar 是纸墨设计中的 App Bar,也就是 Android 中的 Toolbar,关于 Toolbar 的设计指南请参考纸墨设计中 Toolbar 的内容. A ...

  6. 【Flutter学习】基本组件之AppBar顶部导航栏

    一,概述 AppBar 显示在app的顶部.AppBar包含5大部分,如下图: 二,构造函数及参数含义 构造函数 AppBar({ Key key, this.leading, //在标题前面显示的一 ...

  7. Flutter学习笔记(16)--Scaffold脚手架、AppBar组件、BottomNavigationBar组件

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 今天的内容是Scaffold脚手架.AppBar组件.BottomNavigationBa ...

  8. Flutter布局--appbar导航栏和状态栏

    MaterialApp 先看下上图的具体用法:1. title:标题2. actions:表示右侧的按钮的动作3. leading:表示左侧的按钮的动作4. flexibleSpace:5. back ...

  9. flutter stack嵌套,appbar透明,Container设置背景图片并且图片在appbar之下

    stack嵌套 一般情况下 stack是无法嵌套,出现stack嵌套,布局就会出乱 解决方式:就是第二个stack需要确定宽高 appbar透明 AppBar( backgroundColor: Co ...

  10. flutter 中的AppBar

    在flutter中的很多页面中,都会有下面这段代码: 对应就是下图中的红色线框区域,被称作AppBar顶部导航. 项目准备 在使用AppBar之前,我们先新建一个tabBar的项目: 然后在pages ...

随机推荐

  1. [luogu]P1041 传染病控制[dfs]

    [luogu]P1041 传染病控制 ——!x^n+y^n=z^n 题目背景 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国大范围流行,该国政府决定不惜一切代价控制传染病的 ...

  2. python两个装饰器的运算顺序

    #装饰顺序按靠近函数顺序执行,调用时由外而内,执行顺序和装饰顺序相反. def makebold(func): def wrap(): return "<i>"+fun ...

  3. SSL异常javax.net.ssl.SSLHandshakeException: Received fatal alert: handshake_failure

    jdk 7 http://www.oracle.com/technetwork/java/javase/downloads/jce-7-download-432124.html jdk 8 http: ...

  4. UNITY崩溃的日志

    有关UNITY的日志,有两个路径. 1,一般日志路径:C:/Users/xxxx/ AppData/Local/Unity/Editor,此文件夹下有三个文件 ,如下图:Editor.log, Edi ...

  5. Linux之虚拟机里的REHL7的IP

    RHEL7最小化安装之后(桥接模式),我们查看本机IP, ip addr ifconfig 我们要修改配置文件 找到目录 找到文件,用vi编辑器打开修改配置文件 保存退出后,需要重启网络服务 只有我们 ...

  6. delphi 获取文件的最新修改时间 http://www.delphitop.com/html/wenjian/64.html

    delphi 获取文件的最新修改时间 作者:admin 来源:未知 日期:2010/1/28 13:15:22 人气:1054 标签: QQ空间新浪微博腾讯微博腾讯朋友QQ收藏百度空间百度贴吧更多0 ...

  7. WPF国际化方式1之资源文件

    先看效果吧,个人觉得由于MVVM模式的UI响应属性变化的特殊机制,资源文件和内存数据都是国际化不错的选择. 1.首先准备两个资源文件用来做中文和英文的转换使用,将程序中需要转换语言都弄成两个版本,分别 ...

  8. Git004--版本回退

    Git--版本回退 本文来自于:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/ ...

  9. Java thread(4)

    这一块主要是讨论关于进程同步的相关问题,主要是考虑一下的关键字:锁对象.条件对象 -> synchronized wait() notify(). 1.关于锁对象与条件对象: 所对象的定义在ja ...

  10. 《JAVA设计模式》之备忘录模式(Memento)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述备忘录(Memento)模式的: 备忘录模式又叫做快照模式(Snapshot Pattern)或Token模式,是对象的行为模式. 备忘录 ...