Flutter基础-006-Button

flutter中，常用的button有如下几种：

• MaterialButton 一个Material的button
• RaisedButton 继承MaterialButton ， 有质感的button 凸起的，自带阴影和灰色背景，点击后有灰色背景效果且阴影变大。
• FlatButton 继承MaterialButton ，扁平的button 白色背景 点击有灰色背景效果。不能设置阴影
• OutlineButton 继承MaterialButton ，自带外边框的button 白色背景 点击有灰色背景效果。不能设置阴影
• IconButton 可点击的icon button 透明背景 点击后显示圆形灰色背景。

            RaisedButton(
              child: Text("RaisedButton"),
              onPressed: (){},
            ),
            FlatButton(
              child: Text("FlatButton"),
              onPressed: () => {},
            ),
            OutlineButton(
              child: Text("OutlineButton"),
              onPressed: () => {},
            ),
            IconButton(
              icon: Icon(Icons.timer),
              onPressed: () => {},
            ),

RaisedButton

属性：

const RaisedButton({
    @required VoidCallback onPressed,// 必选字段  点击后调用的方法
    ValueChanged<bool> onHighlightChanged,// 按下按钮时，水波纹变化，按下返回true，松手返回false
    ButtonTextTheme textTheme,// button的文字 主题
    Color textColor,// 文字颜色
    Color disabledTextColor,// 按钮为disable时文字的颜色
    Color color,// button的背景颜色
    Color disabledColor,// button 为disable时的背景颜色
    Color focusColor,
    Color hoverColor,
    Color highlightColor,// 高亮，button按下时的颜色
    Color splashColor,// 水波纹的颜色
    Brightness colorBrightness,// button 主题高亮颜色
    double elevation,// 阴影大小
    double focusElevation,// 高亮时阴影大小
    double hoverElevation,
    double highlightElevation,// 高亮时阴影大小
    double disabledElevation,// button为disable时的阴影
    EdgeInsetsGeometry padding,// 内部padding
    ShapeBorder shape,// 形状
    Clip clipBehavior,
    FocusNode focusNode,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,
    Widget child,//button内部显示的内容，如果是文字就是Text，也可以其他
  }) 

示例：

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void onPress1() {
    setState(() {
      _counter++;
    });
  }
  void onHighlightChanged(bool value) {
    print(value);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            RaisedButton(
              onPressed: onPress1,// button 点击后的回调方法
              child: Text('button1'),
              onHighlightChanged: onHighlightChanged,// 按钮按下时返回true  松开时返回false

              // 定义button内text的主题
              textTheme: ButtonTextTheme.accent,//Button text is [ThemeData.accentColor]
//              textTheme: ButtonTextTheme.normal,//Button text is 黑或白 取决于 [ThemeData.brightness]
//              textTheme: ButtonTextTheme.primary,// Button text is 基于 [ThemeData.primaryColor]

              textColor: Colors.red,// 文字颜色，会覆盖textTheme的文字颜色
              disabledTextColor: Colors.grey,// button 禁用时的文字颜色
              color: Colors.blue,// button的背景色
              disabledColor: Colors.orange,// button禁用时的背景色
              focusColor: Colors.blue,//
              hoverColor: Colors.green,
              highlightColor: Colors.yellow,//高亮的颜色
              splashColor: Colors.black,// 水波纹的颜色

              // 按钮的主题亮度，当设置了textColor和color时无效
              colorBrightness: Brightness.dark,
//              colorBrightness: Brightness.light,

              elevation: 5,// 阴影大小
              focusElevation: 15,
              hoverElevation: 20,
              highlightElevation: 25,// 点击时阴影大小
              disabledElevation: 5,// 禁用时的阴影大小

              padding: EdgeInsets.all(10),// 内部padding
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),// 按钮形状

              // 剪裁的边缘效果 ？？
              clipBehavior: Clip.antiAlias,
//              clipBehavior: Clip.antiAliasWithSaveLayer,
//              clipBehavior: Clip.hardEdge,
//              clipBehavior: Clip.none,

//              focusNode: FocusNode(debugLabel: 'aaa',onKey:FocusOn ),?????????????不确定

//              materialTapTargetSize: MaterialTapTargetSize.padded,//？？？
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,//？？？
              animationDuration: Duration(seconds: 31),//？？？
            ),
          ],
        ),
      ),
    );
  }
}

FlatButton

相比RaisedButton，少了阴影效果，FlatButton不能设置阴影，其他属性一致。

FlatButton(
              onPressed: onPress1,// button 点击后的回调方法
              child: Text('button2'),
              onHighlightChanged: onHighlightChanged,// 按钮按下时返回true  松开时返回false

              // 定义button内text的主题
              textTheme: ButtonTextTheme.accent,//Button text is [ThemeData.accentColor]
//              textTheme: ButtonTextTheme.normal,//Button text is 黑或白 取决于 [ThemeData.brightness]
//              textTheme: ButtonTextTheme.primary,// Button text is 基于 [ThemeData.primaryColor]

              textColor: Colors.red,// 文字颜色，会覆盖textTheme的文字颜色
              disabledTextColor: Colors.grey,// button 禁用时的文字颜色
              color: Colors.blue,// button的背景色
              disabledColor: Colors.orange,// button禁用时的背景色
              focusColor: Colors.blue,//
              hoverColor: Colors.green,
              highlightColor: Colors.yellow,//高亮的颜色
              splashColor: Colors.black,// 水波纹的颜色

              // 按钮的主题亮度，当设置了textColor和color时无效
              colorBrightness: Brightness.dark,
//              colorBrightness: Brightness.light,

              padding: EdgeInsets.all(10),// 内部padding
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),// 按钮形状

              // 剪裁的边缘效果 ？？
              clipBehavior: Clip.antiAlias,
//              clipBehavior: Clip.antiAliasWithSaveLayer,
//              clipBehavior: Clip.hardEdge,
//              clipBehavior: Clip.none,

//              focusNode: FocusNode(debugLabel: 'aaa',onKey:FocusOn ),?????????????不确定

//              materialTapTargetSize: MaterialTapTargetSize.padded,//？？？
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,//？？？
            ),

OutlineButton

不能设置阴影 可以设置外边框的颜色、样式、宽度，高亮时边框颜色，禁用时边框颜色。其他与RaisedButton一样。

OutlineButton(
              onPressed: onPress1,// button 点击后的回调方法
              child: Text('button1'),

              // 定义button内text的主题
              textTheme: ButtonTextTheme.accent,//Button text is [ThemeData.accentColor]
//              textTheme: ButtonTextTheme.normal,//Button text is 黑或白 取决于 [ThemeData.brightness]
//              textTheme: ButtonTextTheme.primary,// Button text is 基于 [ThemeData.primaryColor]

              textColor: Colors.red,// 文字颜色，会覆盖textTheme的文字颜色
              disabledTextColor: Colors.grey,// button 禁用时的文字颜色
              color: Colors.blue,// button的背景色
              focusColor: Colors.blue,//
              hoverColor: Colors.green,
              highlightColor: Colors.yellow,//高亮的颜色
              splashColor: Colors.black,// 水波纹的颜色


              padding: EdgeInsets.all(10),// 内部padding
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),// 按钮形状

              // 剪裁的边缘效果 ？？
              clipBehavior: Clip.antiAlias,
//              clipBehavior: Clip.antiAliasWithSaveLayer,
//              clipBehavior: Clip.hardEdge,
//              clipBehavior: Clip.none,

//              focusNode: FocusNode(debugLabel: 'aaa',onKey:FocusOn ),?????????????不确定

            // 边框颜色，宽度，样式
              borderSide: BorderSide(color: Colors.red,width: 2,style: BorderStyle.solid),
              highlightedBorderColor: Colors.green,// 高亮时的颜色
              disabledBorderColor: Colors.blue,//禁用时的颜色
            ),

IconButton 图标按钮

增加了icon属性，可以设置icon的大小，在button中的位置等。也可以显示提示

IconButton(
              icon: Icon(Icons.accessibility_new),
              iconSize: 23, // icon 大小
              padding: const EdgeInsets.all(8.0), //内边距
              alignment: Alignment.bottomCenter, // icon在 button中的位置
              tooltip: 'aaa', //提示信息，长按不动时显示一个小toast，点击时不显示
              onPressed: onPress1,

              color: Colors.blue, // button的背景色
              focusColor: Colors.blue, //
              hoverColor: Colors.green,
              highlightColor: Colors.yellow, //高亮的颜色
              splashColor: Colors.black, // 水波纹的颜色
              disabledColor: Colors.grey,
            ),