如何在Flutter中新的OutlinedButton小部件上实现圆角？

Question

在 Flutter 1.22 中，我们获得了一个新的小部件 OutlinedButton，用于替换 OutlineButton，但是我们该如何使它的边框变成圆角呢？borderSide 和 shape 属性不再可用。

- Adam Smaka

Answer 1

您可以使用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),
 ///   ),
 /// )
 /// ```

- Matthias

Answer 2

截图:

如果你需要对样式进行更精细的控制，例如当按钮被按下时边框应该是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'),
)

- CopsOnRoad