Flutter组件学习（5）按钮Button

目录

介绍

Button属性

RaisedButton

FlatButton

OutlineButton

IconButton

自定义按钮

---

介绍

Material 组件库中提供了多种按钮组件如RaisedButton、FlatButton、OutlineButton等，它们都是直接或间接对RawMaterialButton组件的包装定制，所以他们大多数属性都和RawMaterialButton一样。在介绍各个按钮时我们先介绍其默认外观，而按钮的外观大都可以通过属性来自定义，我们在后面统一介绍这些属性。另外，所有Material 库中的按钮都有如下相同点：

1. 按下时都会有“水波动画”（又称“涟漪动画”，就是点击时按钮上会出现水波荡漾的动画）。
2. 有一个onPressed属性来设置点击回调，当按钮按下时会执行该回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。

RaisedButton	"漂浮"按钮，它默认带有阴影和灰色背景。按下后，阴影会变大
FlatButton	扁平按钮，默认背景透明并不带阴影。按下后，会有背景色
OutlineButton	默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)
IconButton	是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景

 

Button属性

onPressed: () {}	处理点击事件，我发现如果不写这句话，按钮的背景颜色的设置是无效的
child: Text("RaisedButton")	按钮文字
textColor: Colors.yellow	按钮文字颜色
color: Colors.blue	按钮颜色
highlightColor: Colors.orange,	按钮按下去后的颜色
splashColor: Colors.pink	按钮水波效果的水波颜色
disabledColor	按钮被禁用的颜色
disabledTextColor	按钮禁用时的文本颜色
elevation	阴影的范围，值越大阴影范围越大
icon	在按钮上设置图标

 需要知道的是让按钮按照如下方式添加icon，那么此时就不再用child添加文字，而是用label

RaisedButton.icon(
  icon: Icon(Icons.send),
  label: Text("按钮"),
  onPressed: _onPressed,
),
OutlineButton.icon(
  icon: Icon(Icons.add),
  label: Text("按钮"),
  onPressed: _onPressed,
),
FlatButton.icon(
  icon: Icon(Icons.info),
  label: Text("按钮"),
  onPressed: _onPressed,
),

RaisedButton

class ButtonClass extends StatelessWidget{
  _log() {
    print("点击了按钮");
  }
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: _log,
      child: Text("RaisedButton"),
      textColor: Colors.yellow,
      color: Colors.blue,
      elevation: 10,
      highlightColor: Colors.orange,
      splashColor: Colors.pink,
    );
  }
}

FlatButton

    return FlatButton(
      onPressed: _log,
      child: Text("FlatButton"),
      textColor: Colors.yellow,
      color: Colors.blue,
      highlightColor: Colors.orange,
      splashColor: Colors.pink,
    );

除了阴影没有了，和RaisedButton基本上是一样的，就不再演示了

OutlineButton

    return OutlineButton(
      onPressed: _log,
      child: Text("OutlineButton"),
      textColor: Colors.yellow,
      color: Colors.blue,
      highlightedBorderColor: Colors.blue,
      hoverColor: Colors.blue,
      highlightColor: Colors.orange,
      splashColor: Colors.pink,
    );

这里color设置的不再是背景颜色，而是按钮的边框颜色，且只有点击的时候才会显示

IconButton

    return IconButton(
      onPressed: _log,
      icon: Icon(Icons.ac_unit),
      iconSize: 80,
      color: Colors.red,
      highlightColor: Colors.blue,
    );

不能设置文字，这里的color设置的是icon的颜色

自定义按钮

比如我要实现这样一个按钮

    return FlatButton.icon(
      onPressed: _log,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
      icon: Icon(Icons.phone_forwarded),
      color: Colors.orange,
      highlightColor: Colors.orange,
      label: Text(
          '拨打电话' ,
        style: TextStyle(
          fontSize: 20,
          color: Colors.white
        ),
      ),
    );