[英]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.