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


 上一篇
Flutter开发-Layout -线性布局(Row和Column) Flutter开发-Layout -线性布局(Row和Column)
群组欢迎加入群组,闲聊工作&技术&问题等 线性布局Row和Column        线性布局可以理解为沿着水平或者垂直方向布局子Widget
2019-06-17
下一篇 
Flutter开发-Text Widget(文本) Flutter开发-Text Widget(文本)
群组欢迎加入群组,闲聊工作&技术&问题等 在Flutter中文本的显示可以用Text Widget来实现.Text的初始化方法必须带上一个string类型的参数,Text类中也定义了一些常用的属性. Text基本属性///
2019-06-14
  目录