Flutter Button(按钮控件)
本文介绍Flutter中常用按钮控件,包括:MaterialButton 、RaisedButton 、FlatButton 、IconButton 、FloatingActionButton 、OutlineButton 、ButtonBar 、lButton.icon()。
Material 组件库中提供了多种按钮组件,它们都有如下共同属性。
- 按下时都会有“水波动画”(又称“涟漪动画”,就是点击时按钮上会出现水波荡漾的动画)。
- 有一个onPressed属性来设置点击回调,当按钮按下时会执行该回调,如果不提供该回调则按钮会处于禁用状态,禁用状态不响应用户点击。
1、按钮点击示例
2、按钮类型已经含义
不同的Button拥有不同的功能,正确使用对应的Button可以事半功倍。
Button |
含义 |
---|---|
MaterialButton |
默认按钮,扁平,背景透明。按下后,会有背景色。 |
RaisedButton |
"漂浮"按钮,带有阴影和背景。按下后,阴影会变大。 |
FlatButton |
扁平按钮,默认背景透明。按下后,会有背景色,与MaterialButton一致。 |
IconButton |
图标按钮,只能是纯图标,按钮不可展示文案。 |
FloatingActionButton |
浮动按钮,可显示文字和图标,二者选其一。 |
OutlineButton |
外边框按钮,可设置按钮外边框颜色。 |
ButtonBar |
水平布局的按钮容器,可放置多个Button或Text。 |
lButton.icon() |
带图标文字混合按钮,RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数,它可以轻松创建带图标和文字的按钮。 |
3、按钮使用示例
3.1、MaterialButton
默认按钮,扁平,背景透明。按下后,会有背景色。 示例见图一。
new MaterialButton(
child: new Text('MaterialButton'),
onPressed: () {},
),
3.2、RaisedButton
"漂浮"按钮,带有阴影和背景。按下后,阴影会变大。也是应用最常见的按钮。 示例见图一。
new RaisedButton(
child: new Text('RaisedButton'),
onPressed: () {},
),
3.3、FlatButton
扁平按钮,默认背景透明。按下后,会有背景色,与MaterialButton一致。 示例见图一。
new FlatButton(
child: new Text('FlatButton'),
onPressed: () {},
),
3.4、IconButton
图标按钮,只能是纯图标,按钮不可展示文案。 示例见图一。
new IconButton(
icon: new Icon(Icons.wifi),
tooltip: 'click IconButton',
onPressed: () {},
),
3.5、FloatingActionButton
浮动按钮,可显示文字和图标,二者选其一。
可在页面通过设置floatingActionButton
来指定页面悬浮按钮,默认在右下角。
示例见图二。
appBar: new AppBar(
title: new Text("按钮控件"),
),
floatingActionButton: new FloatingActionButton(
child: new Icon(Icons.add_a_photo),
// child: new Text('FloatingActionButton'),
tooltip: 'click FloatingActionButton',
onPressed: () {},
),
3.6、OutlineButton
外边框按钮,可设置按钮外边框颜色。 示例见图二。
OutlineButton(
child: Text("OutlineButton"),
borderSide: new BorderSide(color: Colors.pink),
onPressed: () {},
),
3.7、ButtonBar
水平布局的按钮容器,可放置多个Button或Text。 示例见图一。
new ButtonBar(
children: <Widget>[
new BackButton(),
new CloseButton(),
new Text('ButtonBar组件'),
new RaisedButton(
child: new Text('Button'),
onPressed: () {},
),
],
),
3.8、Button.icon
带图标文字混合按钮,RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数,它可以轻松创建带图标和文字的按钮。 示例见图二。
RaisedButton.icon(
icon: Icon(Icons.send),
label: Text("发送"),
onPressed: () {},
),
OutlineButton.icon(
icon: Icon(Icons.add),
label: Text("添加"),
onPressed: () {},
),
FlatButton.icon(
icon: Icon(Icons.info),
label: Text("详情"),
onPressed: () {},
),
3.8、自定义Button样式
示例见图二。
FlatButton(
color: Colors.blue,
highlightColor: Colors.blue[700],
colorBrightness: Brightness.dark,
splashColor: Colors.grey,
child: Text("Submit"),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
onPressed: () {},
)
4、效果图
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 突发!Windows XP 源代码泄露
- SAP Spartacus打印Occ endpoint请求的url
- 线上发生死锁异常了,该怎么办
- jQuery 元素操作
- jQuery 文本属性值
- jQuery 属性操作
- 方老师聊Nginx知识点
- 《Java从入门到失业》第五章:继承与多态(5.1-5.7):继承
- 【赵渝强老师】Flink的DataSet算子
- Node.js 案发现场揭秘 —— 文件句柄泄露导致进程假死
- nacos配置问题
- Chevereto 配合 Picgo 打造个人相册/图床解决方案
- 从提高 Elasticsearch 搜索体验说开去......
- 又一个奇葩要求,Python是如何将“中文”转“拼音”的?
- localStorage中怎么存对象?