Flutter提供了一些便利的按钮样式
-
RaisedButton
几个常用的属性:
VoidCallback onPressed,// 点击回调
Color textColor,//文字颜色
Color color,//按钮颜色
Color disabledColor,//不可点击是按钮的颜色
Color highlightColor,//高亮的颜色
EdgeInsetsGeometry padding,//内边距
ShapeBorder shape,//设置按钮的形状
Widget child,//按钮里的内容
RaisedButton(
onPressed: () {},
child: Text('不可点击按钮', style: TextStyle(fontSize: 16),),
);

如果要设置按钮为不可点击状态的话,需要把onPressed回调函数设置为null
RaisedButton(
onPressed: null,
child: Text('不可点击按钮', style: TextStyle(fontSize: 16),),
);

Color
背景色
RaisedButton(
color: Colors.cyan,
child: const Text( '可点击按钮', style: TextStyle(fontSize: 16, color: Colors.black),
),
onPressed: () {},
);

-
IconButtons
:可以快速创建一个左边图片右边文字的按钮
image.png
需要一个文字widget和IconWidget
class IconBtn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RaisedButton.icon(
onPressed: () {
print('点我了');
},
color: Colors.red,
label: Text(
'文字',
style: TextStyle(fontSize: 16),
),
icon: Icon(
Icons.ac_unit,
size: 30,
color: Colors.cyan,
),
);
}
}
-
FloatingActionButton
:可以快速创建圆形按钮
注:如果想要设置按钮的大小,可以用Container
包装一下,设置宽高
class CircleBtn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 70,
height: 70,
child: FloatingActionButton(
onPressed: () {
print('点击了圆形按钮');
},
child: Text(
'圆形按钮',
style: TextStyle(fontSize: 14, color: Colors.red),
),
),
);
}
}

-
DropdownButton
:类似于点击点击下拉菜单的控件
需要继承自StatefulWidget
,因为下拉菜单点击回调后可以得到状态改变的回调
DropdownButton的items属性是菜单的集合,包含多个DropdownMenuItem,如果用户点击了item,返回value值
class DropDownBtn extends StatefulWidget {
@override
_DropDownBtnState createState() => _DropDownBtnState();
}
class _DropDownBtnState extends State<DropDownBtn> {
String dropdownValue = '扫一扫';
@override
Widget build(BuildContext context) {
return DropdownButton(
value:dropdownValue ,
items: _downTitles
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(value: value, child: Text(value));
}).toList(),
onChanged:(String newValue) {
setState(() {
dropdownValue = newValue;
});
}
);
}
}
具体代码请看Demo地址
网友评论