Flutter开发-Button Widget(按钮)

Material widget标准库中为我们提供了多种式样的Button Widget,RaisedButton, FlatButton,OutlineButton等,他们都是对RawMaterialButton的二次封装,继承了RawMaterialButton的属性和方法,所以MaterailButton都有一些共同特点:
按下的时候都有水波动画效果;
有一个onPressd属性来设置回调方法,如果不设置这个回调方法,则按钮不可交互,也就变成了"Text".

RaisedButton

RaisedButton 是带有一定圆角和阴影以及灰色背景的按钮,并且在点击的时候会有动画效果,其接口:

const RaisedButton({
    Key key,
    @required VoidCallback onPressed,//回调函数
    ValueChanged<bool> onHighlightChanged,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    double elevation,
    double focusElevation,
    double hoverElevation,
    double highlightElevation,
    double disabledElevation,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior,
    FocusNode focusNode,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,
    Widget child,
  })

基本用法:

RaisedButton(
              child: Text("RaisedButton",
                style: TextStyle(color: isTouchRaisedButton ? Colors.orange : Colors.red),
              ),
              highlightColor: Colors.yellow,
              
              textTheme: ButtonTextTheme.accent,
              onPressed: _raisedButtonAction,
            ),

FlatButton

FlatButton默认没有背景色并且也不带阴影,高亮状态会有阴影,其主要接口:

const FlatButton({
    Key key,
    @required VoidCallback onPressed,
    ValueChanged<bool> onHighlightChanged,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior,
    FocusNode focusNode,
    MaterialTapTargetSize materialTapTargetSize,
    @required Widget child,
  })

基本用法:

FlatButton(
            child: Text("FlatButton",
              style: TextStyle(color: isTouchRaisedButton ? Colors.orange : Colors.red),

            ),
            onPressed: _FlatButtonAction,
          ),

OutlineButton

OutlineButton是带有边框的按钮,其接口:

const OutlineButton({
    Key key,
    @required VoidCallback onPressed,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    double highlightElevation,
    this.borderSide,
    this.disabledBorderColor,
    this.highlightedBorderColor,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior,
    FocusNode focusNode,
    Widget child,
  })

基本用法:

OutlineButton(
            child: Text("OutlineButton",
              style: TextStyle(color: isTouchRaisedButton ? Colors.orange : Colors.red),
            ),
            onPressed: _OutlineButtonAction,
            highlightedBorderColor: Colors.red,
          )

IconButton

IconButton默认没有背景,点击有有背景色,其有一个icon属性,主要接口:

IconButton(
            icon: Icon(Icons.today),
            onPressed: _IconButtonAction,
            highlightColor: Colors.red,
          ),

button use

最后编辑于：2019.06.17 14:47:57