Flutter入门：Button

Posted 2022-02-27 BennuCTech

IconButton

如果即是一个图标又想点击，那么就用这个

IconButton(
  icon: Icon(Icons.close),
  onPressed: ()
    //
  
)  

普通按钮FlatButton

这种按钮没有深度，所以没有阴影，一个例子

FlatButton(
  child: Text("去补测"),
  onPressed: ()

  ,
)

这是一个普通的按钮，无背景的。如果想添加背景，可以添加color: Colors.XXX, 如下

FlatButton(
  color: Colors.blue,
  textColor: Colors.white,
  child: Text("去补测"),
  onPressed: ()

  ,
)

这样就是一个蓝色背景白色字体的按钮。

注意如果要显示背景，必须设置onPressed，否则即使设置了color依然没有背景色显示

但是这个背景并不是圆角的（其实有一点点圆角），如果想实现圆角，则需要添加shape，如下：

FlatButton(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  color: Colors.blue,
  textColor: Colors.white,
  child: Text("去补测"),
  onPressed: ()

  ,
)

这样就添加了大小为10的圆角。但是如果我们想实现边框背景，即中间透明四周有边框的，需要修改shape如下：

FlatButton(
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.blue,
      width: 1,
    ),
    borderRadius: BorderRadius.circular(10),
  ),
  color: Colors.transparent,
  textColor: Colors.blue,
  child: Text("去补测"),
  onPressed: ()

  ,
)

注意color改成透明的了，这样就实现了边框背景，且带有圆角。

其他button

其他如MaterialButton等，有的是有阴影的，不过使用方式大致一样。

去除默认间距

在flutter中使用button组件，默认四周是有间距的，如果想去掉这个间距，直接设置padding是不够的，比如

FlatButton(
  padding: EdgeInsets.all(0),
  child: Text("1"),
  onPressed: ()
    ...
  ,
),

设置完会发现没有效果，文字四周还是有间距。这是因为全局默样式ButtonTheme导致的，影响这个间距的因素有两个。

第一个就是宽高，因为button的高度可以通过height设置，但是没有width属性，所以宽度无法设置固定。所以这里的关键就是minWidth，在ButtonTheme中的minWidth默认是88，如下

  const ButtonThemeData(
    this.textTheme = ButtonTextTheme.normal,
    this.minWidth = 88.0,
    this.height = 36.0,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    this.layoutBehavior = ButtonBarLayoutBehavior.padded,
    this.alignedDropdown = false,
    Color buttonColor,
    Color disabledColor,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    this.colorScheme,
    MaterialTapTargetSize materialTapTargetSize,
  )

这个就导致了我们无论如何设置padding，宽度都不会小于88。

要改变这个值可以不用修改样式，直接通过button的minWidth属性即可，如：

FlatButton(
  minWidth: 0,  
  padding: EdgeInsets.all(0),
  child: Text("1"),
  onPressed: ()
    ...
  ,
),

修改了minWidth后再运行看效果，发现按钮宽度减少了，但是两边还有间距。这就是第二个影响因素：padding。

我们不是已经将padding设置为0了么？看一下FlatButton源码：

@override
Widget build(BuildContext context) 
  final ThemeData theme = Theme.of(context);
  final ButtonThemeData buttonTheme = ButtonTheme.of(context);
  return RawMaterialButton(
    onPressed: onPressed,
    onLongPress: onLongPress,
    onHighlightChanged: onHighlightChanged,
    mouseCursor: mouseCursor,
    fillColor: buttonTheme.getFillColor(this),
    textStyle: theme.textTheme.button.copyWith(color: buttonTheme.getTextColor(this)),
    focusColor: buttonTheme.getFocusColor(this),
    hoverColor: buttonTheme.getHoverColor(this),
    highlightColor: buttonTheme.getHighlightColor(this),
    splashColor: buttonTheme.getSplashColor(this),
    elevation: buttonTheme.getElevation(this),
    focusElevation: buttonTheme.getFocusElevation(this),
    hoverElevation: buttonTheme.getHoverElevation(this),
    highlightElevation: buttonTheme.getHighlightElevation(this),
    disabledElevation: buttonTheme.getDisabledElevation(this),
    padding: buttonTheme.getPadding(this),
    visualDensity: visualDensity ?? theme.visualDensity,
    constraints: buttonTheme.getConstraints(this).copyWith(
      minWidth: minWidth,
      minHeight: height,
    ),
    shape: buttonTheme.getShape(this),
    clipBehavior: clipBehavior,
    focusNode: focusNode,
    autofocus: autofocus,
    materialTapTargetSize: buttonTheme.getMaterialTapTargetSize(this),
    animationDuration: buttonTheme.getAnimationDuration(this),
    child: child,
  );

可以看到FlatButton中又包了一层RawMaterialButton，而这个也是有padding的，是由buttonTheme的padding决定的。

所以要去掉这个padding就必须要重新设置buttonTheme，需要在button外面加一层theme，如下：

Theme(
  data: ThemeData(
    buttonTheme: ButtonThemeData(
      padding: EdgeInsets.all(0),
    ),
  ),
  child: FlatButton(
      minWidth: 0,  
      padding: EdgeInsets.all(0),
      child: Text("1"),
      onPressed: ()
        ...
      ,
    ),
),  

这样就彻底去除了按钮的间距。

注意这个样式只对这个button起作用，如果想对整个页面（或更多组件）起作用就可以放到更外层

关注公众号：BennuCTech，获取更多干货！