Flutter入门:Button

Posted BennuCTech

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter入门:Button相关的知识,希望对你有一定的参考价值。

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,获取更多干货!

以上是关于Flutter入门:Button的主要内容,如果未能解决你的问题,请参考以下文章

Flutter Markdown“显示更多”按钮

Flutter之Redux入门

Flutter之Redux框架入门

为啥Android的button的字和上下边缘的间距那么大

Flutter 入门指北之基础部件

如何设定CSS控制元素内部的元素之间间距