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

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

在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,///   ),/// )
 /// ```

,

截图：

如果您需要对样式进行一些额外的控制，例如按下按钮时边框应为 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'),)