Flutter UI - button系 Widget

Flutter 中按钮这种 widget 种类但是很多：

• RaisedButton - 凸起按钮，带阴影
• FlatButton - 扁平按钮，不带阴影
• OutlineButton - 自带边框的按钮，不能设置背景色color
• MaterialButton - MD 风格的按钮，能够设置宽高值，是 Flutter 中全部按钮的基类
• IconButton - 在 Icon 基础上加上点击事件，不能设置背景色和边框
• FloatingActionButton - 悬浮按钮

---

MaterialButton

MaterialButton 是 Flutter 中全部 Button 类型的基类，MaterialButton 的参数再其余 Button 中都是通用的，咱们简单看一下：

const MaterialButton({
    Key key, 
    @required this.onPressed, // 点击事件，必须给值，写null的话表示不可用
    this.onHighlightChanged, 
    
    this.textTheme, //默认文字样式
    this.textColor, // 文字颜色
    this.disabledTextColor, // 不可用时文字颜色
    
    this.color, // 背景色
    this.disabledColor, // 按钮被禁用时的文字颜色
    this.highlightColor, // 按钮的水波纹亮起的颜色，点击以后的颜色，注意这个颜色点击以后就一直在这里了，不是那种一瞬间显示
    this.splashColor, // 波浪纹颜色
    this.colorBrightness, // 按钮主题高亮
    
    this.elevation, // Z轴、阴影，正常应该小于 5
    this.highlightElevation, // 按钮高亮时的下面的阴影长度
    this.disabledElevation,
    
    this.padding,
    this.shape, // 按钮样式
    this.clipBehavior = Clip.none,
    this.materialTapTargetSize,
    this.animationDuration,
    this.minWidth,
    this.height,
    this.child, // 按钮内部widget，通常都是text
  })
复制代码

1. textTheme 系统默认提供的配色方案：

• ButtonTextTheme.normal:

  

• ButtonTextTheme.accent：

  

• ButtonTextTheme.primary：

  

2. shape 提供了4种预设的按钮形状：

• BeveledRectangleBorder

  

• CircleBorder

  

• RoundedRectangleBorder

  

• StadiumBorder

  

3. 按钮按下时图示：

---

RaisedButton

RaisedButton - 凸起按钮，带阴影的那种

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        onPressed: () {
          print("AAAAAA");
        },
        color: Colors.blueAccent,
        child: Text(
          "浮动按钮",
          style: TextStyle(fontSize: 30),
        ),
        textColor: Colors.white,
        elevation: 10,
        disabledColor: Colors.grey,
        padding: EdgeInsets.all(20),
        splashColor: Colors.red,
        shape: BeveledRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ));
  }
}
复制代码

---

FlatButton

FlatButton - 扁平按钮，不能带阴影，其余和 RaisedButton 同样

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlatButton(
        onPressed: () {
          print("AAAAAA");
        },
        color: Colors.blueAccent,
        child: Text(
          "浮动按钮",
          style: TextStyle(fontSize: 30),
        ),
        textColor: Colors.white,
        disabledColor: Colors.grey,
        padding: EdgeInsets.all(20),
        splashColor: Colors.red,
        shape: BeveledRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ));
  }
}
复制代码

---

OutlineButton

OutlineButton - 自带边框的按钮，不能设置背景色color

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new OutlineButton(
      onPressed: () {
        print(BorderStyle.values);
      },
      borderSide: BorderSide(
          color: Colors.blue,
          width: 2.0,
          style: BorderStyle.solid
      ),
      child: new Text('pressed'),
    );
  }
}
复制代码

---

MaterialButton

MaterialButton - MD 风格的按钮，属性同上，可是能够设置宽高值

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      minWidth: 200,
      height: 80,
      color: Colors.blue,
      textColor: Colors.white,
      onPressed: () {
        print("AAAAAA");
      },
      child: new Text('button'),
    );
  }
}
复制代码

---

IconButton

IconButton - 在 Icon 基础上加上点击事件，不能设置背景色和边框，图就不必放了，child除了能够接受Icon以外，还能够接受RichText

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
        onPressed: () {
          print("AAAAAA");
        },
        color: Colors.red,
        iconSize: 50,
        icon: new Icon(Icons.star),
        padding: const EdgeInsets.all(12.0)
    );
  }
}
复制代码

---

FloatingActionButton

FloatingActionButton 这个你们都是耳熟能详了吧，若是有时间，能够看看：FlatButton的Material设计理念，这是官方指导，FloatingActionButton 全部典型应用案例都在里面了，虽然说是英文的，可是你们看图就知道咋回事了

图随便找的

• child 很随意，能够是 Text、icon, etc
• tooltip 长按提示
• foregroundColor child 没有设置颜色时生效
• backgroundColor 背景色
• elevation 阴影
• highlightElevation 按下时阴影
• shape 形状
• mini 是小图标仍是大图标

@override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      child: Icon(Icons.adb),
      tooltip: "tips",
      backgroundColor: Colors.blueAccent,
      foregroundColor: Colors.amberAccent,
      onPressed: (){
        print("tips!");
      },
    );
  }
复制代码