Flutter 基础Widgets之AppBar详解
概述
AppBar Material风格应用栏,有工具栏和其他的Widget构成 应用栏通常用于Scaffold.appBar属性,该属性将应用栏放置在屏幕顶部的固定高度小部件中。对于可滚动的应用栏,请参阅SliverAppBar,它将一个AppBar嵌入到一个条子中,以便在CustomScrollView中使用。
appBar构造函数
AppBar({Key key,this.leading,this.automaticallyImplyLeading = true,this.title,this.actions,this.flexibleSpace,this.bottom,this.elevation,this.backgroundColor,this.brightness,this.iconTheme,this.textTheme,this.primary = true,this.centerTitle,this.titleSpacing = NavigationToolbar.kMiddleSpacing,this.toolbarOpacity = 1.0,this.bottomOpacity = 1.0,})
复制代码
- leading 在title组件前面的组件,一般是一个图标按钮,比如一个抽屉按钮
- automaticallyImplyLeading 配合leading使用,取决于automaticallyImplyLeading == true && leading ==null 此时会自动做出一些哈事情
- title appBar的主要部件,类型为Widget,一般显示文本
- actions title之后显示的部件,其实这样看来,Appbar可以看成一个Row (children: [])布局
- flexibleSpace 也是一个Widgets,不过好像有一些定义的Widgets 实在不知道怎么用,因为感觉大量重复
- bottom 这个小部件出现在应用程序栏的底部。 通常是一个TarBar,即一个标签栏
- elevation 控制下方阴影栏的坐标
- backgroundColor 背景颜色
- brightness 应用栏材质的亮度
- iconTheme icon主题设置
- textTheme 文本主题设置
- primary appbar是否显示在任务栏顶部
- centerTitle title是否居中 实测没变化
- titleSpacing 横轴上围绕title内容的间距 0.0即占据所有有用空间
- toolbarOpacity 应用程序栏的工具栏的透明程度。值1.0是完全不透明的,值0.0是完全透明的
- toolbarOpacity appBar底部透明度,设置方式同toolbarOpacity
实例-实现一个带抽屉的云盘搜索界面
class AppBarLearn extends StatelessWidget {@overrideWidget build(BuildContext context) {return new DefaultTabController(length: 3,child: new Scaffold(// AppBar Material 应用栏,有工具栏和其他的Widget构成 应用栏通常用于Scaffold.appBar属性,// 该属性将应用栏放置在屏幕顶部的固定高度小部件中。对于可滚动的应用栏,// 请参阅SliverAppBar,它将一个AppBar嵌入到一个条子中,以便在CustomScrollView中使用。appBar: AppBar(// leading: ,// 现在标题前面的Widget,一般为一个图标按钮,也可以是任意Widgetleading: Builder(builder: (BuildContext context) {return IconButton(icon: const Icon(Icons.menu),// 如果有抽屉的话的就打开onPressed: () {Scaffold.of(context).openDrawer();},// 显示描述信息tooltip:MaterialLocalizations.of(context).openAppDrawerTooltip,);},),// 配合leading使用,取决于automaticallyImplyLeading == true && leading ==null ,此时会自动做出一些哈事情。automaticallyImplyLeading: true,// appBar的主要部件,类型为Widget,那么尝试做成输入框?title: TextField(// 光标颜色cursorColor: Colors.blueGrey),// title之后显示的部件,其实这样看来,Appbar可以看成一个Row (children: <Widget>[])布局actions: <Widget>[Container(padding: EdgeInsets.only(right: 16),child: Icon(Icons.search),),],// 也是一个Widgets,不过好像有一些定义的Widgets 实在不知道怎么用,应为感觉大量重复,flexibleSpace: FlexibleSpaceBar(title: Text('')),// 这个小部件出现在应用程序栏的底部。 通常是一个TarBar,即一个标签栏bottom: new TabBar(tabs: <Widget>[new Tab(icon: Icon(Icons.cloud_done)),new Tab(icon: Icon(Icons.cloud_download)),new Tab(icon: Icon(Icons.cloud_upload)),]),// 控制下方阴影栏的坐标elevation: 4.0,// 背景颜色backgroundColor: Colors.blueAccent,// 应用栏材质的亮度。brightness: Brightness.light,// icon主题设置iconTheme: IconThemeData(),// 文本主题设置textTheme: TextTheme(),// appbar是否显示在任务栏顶部primary: true,// title是否居中 实测没变化centerTitle: true,// 横轴上围绕title内容的间距 0.0即占据所有有用空间titleSpacing: 0.0,// 应用程序栏的工具栏部分是多么不透明。值1.0是完全不透明的,值0.0是完全透明的。toolbarOpacity: 1,// appabr底部透明度,设置方式同toolbarOpacitybottomOpacity: 1,),body: new TabBarView(children: <Widget>[new Icon(Icons.cloud_done, size: 100),new Icon(Icons.cloud_download, size: 100),new Icon(Icons.cloud_upload, size: 100),]),// 定义一个空抽屉drawer: Drawer(),));}
}复制代码
实现效果:
转载于:https://juejin.im/post/5cc31c216fb9a0321d73b131
Flutter 基础Widgets之AppBar详解相关推荐
- LSTM入门必读:从入门基础到工作方式详解 By 机器之心2017年7月24日 12:57 长短期记忆(LSTM)是一种非常重要的神经网络技术,其在语音识别和自然语言处理等许多领域都得到了广泛的应用
LSTM入门必读:从入门基础到工作方式详解 By 机器之心2017年7月24日 12:57 长短期记忆(LSTM)是一种非常重要的神经网络技术,其在语音识别和自然语言处理等许多领域都得到了广泛的应用. ...
- 【Java基础】HashMap原理详解
[Java基础]HashMap原理详解 HashMap的实现 1. 数组 2.线性链表 3.红黑树 3.1概述 3.2性质 4.HashMap扩容死锁 5. BATJ一线大厂技术栈 HashMap的实 ...
- 电子元器件从入门到精通pdf_电子元件入门基础,常用电子元器件详解大全作用-涨知识必读...
1.电子元器件筛选的必要性 电子元器件的固有可靠性取决于产品的可靠性设计, 在产品的制造过程中, 由于人为因素或原材料. 工艺条件. 设备条件的波动, 最终的成品不可能全部达到预期的固有可靠性. 在每 ...
- ELKElasticSearch5.1基础概念及配置文件详解【转】
1. 配置文件 elasticsearch/elasticsearch.yml 主配置文件 elasticsearch/jvm.options jvm参数配置文件 elasticsearch/log4 ...
- linux下mysql数据库基础及客户端命令详解
linux下mysql数据库基础及客户端命令详解 1.mysql数据库存储引擎: SHOW ENGINES; #查看mysql支持的存储引擎 常见有如下两个存储引擎: MyISAM:每表三个文件: ...
- python装饰器详解-Python装饰器基础概念与用法详解
本文实例讲述了Python装饰器基础概念与用法.分享给大家供大家参考,具体如下: 装饰器基础 前面快速介绍了装饰器的语法,在这里,我们将深入装饰器内部工作机制,更详细更系统地介绍装饰器的内容,并学习自 ...
- 英语词源基础之后缀-ion详解: -ion,-tion,-ction,-ption,-ation,-ition的区别
英语词源基础之后缀-ion详解 来自古法语名词后缀-ion,表情况或状态,来自拉丁语名词后缀-io的宾格形式-ionem,表情况或状态,来自词干元音i+onem. 在拼写上,该后缀在英语中包括拼写形式 ...
- 学计算机基础word题,大学计算机基础word练习题及详解答案.doc
大学计算机基础word练习题及详解答案 操作要求 1. 对正文进行排版,其中: (1)章名使用样式"标题1",并居中: 编号格式为:第X章,其中X为自动排序.(本小题1分) (2) ...
- 【C语言网】C语言基础题集训练详解(一)
[C语言网]基础题集训练详解(一) 题目目录 [C语言网]基础题集训练详解(一) 前言 一.题目1000 [竞赛入门]简单的a+b 二. 题目1001 [编程入门]第一个HelloWorld程序 三. ...
最新文章
- AgentJob--修改操作系统时间对Job的影响
- input type=file /,美化自定义上传按钮
- 2021-04-05 Python tqdm显示代码任务进度
- js函数 every some map ()=a+b;
- 看完这篇Redis缓存三大问题,保你能和面试官互扯。
- (译)元素浮动的那些事儿
- linux视音频解码教程,音视频编解码:NVIDIA Jetson Linux Multimedia API(总结)
- 【渝粤题库】陕西师范大学202231财务管理Ⅰ 作业(高起专)
- 配置gitlab通过smtp发送邮件
- 华为P50系列开始量产:Pro+版或进一步延期
- 一粒云盘发布v3.5版本
- 计算机二级资料汇总,包含多个题库
- ABAQUS 有限元仿真分析软件模块介绍
- 逻辑为基、数企赋能(NO.9)—企业运营体系顶层逻辑之困
- 淘宝口令生成器,批量生成
- HBuilder(H5+App)中集成腾讯云通信IM功能
- Testing Types - 读书笔记
- sdkman的介绍、安装及使用
- 林肯公园跑步歌单:摇滚助力跑出一道光
- 【已解决】Spring容器中找不到ServletWebServerFactory类出现的异常
热门文章
- 006_JDK的Number派生类对Comparable接口的实现
- 020_Jedis的Set数据类型
- 073_html5视频
- 为什么java可跨平台执行,java为什么可以跨平台执行
- java 遍历写什么_Java文件遍历及文件读写
- ios12关闭设置角标_iOS 12.4 正式推送,一键换机功能上线!
- c语言筛选法_极少数人用过的另类素数求解法,C语言经典算法之筛选法求质数...
- trunc 文字与格式与字符串不符_EXCEL字符串中间数字提取进阶
- 如何用java创建超链接_Java如何在PPT中的幻灯片上创建超链接?
- 用c语言描述单链表的数据类型,数据结构—单链表(类C语言描述)