Flutter常用按钮
1.TextButton：
一款android风格的文本按钮，有水波纹特效，反正我是一般不用这个效果，emmmmmm…个人审美没达到。
基本文本按钮，背景、以及点按颜色等
TextButton(
onPressed: () {
debugPrint("我是可点击的文字按钮");
},
child: const Text(
"你好，我是个文字按钮",
// style: TextStyle(color: Colors.blue),
),
style: ButtonStyle(
//按钮大小
// minimumSize:
// MaterialStateProperty.all(const Size(double.infinity, 44)),
//其实文本未设置颜色时，会显示该字体颜色
//设置字体颜色
foregroundColor: MaterialStateProperty.resolveWith((states) {
//按下按钮时的字体颜色
if (states.contains(MaterialState.pressed)) {
return Colors.redAccent;
}
//默认不使用字体颜色
return Colors.black;
}),
//背景颜色
backgroundColor:
MaterialStateProperty.all(Colors.deepPurpleAccent),
//水波纹颜色 不想使用 设置透明即可
overlayColor: MaterialStateProperty.all(Colors.transparent),
//设置边框
side: MaterialStateProperty.all(
const BorderSide(color: Colors.amber)),
//设置形状、圆角
shape: MaterialStateProperty.all(const StadiumBorder()),
),
)
TextButton.icon 图文按钮、个人用的也较少，布局总觉得不如自定义灵活些吧，看个人喜好.
TextButton.icon(
onPressed: () {
debugPrint("我是可点击的图文按钮");
},
icon: const CNImageAssetView(name: "nft_more_icon.png"),
label: const Text("文字"),
style: ButtonStyle(
//水波纹颜色 不想使用 设置透明即可
overlayColor: MaterialStateProperty.all(Colors.transparent),
),
)
2.IconButton
IconButton 是一个图标的按钮，点击区域对用户的交互很敏感。无论图片的实际大小如何，它都有最小的 kMinInteractiveDimension (48.0) 大小点击范围。
IconButton(
disabledColor: Colors.blueAccent,
onPressed: () {
debugPrint("那我也厉害，IconButton");
},
//点击高亮颜色、不需要可设为透明
highlightColor: Colors.transparent,
//水波纹效果颜色、不需要可设为透明
splashColor: Colors.transparent,
//触觉反馈
enableFeedback: true,
icon: const CNImageAssetView(name: "nft_more_icon.png"),
//用户长按按钮时显示此文本
tooltip: "这个是个啥",
// constraints: BoxConstraints(minHeight: 40, maxWidth: 70),
)
OutlinedButton
和TextButton差不多，默认有边框属性
OutlinedButton(
onPressed: () {
debugPrint("那我更厉害，和TextButton不能说一模一样，也能改成一模一样");
},
style: ButtonStyle(
foregroundColor: MaterialStateProperty.resolveWith((states) {
//按下按钮时的字体颜色
if (states.contains(MaterialState.pressed)) {
return Colors.redAccent;
}
//默认不使用字体颜色
return Colors.black;
}),
//背景颜色
backgroundColor:
MaterialStateProperty.all(Colors.deepPurpleAccent),
//水波纹颜色 不想使用 设置透明即可
overlayColor: MaterialStateProperty.all(Colors.transparent),
//设置边框
side: MaterialStateProperty.all(
const BorderSide(color: Colors.amber)),
//设置形状、圆角
shape: MaterialStateProperty.all(const StadiumBorder()),
),
child: const Text("哦吼~我是边框按钮"),
)
CupertinoButton
CupertinoButton是一个iOS风格的按钮，可能我是iOS开发出身，对于这个比较钟爱，按钮自带borderRadius为8的圆角
CupertinoButton图片按钮
CupertinoButton(
padding: const EdgeInsets.only(left: 10, right: 10),
color: Colors.redAccent,
//按钮被按下时的不透明度程度，0~1之间
pressedOpacity: 1,
//这也可以自己定义Container然后固定大小进行设置等等
child: const Text("iOS风格按钮"),
onPressed: () {
debugPrint("我就比较厉害了，iOS风格的");
}),
CupertinoButton文字按钮
CupertinoButton(
//按钮被按下时的不透明度程度，0~1之间
pressedOpacity: 1,
child: const CNImageAssetView(name: "nft_more_icon.png"),
onPressed: () {
debugPrint("我就比较厉害了，iOS风格的图片按钮");
})
其实，每种按钮基本用法都差不多，都不算复杂，实践应用中也可以自定义点击事件处理，也比较灵活。
