本文介绍Flutter中常用按钮控件,包括:MaterialButton 、RaisedButton 、FlatButton 、IconButton 、FloatingActionButton 、OutlineButton 、ButtonBar 、lButton.icon()。
Material 组件库中提供了多种按钮组件,它们都有如下共同属性。
不同的Button拥有不同的功能,正确使用对应的Button可以事半功倍。
Button | 含义 |
---|---|
MaterialButton | 默认按钮,扁平,背景透明。按下后,会有背景色。 |
RaisedButton | "漂浮"按钮,带有阴影和背景。按下后,阴影会变大。 |
FlatButton | 扁平按钮,默认背景透明。按下后,会有背景色,与MaterialButton一致。 |
IconButton | 图标按钮,只能是纯图标,按钮不可展示文案。 |
FloatingActionButton | 浮动按钮,可显示文字和图标,二者选其一。 |
OutlineButton | 外边框按钮,可设置按钮外边框颜色。 |
ButtonBar | 水平布局的按钮容器,可放置多个Button或Text。 |
lButton.icon() | 带图标文字混合按钮,RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数,它可以轻松创建带图标和文字的按钮。 |
默认按钮,扁平,背景透明。按下后,会有背景色。 示例见图一。
new MaterialButton(
child: new Text('MaterialButton'),
onPressed: () {},
),
"漂浮"按钮,带有阴影和背景。按下后,阴影会变大。也是应用最常见的按钮。 示例见图一。
new RaisedButton(
child: new Text('RaisedButton'),
onPressed: () {},
),
扁平按钮,默认背景透明。按下后,会有背景色,与MaterialButton一致。 示例见图一。
new FlatButton(
child: new Text('FlatButton'),
onPressed: () {},
),
图标按钮,只能是纯图标,按钮不可展示文案。 示例见图一。
new IconButton(
icon: new Icon(Icons.wifi),
tooltip: 'click IconButton',
onPressed: () {},
),
浮动按钮,可显示文字和图标,二者选其一。
可在页面通过设置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: () {},
),
外边框按钮,可设置按钮外边框颜色。 示例见图二。
OutlineButton(
child: Text("OutlineButton"),
borderSide: new BorderSide(color: Colors.pink),
onPressed: () {},
),
水平布局的按钮容器,可放置多个Button或Text。 示例见图一。
new ButtonBar(
children: <Widget>[
new BackButton(),
new CloseButton(),
new Text('ButtonBar组件'),
new RaisedButton(
child: new Text('Button'),
onPressed: () {},
),
],
),
带图标文字混合按钮,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: () {},
),
示例见图二。
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: () {},
)