Flutter 里有很多的 Button 组件很多，常见的按钮组件有:RaisedButton、FlatButton、IconButton、OutlineButton、ButtonBar、FloatingActionButton
- RaisedButton :凸起的按钮，其实就是 Material Design 风格的
- Button FlatButton :扁平化的按钮
- OutlineButton:线框按钮
- IconButton :图标按钮
- ButtonBar:按钮组
- FloatingActionButton:浮动按钮
区别-->RaisedButton有elevation属性，阴影的范围
FlatButton就是个平的
OutlineButton 有线框，即使设置背景也不会使用
| 属性 |
描述 |
| textColor |
文本颜色 |
| color |
按钮的颜色 |
| disabledColor |
按钮禁用时的颜色 |
| disabledTextColor |
按钮禁用时的文本颜色 |
| splashColor |
点击按钮时水波纹的颜色 |
| highlightColor |
点击(长按)按钮后按钮的颜色 |
| elevation |
阴影的范围，值越大阴影范围越大 |
| padding |
内边距 |
| shape |
设置按钮的形状 |
image.png
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: () {},
child: Text("普通按钮"),
),
SizedBox(
width: 10,
),
RaisedButton(
onPressed: () {},
child: Text("有颜色按钮"),
color: Colors.blue,
textColor: Colors.white,
),
SizedBox(
width: 10,
),
RaisedButton(
onPressed: () {},
child: Text("有阴影按钮"),
color: Colors.blue,
elevation: 30,
textColor: Colors.white,
)
],
),
SizedBox(
width: 10,
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton.icon(
icon: Icon(Icons.tag_faces),
onPressed: null,
label: Text("onPressed =null"),
color: Colors.blue,
textColor: Colors.white,
),
SizedBox(
width: 10,
),
RaisedButton.icon(
icon: Icon(Icons.tag_faces),
onPressed: () {},
label: Text("onPressed !=null"),
color: Colors.blue,
textColor: Colors.white,
),
SizedBox(
width: 10,
),
],
),
SizedBox(
width: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 200,
height: 50,
child: RaisedButton(
onPressed: () {},
child: Text("有宽高按钮"),
color: Colors.blue,
elevation: 30,
textColor: Colors.white,
),
)
],
),
SizedBox(
width: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.fromLTRB(20, 0, 10, 0),
child: RaisedButton(
onPressed: () {},
child: Text("自适应按钮"),
color: Colors.blue,
elevation: 30,
textColor: Colors.white,
),
))
],
),
SizedBox(
width: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: () {},
child: Text("圆角按钮"),
color: Colors.blue,
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
textColor: Colors.white,
),
SizedBox(
width: 10,
),
Container(
height: 80,
child: RaisedButton(
onPressed: () {},
child: Text("圆角按钮"),
color: Colors.blue,
elevation: 10,
splashColor: Colors.grey,
shape: CircleBorder(
side: BorderSide(
color: Colors.white,
)),
textColor: Colors.white,
),
),
],
),
SizedBox(
width: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.red,
child: Text("FlatButton")),
SizedBox(
width: 10,
),
OutlineButton(
onPressed: () {},
child: Text("OutlineButton"),
),
SizedBox(
width: 10,
),
OutlineButton(
onPressed: () {},
color: Colors.blue, // 没有效果
textColor: Colors.red,
child: Text("OutlineButton"),
)
],
),
SizedBox(
width: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ButtonBar(
children: <Widget>[
FlatButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.red,
child: Text("登录 按钮组")),
FlatButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.red,
child: Text("注册 按钮组"))
],
)
],
),
SizedBox(
width: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
MyButton(
text: "自定义按钮",
pressed: () {},
)
],
)
],
);
//自定义按钮
class MyButton extends StatelessWidget {
final text;
final pressed;
final width;
final height;
const MyButton(
{this.text = "",
this.pressed = null,
this.width = 120.0,
this.height = 50.0});
@override
Widget build(BuildContext context) {
return Container(
width: this.width,
height: this.height,
child: RaisedButton(
onPressed: this.pressed,
child: Text(this.text),
),
);
}
}
FloatingActionButton
image.png
| 属性 |
描述 |
| child |
子视图，一般为 Icon，不推荐使用文字 |
| tooltip |
FAB 被长按时显示，也是无障碍功能 |
| backgroundColor |
背景颜色 |
| elevation |
未点击的时候的阴影 |
| hignlightElevation |
点击时阴影值，默认 12.0 |
| onPressed |
点击事件回调 |
| shape |
可以定义 FAB 的形状等 |
| mini |
是否是 mini 类型默认 false |
//定位 fab的位置centerDocked 是依附在导航栏上
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
//使用 Container包起来，就能控制按钮的大小了
floatingActionButton: Container(
width: 70,
height: 70,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(35), // 圆角为款宽高的一般就是圆
),
padding: EdgeInsets.all(8),
//因为背景是白色，8的内边距看着就像8的边框
margin: EdgeInsets.only(top: 4),
//因为太靠上了，向下移动
child: FloatingActionButton(
elevation: 0,
onPressed: () {
setState(() {
this.currentIndex = 2; //点击事件，来处理tab的切换
});
},
backgroundColor: this.currentIndex == 2 ? Colors.yellow : Colors.blue,
child: Icon(
Icons.add,
),
),
),
网友评论