目录
一、Flutter 常用的 Button
- RaisedButton：凸起的按钮，其实就是 Material Design 风格的 Button
- FlatButton：扁平化的按钮
- OutlineButton：线框按钮
- IconButton：图标按钮
- ButtonBar：按钮组
- FloatingActionButton：浮动按钮
- DropdownButton：下拉框按钮
二、演示图如下
三、代码案例
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Flutter Button'),),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red[500],
child: Icon(Icons.add_comment),
tooltip:'测试',
onPressed: () {print('loating Action Button');},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
body: MyBody(),
),
);
}
}
class MyBody extends StatefulWidget {
@override
_MyBodyState createState() => _MyBodyState();
}
class _MyBodyState extends State<MyBody> {
var value;
int count = 0;
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(8),
child: Column(
children: <Widget>[
Wrap(
spacing: 8,
runSpacing: 8,
children: <Widget>[
RaisedButton(
child: Text('普通按钮'),
onHighlightChanged:(bool b) {
print(b);
},
onPressed: (){},
),
RaisedButton(
child: Text('带颜色'),
onPressed: (){},
textColor: Colors.white,
color: Colors.blue[200],
),
RaisedButton(
child: Text('带颜色带阴影'),
onPressed: (){},
textColor: Colors.white,
color: Colors.blue[200],
elevation: 15,
),
Container(
width: 300,
height: 50,
child: RaisedButton(
child: Text('设置宽高'),
onPressed: (){},
textColor: Colors.white,
color: Colors.blue[500],
elevation: 15,
),
),
RaisedButton.icon(
icon: Icon(Icons.account_box),
label: Text('我前边有图标'),
onPressed: () {},
),
RaisedButton(
child: Text('圆角按钮'),
onPressed: (){},
color: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)
),
),
Container(
width: 100,
height: 100,
child: RaisedButton(
child: Text('圆形按钮'),
onPressed: (){},
color: Colors.red,
shape: CircleBorder(
// side: BorderSide(color: Colors.yellow[500])
)
),
),
RaisedButton(
child: Text('水波纹'),
onPressed: (){},
color: Colors.blue[200],
splashColor:Colors.yellow[100],
),
RaisedButton(
child: Text('长按变色'),
onPressed: (){},
color: Colors.blue[200],
highlightColor:Colors.red[500],
),
FlatButton(
child: Text('扁平按钮'),
onPressed: (){},
color: Colors.blue[200],
),
OutlineButton(
child: Text('边框按钮'),
onPressed: (){},
textColor: Colors.red,
borderSide: BorderSide(color: Colors.red,),
),
IconButton(
icon: Icon(Icons.access_alarms),
onPressed: () {},
color: Colors.deepOrange,
splashColor:Colors.limeAccent,
highlightColor:Colors.blue[300],
tooltip:'干啥',
),
DropdownButton(
hint:new Text('请选择...'),
value: value,//下拉菜单选择完之后显示给用户的值
iconSize: 50.0,//设置三角标icon的大小
items: <DropdownMenuItem>[
DropdownMenuItem(
value: '1',
child: Text('One'),
),
DropdownMenuItem(
value: '2',
child: Text('Two'),
),
DropdownMenuItem(
value: '3',
child: Text('Three'),
),
DropdownMenuItem(
value: '4',
child: Text('four'),
),
DropdownMenuItem(
value: '5',
child: Text('five'),
),
],
onChanged: (v) {
setState(() {
print(v);
value = v;
});
},
),
],
),
Container(
color: Colors.pink[100],
child: ButtonBar(
children: <Widget>[
RaisedButton(
child: Text('按钮一'),
onPressed: (){},
textColor: Colors.white,
color: Colors.blue,
elevation: 15,
),
RaisedButton(
child: Text('按钮二'),
onPressed: (){},
textColor: Colors.white,
color: Colors.blue,
elevation: 15,
),
],
),
),
Container(
alignment: Alignment.center,
child: Column(
children: <Widget>[
SizedBox(height: 30,),
Text("一个Button事件与回调，更改数值"),
SizedBox(height: 15,),
Text("$count",style: TextStyle(fontSize: 50,color: Colors.purple,fontWeight:FontWeight.w800)),
SizedBox(height: 20,),
RaisedButton(
child: Text('点我',style: TextStyle(fontSize: 18),),
onPressed: (){setState(() {
count += 1;
});},
textColor: Colors.white,
color: Colors.blue,
elevation: 15,
),
],
),
)
],
),
);
}
}四、参数详解
| 属性 | 说明 |
| onPressed | 点击事件监听，传 null 表示按钮禁用 |
| onHighlightChanged | 水波纹高亮变化回调,按下返回true,擡起返回false |
| textTheme | 定义按钮主题 |
| textColor | 按钮文字颜色 |
| disabledTextColor | 无效按钮文字颜色 |
| color | 按钮颜色 |
| disabledColor | 无效按钮颜色 |
| focusColor | 获取焦点 按钮颜色 |
| hoverColor | 不知道啥玩应儿 |
| highlightColor | 长按 按钮颜色 |
| splashColor | 点击 水波纹 颜色 |
| colorBrightness | 官网：用于此按钮的主题亮度。默认为主题的亮度 |
| elevation | 阴影 |
| focusElevation | |
| hoverElevation | |
| highlightElevation | |
| disabledElevation | |
| padding | 内边距 |
| shape | 设置形状，如圆角，圆形等 |
| clipBehavior | 剪裁 Clip.antiAlias：剪辑具有抗锯齿功能 Clip.antiAliasWithSaveLayer：在剪辑后立即剪辑具有抗锯齿和saveLayer Clip.hardEdge：剪辑，但不应用抗锯齿。 Clip.none：不剪辑。 |
| focusNode | 焦点 |
| materialTapTargetSize | |
| animationDuration | |
| child | |
| OutlineButton 特性 |
|
| borderSide |
线框 线颜色 ，如红色：BorderSide(color: Colors.red,), |
| clipBehavior |
相框风格，如：Clip.antiAlias |
| RaisedButton.icon 特性 |
|
| icon |
图标 |
| label |
通常是文字 |
| IconButton 特性 |
|
| icon |
图标 |
| color |
图标颜色 |
| tooltip |
长按文字提示 |
| DropdownButton 特性 DropdownButton |
|
| hint |
提示语 |
| value |
当前值 |
| iconSize |
下拉框图片大小 |
| icon | 右边图标 默认为下三角 |
| items |
下拉框数据集合 |
| onChanged |
监听 |
| FloatingActionButton 特性 |
|
| child | 子元素，一般为 Icon，不推荐使用文字 |
| tooltip | 长按文字提示 |
| backgroundColor | 背景颜色（默认使用主题颜色） |
| mini | 是否是 mini 类型默认 false |
| 设置位置，在外部使用（与FloatingActionButton同级）floatingActionButtonLocation。 FloatingActionButtonLocation.centerDocked： 底部剧中 与底部无间距 FloatingActionButtonLocation.centerFloat： 底部剧中 与底部有间距 FloatingActionButtonLocation.endDocked：右下角 与底部无间距 FloatingActionButtonLocation.endFloat：右下角 与底部有间距 FloatingActionButtonLocation.endTop：右上角 FloatingActionButtonLocation.startTop：左上角 |