你知道吗,Flutter内置了10多种Button控件
注意:无特殊说明,Flutter版本及Dart版本如下:
- Flutter版本: 1.12.13+hotfix.5
- Dart版本: 2.7.0
Flutter内置了10多种Button(按钮)类控件供我们使用,了解这些控件有助于提高我们的开发速度。
RaisedButton
RaisedButton是一个material风格”凸起“的按钮,基本用法:
RaisedButton(child: Text('Button'),onPressed: (){},
)
效果:
onPressed
为null或不设置时,按钮是禁用状态。
onHighlightChanged
为高亮变化回调,按下时处于高亮状态,抬起处于不高亮状态,用法如下:
RaisedButton(onHighlightChanged: (high){},...
)
按钮可以设置字体及各种状态颜色,总结如下:
属性 | 说明 |
---|---|
textColor | 字体颜色 |
disabledTextColor | 禁用状态下字体颜色 |
color | 背景颜色 |
disabledColor | 禁用状态下背景颜色 |
highlightColor | 高亮颜色,按下时的颜色 |
splashColor | 水波纹颜色,按下松开会有水波纹效果 |
以textColor为例,用法如下:
RaisedButton(textColor: Colors.red,...
)
也可以通过textTheme设置字体样式,用法如下:
RaisedButton(textTheme: ButtonTextTheme.primary,...
)
ButtonTextTheme的值介绍如下:
- normal:黑色或者白色字体,依赖于
ThemeData.brightness
- accent:字体颜色依赖于
ThemeData.accentColor
- primary :字体颜色依赖于
ThemeData.primaryColor
这3个值在MaterialApp控件中进行全局设置,设置如下:
MaterialApp(title: 'Flutter Demo',theme: ThemeData(primaryColor: Color(0xFF42A5F5),accentColor: Colors.yellow,brightness: Brightness.light),...
)
设置按钮阴影、高亮阴影、禁用阴影,用法如下:
RaisedButton(elevation: 5.0,highlightElevation: 5.0,disabledElevation: 5.0,...
)
shape
设置按钮的形状,比如设置为圆形,代码如下:
RaisedButton(shape: CircleBorder(),...
)
效果如下:
和hover
相关的属性是指鼠标悬停时的状态,移动端没有效果,focus
相关的属性为获取焦点时的状态。
FlatButton
FlatButton是一个扁平的按钮,用法和RaisedButton一样,代码如下:
FlatButton(child: Text('Button'),color: Colors.blue,onPressed: () {},
)
效果如下:
OutlineButton
OutlineButton 是一个带边框的按钮,用法和RaisedButton一样,代码如下:
OutlineButton(child: Text('Button'),onPressed: () {},
)
效果如下:
设置其边框样式,代码如下:
OutlineButton(borderSide: BorderSide(color: Colors.blue,width: 2),disabledBorderColor: Colors.black,highlightedBorderColor: Colors.red,child: Text('Button'),onPressed: () {},
)
效果如下:
DropdownButton
DropdownButton为下拉选择按钮,基本用法如下:
var _dropValue = '语文';_buildButton() {return DropdownButton(value: _dropValue,items: [DropdownMenuItem(child: Text('语文'),value: '语文',),DropdownMenuItem(child: Text('数学'),value: '数学'),DropdownMenuItem(child: Text('英语'),value: '英语'),],onChanged: (value){setState(() {_dropValue = value;});},);
}
items
是点击时弹出选项,onChanged
选项发生变化时回调。效果如下:
如果你对选中的选项的样式不满意,可以自定义,用法如下:
DropdownButton(selectedItemBuilder: (context){return [Text('语文',style: TextStyle(color: Colors.red),),Text('数学',style: TextStyle(color: Colors.red),),Text('英语',style: TextStyle(color: Colors.red),)];},...
)
selectedItemBuilder返回的组件要和items
中一一对应,选中样式如下:
当用户未选中时,即value 为null,显示’'请选中",用法如下:
DropdownButton(hint: Text('请选择'),value: null,...
)
效果如下:
默认情况下,下拉选项的图标是倒立的三角,也可以进行自定义,用法如下:
DropdownButton(icon: Icon(Icons.add),iconSize: 24,iconDisabledColor: Colors.red,iconEnabledColor: Colors.red,...
)
效果如下:
RawMaterialButton
RawMaterialButton是基于Semantics
, Material
和InkWell
创建的组件,它不使用当前的系统主题和按钮主题,用于自定义按钮或者合并现有的样式,而RaisedButton和FlatButton都是基于RawMaterialButton配置了系统主题和按钮主题,相关属性可以参考RaisedButton,参数基本一样,基本用法如下:
RawMaterialButton(onPressed: (){},fillColor: Colors.blue,child: Text('Button'),
)
效果如下:
PopupMenuButton
PopupMenuButton是一个菜单选中控件,用法如下:
PopupMenuButton<String>(itemBuilder: (context) {return <PopupMenuEntry<String>>[PopupMenuItem<String>(value: '语文',child: Text('语文'),),PopupMenuItem<String>(value: '数学',child: Text('数学'),),PopupMenuItem<String>(value: '英语',child: Text('英语'),),PopupMenuItem<String>(value: '生物',child: Text('生物'),),PopupMenuItem<String>(value: '化学',child: Text('化学'),),];},
)
效果如下:
设置其初始值:
PopupMenuButton<String>(initialValue: '语文',...
)
设置初始值后,打开菜单后,设置的值将会高亮,效果如下:
获取用户选择了某一项的值,或者用户未选中,代码如下:
PopupMenuButton<String>(onSelected: (value){print('$value');},onCanceled: (){print('onCanceled');},...
)
tooltip
是长按时弹出的提示,用法如下:
PopupMenuButton<String>(tooltip: 'PopupMenuButton',...
)
效果如下:
设置其阴影值、内边距和弹出菜单的背景颜色:
PopupMenuButton<String>(elevation: 5,padding: EdgeInsets.all(5),color: Colors.red,...
)
默认情况下,PopupMenuButton显示3个小圆点,我们也可以对齐进行设置,设置文字如下:
PopupMenuButton<String>(child: Text('学科'),...
)
child
组件将会被InkWell包裹,点击弹出菜单,效果如下:
也可以设置其他图标:
PopupMenuButton<String>(icon: Icon(Icons.add),...
)
效果如下:
设置弹出菜单边框:
PopupMenuButton<String>(shape: RoundedRectangleBorder(side: BorderSide(color: Colors.red),borderRadius: BorderRadius.circular(10)),...
)
效果如下:
IconButton
IconButton是一个图标按钮,用法如下:
IconButton(icon: Icon(Icons.person),iconSize: 30,color: Colors.red,onPressed: () {},
)
设置提示属性:
IconButton(tooltip: '这是一个图标按钮',icon: Icon(Icons.person),iconSize: 30,color: Colors.red,onPressed: () {},
)
当长按时显示提示,效果如下:
BackButton
BackButton是一个material风格的返回按钮,本身是一个IconButton,点击时默认执行Navigator.maybePop
即如果路由栈有上一页则返回到上一页。
BackButton()
Android和IOS平台显示的图标是不一样的,ios效果如下:
Android效果如下:
CloseButton
CloseButton是一个material风格的关闭按钮,本身是一个IconButton,点击时默认执行Navigator.maybePop
即如果路由栈有上一页则返回到上一页。
和BackButton适用场景不同,BackButton适用于全屏的页面,而CloseButton适用于弹出的Dialog。
用法如下:
CloseButton()
效果如下:
ButtonBar
ButtonBar并不是一个单独的按钮控件,而是末端对齐的容器类控件,当在水平方向上没有足够空间时候,按钮将整体垂直排列,而不是换行。基本用法如下:
ButtonBar(children: <Widget>[RaisedButton(),RaisedButton(),RaisedButton(),RaisedButton(),],
)
效果如下:
设置主轴的对齐方式及主轴的尺寸:
ButtonBar(alignment: MainAxisAlignment.center,mainAxisSize: MainAxisSize.max,...
)
效果如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ufxm8FOn-1584782331553)(/Users/mengqingdong/Library/Application Support/typora-user-images/image-20200315172816904.png)]
ToggleButtons
ToggleButtons组件将多个组件组合在一起,并让用户从中选择,ToggleButtons基础用法如下:
List<bool> _selecteds = [false, false, true];
ToggleButtons(isSelected: _selecteds,children: <Widget>[Icon(Icons.local_cafe),Icon(Icons.fastfood),Icon(Icons.cake),],onPressed: (index) {setState(() {_selecteds[index] = !_selecteds[index];});},);
isSelected
属性是bool类型集合,数量和children的数量一致,onPressed
是点击回调,这时就有了不错了切换按钮行,效果如下:
我们还可以自定义外观,比如设置按钮的颜色:
ToggleButtons(color: Colors.green,selectedColor: Colors.orange,fillColor: Colors.red,...
)
效果如下:
fillColor
是选中按钮的背景颜色。
如果不需要边框,可以将renderBorder
设置为false:
ToggleButtons(renderBorder: false,
)
效果如下:
当然我们也可以设置边框的圆角半径、宽度、颜色等:
ToggleButtons(borderRadius: BorderRadius.circular(30),borderColor: Colors.orange,borderWidth: 3,selectedBorderColor: Colors.deepOrange,
)
效果如下:
甚至可以设置点击水波纹颜色(splashColor)和按下时的高亮颜色(highlightColor):
ToggleButtons(splashColor: Colors.purple,highlightColor: Colors.yellow,)
效果如下:
如果按钮处于禁用状态,可以设置禁用状态下按钮及边框的颜色:
ToggleButtons(onPressed: null,disabledColor: Colors.grey[300],disabledBorderColor: Colors.blueGrey,)
效果如下:
如果开发的是web程序,我们可以设置鼠标悬停颜色:
ToggleButtons(hoverColor: Colors.cyan,)
交流
如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。
你知道吗,Flutter内置了10多种Button控件相关推荐
- ASP.NET内置的6种验证控件的使用
ASP.NET控件验证 ASP.NET内置的验证控件有以下6种: RequiredFieldValidator控件 CompareValidator控件 RangeValidator控件 Regula ...
- 【Flutter】Icons 组件 ( 加载 Flutter 内置的图标 | 材料设计图标完整展示 )
文章目录 一.加载 Flutter 内置的图标 三.完整代码示例 三.相关资源 四.Icons 图标参考 ( 超长截图 | 材料设计图标完整展示 ) 一.加载 Flutter 内置的图标 Flutte ...
- Vue.js 内置了10个过滤器,下面简单介绍它们的功能和用法。
Vue.js 内置了10个过滤器,下面简单介绍它们 的功能和用法. ①capitalize:字符串首字符转化成大 写 ②uppercase:字符串转化成大写 ③lowercase :字符串转化成小写 ...
- flutter笔记4:使用material原生控件开发一个APP
接着上一篇,我们做一个这样的APP: 开始之前,我发现了一个好玩的东西,每次我们在终端中输入命令: flutter run 终端里会有这个东西: 按照上图所示,我们的进入这个网页看看是个啥: 好高大上 ...
- Flutter学习指南:UI布局和控件,作为Android开发者
showDialog( // 第一个 context 是参数名,第二个 context 是 State 的成员变量 context: c ...
- Flutter自定义控件第一式,炫酷“蛛网”控件
前言 「万物之中,希望至美」,<肖生克的救赎>这句话一直记在心里,不论生活多么不易,心有希望,生活一定会越来越好. 「 Hope is a good thing , maybe the b ...
- Flutter进阶实战 17-20 轻提示ToolTip控件实例
前言: 轻提示的效果在应用中式少不了的,其实Flutter已经准备好了轻提示控件,这就是toolTip. 实现效果: 知识点: 轻量级操作提示 其实Flutter中有很多提示控件,比如Dialog.S ...
- cocosstudio3.10版本 Armature控件(关于cocous2D游戏制作中使用特效的一种方法)
1.在cocosstudio1.6版本之前可以导入flash制作的动画,然后通过cocosstudio1.6导出,导出的资源中我们需要使用的就是ExportJson文件以及一张plist和png图集 ...
- python中chr函数的用法_【转】Python内置函数(10)——chr
英文文档: chr(i) Return the string representing a character whose Unicode code point is the integeri. Fo ...
最新文章
- 如何设置网页自动刷新(JSP,JS,HTML)
- git常见操作--忽略文件以及常用命令【转】
- 我人生的第一个博客,真正的博客。
- python编程 语言-python编程语言有什么用途
- Python报错:The truth value of an array with more than one element is ambiguous
- 仿射变换和射影变换、等距变换、相似变换
- wmv格式转html格式转换器,iPixSoft SWF to HTML5 Converter
- 一起talk C栗子吧(第三十九回:C语言实例--创建一棵二叉树)
- 搜狗拼音输入法4.2_巧用搜狗快速输入特殊字符与表情字符画
- JAVA微信小程序医院预约挂号小程序系统毕业设计 开题报告
- 2019年DevOps最新现状研究报告解读
- 腾讯ai开放平台(智能闲聊)sdk----- python3.X
- Vue+vant使用uploader上传图片
- 微商是如何推广的呢?
- 【数据结构】 最小生成树(四)——利用kruskal算法搞定例题×3+变形+一道大水题...
- CSDN发文章显示超时请重试
- Project 2013项目管理教程(2):project基础操作概述
- 字体在ppt中可以整体替换吗_如何批量替换PPT中的字体?
- 计算机windows错误恢复,Win7系统出现Windows错误恢复该怎么办?
- algorithm头文件下的常用函数-学习笔记
热门文章
- MFC 使用 ADO技术连接Access数据库
- smart gesture安装失败_手把手,嘴对嘴,讲解硬盘SMART信息
- Arch安装kde后图形软件商店无法使用解决方案
- 双三次B样条曲面及其微分几何基本量计算
- AI智能交易,EA量化交易,可以代替人工有稳定的收益吗?
- 2006世界杯32强人体彩绘队服样式(法国)
- jxls模板hashmap_JXLS 2.4.0系列教程(五)——更进一步的应用和页面边距bug修复
- win7 计算机里显示视频,usb视频设备-在win7中,USB视频设备怎么显示啊 – 手机爱问...
- python内置函数可以返回序列中的最大元素_Python内置函数__用来返回序列中的最小元素...
- 【信息系统项目管理师教程(第4版)】目录(附大纲)