文章目录
Button效果一览
1 CupertinoButton
CupertinoButton 是iOS风格的按钮，需要注意的是它的minSize是44，一般需要按需求来修改。
带线框的按钮
CupertinoButton(
padding: EdgeInsets.zero,
child: Container(
height: 40,
width: 160,
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(color: Colors.red),
borderRadius: const BorderRadius.all(Radius.circular(20)),
),
child: const Text(
'CupertinoButton',
style: TextStyle(color: Colors.red),
),
),
onPressed: () {
},
)
Icon按钮
CupertinoButton(
child: const Icon(CupertinoIcons.arrow_right_arrow_left),
onPressed: () {
},
)
背景填充的按钮
CupertinoButton.filled(
minSize: 40,
padding: const EdgeInsets.symmetric(horizontal: 32),
borderRadius: const BorderRadius.all(Radius.circular(20)),
child: const Text('Filled'),
onPressed: () {
},
)
三种方式的效果图
2 TextButton
TextButton 是Android风格的文本按钮，带有水波纹效果。支持点击和长按事件。
无背景有Icon的按钮
TextButton.icon(
onPressed: () {
},
label: const Text('TextButton.icon'),
icon: const Icon(Icons.text_fields),
)
背景填充的按钮
扫描二维码关注公众号，回复：
14640137 查看本文章
TextButton(
onPressed: () {
},
onLongPress: () {
},
// 按钮样式
style: ButtonStyle(
//设置按钮背景颜色
backgroundColor: MaterialStateProperty.all(Colors.red),
//设置水波纹颜色
overlayColor: MaterialStateProperty.all(Colors.red[300]),
//设置按钮的大小
minimumSize: MaterialStateProperty.all(const Size(double.infinity, 44)),
//设置形状 圆角 半径为8
shape: MaterialStateProperty.all(
const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8)),
),
),
),
child: const Text(
"TextButton",
style: TextStyle(color: Colors.white, fontSize: 17),
),
)
带线框的按钮
TextButton(
onPressed: () {
},
onLongPress: () {
},
// 按钮样式
style: ButtonStyle(
//定义文本的样式 这里设置的颜色是不起作用的
textStyle: MaterialStateProperty.all(const TextStyle(fontSize: 18)),
//设置字体颜色
foregroundColor: MaterialStateProperty.resolveWith((states) {
//设置按下时的背景颜色
if (states.contains(MaterialState.pressed)) {
return Colors.white;
}
//默认不使用背景颜色
return Colors.red;
}),
//设置水波纹颜色
overlayColor: MaterialStateProperty.all(Colors.red[200]),
//设置按钮的大小
minimumSize: MaterialStateProperty.all(const Size(double.infinity, 44)),
//设置形状
shape: MaterialStateProperty.all(const StadiumBorder()),
//设置线框
side: MaterialStateProperty.all(
const BorderSide(color: Colors.red, width: 1)),
),
child: const Text("TextButton"),
)
效果图
3 ElevatedButton
ElevatedButton 是Android风格的按钮，具有立体感、阴影效果，可设置elevation Z轴高度。支持点击和长按事件。
背景填充、圆角、具有立体感有阴影、elevation Z轴高度10
ElevatedButton(
onPressed: () {
},
style: ElevatedButton.styleFrom(
primary: Colors.red,
elevation: 10,
textStyle: const TextStyle(fontSize: 18),
),
child: const Text('ElevatedButton'),
)
背景填充、两边为圆形、无立体感无阴影、elevation Z轴高度0
ElevatedButton(
onPressed: () {
},
style: ElevatedButton.styleFrom(
primary: Colors.red,
elevation: 0,
minimumSize: const Size(0, 40),
shape: const StadiumBorder(),
textStyle: const TextStyle(fontSize: 18),
),
child: const Text('ElevatedButton'),
)
线框按钮、两边为圆形、无立体感无阴影、elevation Z轴高度0
ElevatedButton(
onPressed: () {
},
style: ElevatedButton.styleFrom(
primary: Colors.white,
elevation: 0,
minimumSize: const Size(0, 40),
shape: const StadiumBorder(),
padding: const EdgeInsets.symmetric(horizontal: 32),
side: const BorderSide(color: Colors.red, width: 1),
),
child: const Text(
'ElevatedButton',
style: TextStyle(fontSize: 18, color: Colors.red),
),
)
效果图
4 OutlinedButton
OutlinedButton与TextButton基本一致，只是默认具有边框，修改style属性即可实现TextButton的效果。
OutlinedButton(
onPressed: () {
},
style: const ButtonStyle(),
child: const Text("OutlinedButton"),
);
5 IconButton
IconButton 是Android风格的用于Icon的按钮，具有圆形范围的点击效果。Flutter还提供了CloseButton和BackButton等快捷实现的IconButton。
IconButton(
tooltip: '我是飞机',
onPressed: () {
},
icon: const Icon(CupertinoIcons.airplane),
)
效果
6 为Widget添加点击事件
除了使用上述Button Widget，还可以使用InkWell或GestureDetector来为子Widget添加点击事件。
- InkWell 具有Android风格的点击效果
- GestureDetector 无点击效果
InkWell(
onLongPress: () {
},
onDoubleTap: () {
},
onTap: () {
},
child: const Text('InkWell'),
)
GestureDetector(
behavior: HitTestBehavior.opaque,
onLongPress: () {
},
onDoubleTap: () {
},
onTap: () {
},
child: const Text('GestureDetector'),
)