Flutter Button 组件
作者:互联网
目录
在 Flutter 里有很多的 Button,包括了:MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。
一般常用的 Button 是 MaterialButton、IconButton、FloatingActionButton。
RaisedButton:凸起的按钮,其实就是 Material Design 风格的 Button
FlatButton:扁平化的按钮
OutlineButton:线框按钮
IconButton:图标按钮
ButtonBar:按钮组
FloatingActionButton:浮动按钮
DropdownButton:下拉框按钮
参数详解
属性 | 说明 |
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:左上角 |
代码示例
return Container(
padding: EdgeInsets.all(8),
child: Stack(
children: <Widget>[
Align(
alignment: Alignment(-1,-1),
child: 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;
});
},
)
],
),
),
],
),
);
//floatingActionButton 按钮
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red[500],
child: Icon(Icons.add_comment),
tooltip:'干啥',
onPressed: () {print('我是Floating Action Button');},
),
//floatingActionButton 按钮位置
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
效果图
完整代码
标签:onPressed,color,Text,Button,child,Colors,按钮,组件,Flutter 来源: https://blog.csdn.net/ruoshui_t/article/details/91428229