Flutter TextButton相关

flutter 2.0版本新增了三个按钮

TextButton、OutlinedButton、ElevatedButton

以TextButton为例：
属性：

const TextButton({
    Key? key,
    required VoidCallback? onPressed,
    VoidCallback? onLongPress,
    ButtonStyle? style,
    FocusNode? focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    required Widget child,
  }) : super(
    key: key,
    onPressed: onPressed,
    onLongPress: onLongPress,
    style: style,
    focusNode: focusNode,
    autofocus: autofocus,
    clipBehavior: clipBehavior,
    child: child,
  );

当想改变按钮圆角时需要在style中设置，看一下style属性里有什么？
style属性

class ButtonStyle with Diagnosticable {
  /// Create a [ButtonStyle].
  const ButtonStyle({
    this.textStyle,
    this.backgroundColor,
    this.foregroundColor,
    this.overlayColor,
    this.shadowColor,
    this.elevation,
    this.padding,
    this.minimumSize,
    this.side,
    this.shape,
    this.mouseCursor,
    this.visualDensity,
    this.tapTargetSize,
    this.animationDuration,
    this.enableFeedback,
    this.alignment,
  });

其中side控制边框final MaterialStateProperty<BorderSide?>? side;
使用：

side: MaterialStateProperty.all(
                              BorderSide(
                                color: Colors.blue,
                                width: 4),
                            )

其中shape可以包含side的作用，作用范围比side广，这里使用shape时

/// The shape of the button's underlying [Material].
  ///
  /// This shape is combined with [side] to create a shape decorated
  /// with an outline.
  final MaterialStateProperty<OutlinedBorder?>? shape;

用到MaterialStateProperty<OutlinedBorder?>这个OutlinedBorder是个抽象类，不能直接使用，直接使用会报错，需要用它的子类，这里可以使用：RoundedRectangleBorder

style: ButtonStyle(
                            shape: MaterialStateProperty.all(RoundedRectangleBorder(
                              side: BorderSide(
                                width: 0.5,
                                color: Color(0xFFB4B4B4),
                              ),
                              borderRadius: BorderRadius.circular(20),
                            ),
                              
                            ),
                            // side: MaterialStateProperty.all(
                            //   BorderSide(
                            //     color: Colors.blue,
                            //     width: 4),
                            // )
                          ),

截屏2021-03-20 15.32.52.png