flutter常见组件之Button(第二期)

发布于 2019-01-25

内容如果对你有帮助,帮忙点下赞,你的点赞是我更新最大的动力,谢谢啦!如果在开发的过程遇到问题可以一起讨论,可以加我的QQ群!167646174!也可以加我微信,在群里!
具体代码见github ,欢迎各位Star,以及提issues!

1.RaisedButton

API	作用	参数
color	背景色	-
padding	与文字的内边距	-
textColor	按钮内文字颜色	-
textTheme	按钮主题	-
disabledColor	按钮被禁用显示的颜色	-
disabledTextColor	按钮被禁用时文字显示颜色	-
highlightColor	击高亮的时候显示在控件上面，水波纹下面的颜色	-
splashColor	水波纹颜色	-
colorBrightness	按钮主题高亮	-
elevation	按钮下面的阴影	-
highlightElevation	高亮时候的阴影	-
disabledElevation	按下时候的阴影
clipBehavior	抗锯齿能力	-
onHighlightChanged	水波纹高亮时候回调	-
onPressed	点击事件	-
shape	拓展样式	_
icon	小图标按钮	只有IconButton才会使用到

---扩展---

1.1带斜角的按钮

shape: BeveledRectangleBorder(
       borderRadius: BorderRadius.all(Radius.circular(20))
),

1.2圆按钮

shape: CircleBorder(
   // 圆边颜色
     side: BorderSide(
      color: Colors.black
     )
),

1.3圆角矩形按钮

 shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(10))
  ),

1.4两端半圆按钮

shape: StadiumBorder(),

2.OutlineButton

API同RaisedButton
默认边线且背景透明的按钮

3.FlatButton

API同RaisedButton

4.ButtonBar

API	作用	参数
alignment	对齐方式	-
mainAxisSize	主轴大小，默认MainAxisSize.max	-

5.FloatingActionButton

API	作用
backgroundColor	背景色
elevation	未点击的阴影值
highlightElevation	点击时的阴影值
tooltip	长按文字提示
foregroundColor	按钮里面文字小图标颜色

具体代码见github ,欢迎各位Star,以及提issues!
不定期更新,根据工作繁忙度决定!
以下是往期相关文章:

flutter常见组件API(第一期)

在 Flutter 里有很多的 Button，包括了：MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。

一般常用的 Button 是 MaterialButton、IconButton、FloatingActionButton。

MaterialButton 是一个 Materia 风格的按钮。

new MaterialButton(
    color: Colors.blue,
    textColor: Colors.white,
    child: new Text('点我'),
    onPressed: () {
        // ...
    },
)

一般来说，如果需要点击事件，就要嵌套一个 Button，因为 Container、Text 等组件都没有点击事件。

RaisedButton

RaisedButton 与 MaterialButton 类似。

new RaisedButton(
    child: new Text('点我'),
    onPressed: () {},
)

FlatButton

FlatButton 与 MaterialButton 类似，不同的是它是透明背景的。如果一个 Container 想要点击事件时，可以使用 FlatButton 包裹，而不是 MaterialButton。因为 MaterialButton 默认带背景，而 FlatButton 默认不带背景。

new FlatButton(
    child: new Text('点我'),
    onPressed: () {},
)

IconButton

IconButton 顾名思义就是 Icon + Button 的复合体，当某个 Icon 需要点击事件时，使用 IconButton 最好不过。

new IconButton(
    icon: new Icon(Icons.volume_up),
    tooltip: 'Increase volume by 10%',
    onPressed: () {
        // ...
    },
)

其外，还有已经定义好的 Icon Button：CloseButton、BackButton。他们都有导航返回的能力。

FloatingActionButton

FloatingActionButton 是一个浮动在页面右下角的浮动按钮。

new Scaffold(
    // ...
    floatingActionButton: new FloatingActionButton(
        onPressed: () {},
        child: new Icon(Icons.add_a_photo),
        elevation: 3.0,
        highlightElevation: 2.0,
        backgroundColor: Colors.red,        // 红色
    ),
)

在 Scaffold 里使用的时候，它是一个浮动状态的按钮，在其他地方使用，就不会浮动了。

ButtonBar

ButtonBar 是一个布局组件，可以让 Button 排列在一行。

new ButtonBar(
    children: <Widget>[
        new CloseButton(),
        new BackButton(),
    ],
)

作者：iwakevin
链接：https://www.jianshu.com/p/2f887cadd527
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。