专栏首页向全栈出发Flutter Button(按钮控件)

Flutter Button(按钮控件)

本文介绍Flutter中常用按钮控件,包括:MaterialButton 、RaisedButton 、FlatButton 、IconButton 、FloatingActionButton 、OutlineButton 、ButtonBar 、lButton.icon()。

Material 组件库中提供了多种按钮组件,它们都有如下共同属性。

  1. 按下时都会有“水波动画”(又称“涟漪动画”,就是点击时按钮上会出现水波荡漾的动画)。
  2. 有一个onPressed属性来设置点击回调,当按钮按下时会执行该回调,如果不提供该回调则按钮会处于禁用状态,禁用状态不响应用户点击。

1、按钮点击示例

2、按钮类型已经含义

不同的Button拥有不同的功能,正确使用对应的Button可以事半功倍。

Button

含义

MaterialButton

默认按钮,扁平,背景透明。按下后,会有背景色。

RaisedButton

"漂浮"按钮,带有阴影和背景。按下后,阴影会变大。

FlatButton

扁平按钮,默认背景透明。按下后,会有背景色,与MaterialButton一致。

IconButton

图标按钮,只能是纯图标,按钮不可展示文案。

FloatingActionButton

浮动按钮,可显示文字和图标,二者选其一。

OutlineButton

外边框按钮,可设置按钮外边框颜色。

ButtonBar

水平布局的按钮容器,可放置多个Button或Text。

lButton.icon()

带图标文字混合按钮,RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数,它可以轻松创建带图标和文字的按钮。

3、按钮使用示例

3.1、MaterialButton

默认按钮,扁平,背景透明。按下后,会有背景色。 示例见图一。

          new MaterialButton(
            child: new Text('MaterialButton'),
            onPressed: () {},
          ),

3.2、RaisedButton

"漂浮"按钮,带有阴影和背景。按下后,阴影会变大。也是应用最常见的按钮。 示例见图一。

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

3.3、FlatButton

扁平按钮,默认背景透明。按下后,会有背景色,与MaterialButton一致。 示例见图一。

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

3.4、IconButton

图标按钮,只能是纯图标,按钮不可展示文案。 示例见图一。

          new IconButton(
            icon: new Icon(Icons.wifi),
            tooltip: 'click IconButton',
            onPressed: () {},
          ),

3.5、FloatingActionButton

浮动按钮,可显示文字和图标,二者选其一。 可在页面通过设置floatingActionButton来指定页面悬浮按钮,默认在右下角。 示例见图二。

      appBar: new AppBar(
        title: new Text("按钮控件"),
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.add_a_photo),
//            child: new Text('FloatingActionButton'),
        tooltip: 'click FloatingActionButton',
        onPressed: () {},
      ),

3.6、OutlineButton

外边框按钮,可设置按钮外边框颜色。 示例见图二。

            OutlineButton(
            child: Text("OutlineButton"),
            borderSide: new BorderSide(color: Colors.pink),
            onPressed: () {},
          ),

3.7、ButtonBar

水平布局的按钮容器,可放置多个Button或Text。 示例见图一。

          new ButtonBar(
            children: <Widget>[
              new BackButton(),
              new CloseButton(),
              new Text('ButtonBar组件'),
              new RaisedButton(
                child: new Text('Button'),
                onPressed: () {},
              ),
            ],
          ),

3.8、Button.icon

带图标文字混合按钮,RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数,它可以轻松创建带图标和文字的按钮。 示例见图二。

          RaisedButton.icon(
            icon: Icon(Icons.send),
            label: Text("发送"),
            onPressed: () {},
          ),
          OutlineButton.icon(
            icon: Icon(Icons.add),
            label: Text("添加"),
            onPressed: () {},
          ),
          FlatButton.icon(
            icon: Icon(Icons.info),
            label: Text("详情"),
            onPressed: () {},
          ),

3.8、自定义Button样式

示例见图二。

          FlatButton(
            color: Colors.blue,
            highlightColor: Colors.blue[700],
            colorBrightness: Brightness.dark,
            splashColor: Colors.grey,
            child: Text("Submit"),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0)),
            onPressed: () {},
          )

4、效果图

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter问题:Column里面嵌套两个SingleChildScrollView无法滚动

    今天测试SingleChildScrollView的时候,发现在Column里面嵌套两个SingleChildScrollView时,第二个SingleChil...

    用户7744319
  • Flutter Text(文本控件)

    Flutter中的Text相当于Android中的TextView,用于展示文本。

    用户7744319
  • Flutter TextField(输入控件)

    可以更改角落的光标颜色,宽度和半径。 例如,这里我没有明显的原因制作一个圆形的红色光标。

    用户7744319
  • 使用MiniProfiler小结

    可以对一个页面本身,及该页面通过直接引用、Ajax、Iframe形式访问的其它页面进行监控。

    小蜜蜂
  • Python-使用for循环遍历文件

    fd.read()         从头读到位,读完后指针指向文件的末尾,返回的是字符。

    py3study
  • Want VS Needs,产品经理基于场景的需求挖掘

    阿尔伯塔大学的一门关于软件设计的课程中,用Want(需要)和Needs(需求)来区分这两者,前者是“希望在产品中看到的功能”而后者是“确定的具体问题,留待产品解...

    博文视点Broadview
  • 10分钟学会理解和解决MySQL乱码问题

    本文将详细介绍MySQL乱码的成因和具体的解决方案。在阅读本文之前,强烈建议对字符集编码概念还比较模糊的同学 阅读下博主之前对相关概念的一篇科普:十分钟搞清字符...

    小小科
  • 编码原理(附一)---算术编码

    算术编码是一种无损的数据压缩方法,也是熵编码的一种方法。与其他熵编码比较而言,其他熵编码通常是把输入的消息区分为符号,然后对每个符号进行编码,而算术编码是呢是根...

    视界音你而不同
  • springmvc之ReuqestMapping中使用Ant风格的映射请求

    即在@RequestMapping(value="/user/*/createUser")中使用。

    绝命生
  • Spring读取mybatis在多个jar包下的的mapper文件

    刚开始的时候我的配置文件在同名目录下都是在/mapper下,导致只能读取一个jar中的mapper文件。先解决如下: 1.将mapper文件放在不能放在同名的目...

    似水的流年

扫码关注云+社区

领取腾讯云代金券