[英]How to achieve rounded corners on new OutlinedButton widget in Flutter?
在 Flutter 1.22 中,我们收到了一个新的小部件OutlinedButton
,它用于替换OutlineButton
但我们如何才能真正使其边框变圆? borderSide
和shape
属性不再可用。
您可以使用OutlinedButton.styleFrom
属性:
OutlinedButton(
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
side: BorderSide(width: 2, color: Colors.green),
),
onPressed: () {},
child: Text('Button'),
)
从源代码
/// All parameters default to null, by default this method returns
/// a [ButtonStyle] that doesn't override anything.
///
/// For example, to override the default shape and outline for an
/// [OutlinedButton], one could write:
///
/// ```dart
/// OutlinedButton(
/// style: OutlinedButton.styleFrom(
/// shape: StadiumBorder(),
/// side: BorderSide(width: 2, color: Colors.green),
/// ),
/// )
/// ```
截屏:
如果您需要对样式进行一些额外的控制,例如按下按钮时边框应为 ABC,悬停时为 DEF... XYZ 未交互时,您可以使用ButtonStyle
。
OutlinedButton(
onPressed: () {},
style: ButtonStyle(
shape: MaterialStateProperty.resolveWith<OutlinedBorder?>((states) {
// Rounded button (when the button is pressed)
if (states.contains(MaterialState.pressed)) {
return RoundedRectangleBorder(borderRadius: BorderRadius.circular(20));
}
}),
),
child: Text('OutlinedButton'),
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.