Flutter Button(按钮)

在 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

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 里使用的时候,它是一个浮动状态的按钮,在其他地方使用,就不会浮动了。

ButtonBar

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

new ButtonBar(
    children: <Widget>[
        new CloseButton(),
        new BackButton(),
    ],
)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,040评论 3 119
  • 内容 抽屉菜单 ListView WebView SwitchButton 按钮 点赞按钮 进度条 TabLayo...
    小狼W阅读 5,482评论 0 10
  • 如果没有遇见你 我不知道爱的真谛 如果没有嫁给你 我不知道什么是婚姻 如果没有孕育生命 我不懂得母亲的不易 如果没...
    其乐绒绒阅读 2,206评论 3 4
  • 云贵高原的秋天好似是来的要早一些,但也难讲。 闷热无风的晴天里,滚烫烫的阳光总照的人浑身发麻,放眼望去找不见不打伞...
    一尾羊阅读 1,878评论 0 1
  • 1. 引言 2. "商业周期"为什么是消费者住房周期 观点: 从长远来看,典型的经济衰退都与新的住房开支密切相关。...
    若血阅读 2,755评论 0 0