[英]How to achieve rounded corners on new OutlinedButton widget in Flutter?
With Flutter 1.22 we received a new widget OutlinedButton
which is made to replace OutlineButton
but how we can actually make its border rounded?在 Flutter 1.22 中,我们收到了一个新的小部件
OutlinedButton
,它用于替换OutlineButton
但我们如何才能真正使其边框变圆? borderSide
and shape
properties are not available anymore. borderSide
和shape
属性不再可用。
You can use OutlinedButton.styleFrom
property:您可以使用
OutlinedButton.styleFrom
属性:
OutlinedButton(
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
side: BorderSide(width: 2, color: Colors.green),
),
onPressed: () {},
child: Text('Button'),
)
From the source code从源代码
/// 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),
/// ),
/// )
/// ```
Screenshot:截屏:
If you need some extra control over the style like border should be ABC when the button is pressed, DEF when its hovered... XYZ when not interacted, you can use ButtonStyle
.如果您需要对样式进行一些额外的控制,例如按下按钮时边框应为 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.