Flutter Button(按钮)

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

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

《Flutter Button(按钮)》

MaterialButton 是一个 Materia 风格的按钮。

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

《Flutter Button(按钮)》

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

RaisedButton

RaisedButtonMaterialButton 类似。

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

FlatButton

FlatButtonMaterialButton 类似,不同的是它是透明背景的。如果一个 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 里使用的时候,它是一个浮动状态的按钮,在其他地方使用,就不会浮动了。

《Flutter Button(按钮)》

ButtonBar

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

new ButtonBar(
    children: <Widget>[
        new CloseButton(),
        new BackButton(),
    ],
)
    原文作者:iwakevin
    原文地址: https://www.jianshu.com/p/2f887cadd527
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞