共计 3228 个字符,预计需要花费 9 分钟才能阅读完成。
Button
Material widget 库中提供了多种按钮 Widget 如 RaisedButton、FlatButton、OutlineButton 等,它们都是直接或间接对 RawMaterialButton 的包装定制,所以他们大多数属性都和 RawMaterialButton 一样。在介绍各个按钮时我们先介绍其默认外观,而按钮的外观大都可以通过属性来自定义,我们在后面统一介绍这些属性。另外,所有 Material 库中的按钮都有如下相同点:
- 按下时都会有“水波动画”。
- 有一个 onPressed 属性来设置点击回调,当按钮按下时会执行该回调,如果不提供该回调则按钮会处于禁用状态,禁用状态不响应用户点击。
RaisedButton
RaisedButton 是一种有“漂浮”效果的按钮,这种按钮默认有阴影和灰色背景,同时,按下后,阴影还会逐渐变深。
RaisedButton(onPressed: () {}, | |
child: Text("基本"), | |
), | |
RaisedButton(onPressed: () {}, | |
child: Text("textColor 文本的颜色,color 背景颜色,highlightColor 按钮按下的颜色"), | |
textColor: Colors.white, | |
color: Colors.pink, | |
highlightColor: Colors.blue, | |
), | |
RaisedButton(child: Text("disabledTextColor 禁用时文本颜色,disabledColor 禁用时背景颜色"), | |
disabledTextColor: Colors.white, | |
disabledColor: Colors.green, | |
), | |
RaisedButton(onPressed: () {}, | |
child: Text("splashColor 水波的颜色"), | |
splashColor: Colors.red, | |
), | |
RaisedButton(onPressed: () {}, | |
child: Text("colorBrightness 按钮主题高亮 Brightness.light"), | |
colorBrightness: Brightness.light, | |
), | |
RaisedButton(onPressed: () {}, | |
child: Text("colorBrightness 按钮主题高亮 Brightness.dark"), | |
colorBrightness: Brightness.dark, | |
), | |
RaisedButton(onPressed: () {}, | |
child: Text("elevation 按钮下面的阴影"), | |
elevation: 10.0, | |
), | |
RaisedButton(onPressed: () {}, | |
child: Text("highlightElevation 高亮时候的阴影"), | |
highlightElevation: 5, | |
), | |
RaisedButton(onPressed: () {}, | |
child: Text("disabledElevation 按下的时候的阴影"), | |
disabledElevation: 5.0, | |
), | |
RaisedButton(onPressed: () {}, | |
child: Text("onHighlightChanged 水波纹高亮变化回调, 按下返回 true, 抬起返回 false"), | |
onHighlightChanged: (bool b) {print(b); | |
}, | |
), |
效果如下:
说明:
- textColor:文字的颜色
- color:按钮的背景颜色
- highlightColor:按钮按下时的颜色
- disabledTextColor:禁用时文本颜色
- disabledColor:禁用时的背景颜色
- splashColor:水波的颜色
- colorBrightness:按钮主题,默认浅色
- elevation:按钮下面的阴影
- highlightElevation:高亮时候的阴影
- disabledElevation:按下的时候的阴影
- onHighlightChanged:水波纹高亮变化回调, 按下返回 true,抬起返回 false
FlatButton
与 RaisedButton 相反,FlatButton 是一种扁平风格的按钮,默认情况下,背景透明并不带阴影,按下后会有背景色:
FlatButton(onPressed: () => {}, | |
child: Text("FlatButton,默认没有阴影和背景色,其他属性和 RaisedButton 一样"), | |
), |
效果如下:
OutlineButton
OutlineButton 是带边框的按钮,默认情况下,没有阴影且背景透明,按下之后,边框的颜色会变亮,同时出现背景和阴影:
OutlineButton(onPressed: () => {}, | |
child: Text("normal",), | |
highlightColor: Colors.blue, | |
highlightedBorderColor: Colors.black, | |
disabledBorderColor: Colors.green, | |
textColor: Colors.red, | |
borderSide: BorderSide( | |
color: Colors.blue, | |
width: 2.0, | |
style: BorderStyle.solid, | |
), | |
) |
说明:
- color 属性无效
-
borderSide:用于设置边框样式,配置项如下:
- color:边框颜色
- width:边框粗细
- style:边框样式,只有 none 和 solid
- disabledBorderColor:禁用下的边框颜色
- highlightedBorderColor:高亮下的边框颜色
IconButton
IconButton 顾名思义,带有 icon 的按钮,不包括文字,默认没有背景,点击后会出现背景:
IconButton(icon: Icon(Icons.volume_up), | |
tooltip: '音量增大 10%', | |
onPressed: () {}, | |
), |
效果如下:
说明:
- tooltip:长按按钮之后的信息提示
- icon:在按钮内显示的图标
- iconSize:图标大小
自定义按钮外观
定义一个背景蓝色,两边圆角的按钮:
RaisedButton( | |
color: Colors.blue, | |
highlightColor: Colors.blue[700], | |
colorBrightness: Brightness.dark, | |
splashColor: Colors.grey, | |
child: Text("Submit"), | |
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0), | |
), | |
onPressed: () => {}, | |
) |
效果如下:
说明:
在上面的代码中,我们主要通过 shape 来指定其外形为一个圆角矩形。因为按钮背景是蓝色 (深色),我们需要指定按钮主题 colorBrightness 为 Brightness.dark,这是为了保证按钮文字颜色为浅色。
按钮的大小
在以上介绍的这些 button 组件中,都不能设置其宽度和高度。想要设置其大小,我们可以通过 Container 容器来完成:
Container( | |
width: 100.0, | |
height: 50.0, | |
child: RaisedButton( | |
color: Colors.blue, | |
highlightColor: Colors.blue[700], | |
colorBrightness: Brightness.dark, | |
child: Text("Submit"), | |
splashColor: Colors.grey, | |
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(100.0), | |
), | |
onPressed: () => {}, | |
), | |
), |
效果如下:
说明:
Container 容器组件是专门用来控制大小的,我们会在后面的章节中详细介绍。