Flutter学习笔记05-按钮

Material组件库中提供了多种按钮组件如RaisedButton、FlatButton、OutlineButton等，它们都是直接或间接对RawMaterialButton组件的包装定制，所以他们大多数属性都和RawMaterialButton一样。所有Material库中的按钮都有如下相同点：
1.按下时都会有“水波动画”（点击时按钮上会出现水波荡漾的动画）。
2.有一个onPressed和onLongPress属性来设置点击回调，当按钮按下或者长按时会执行回调，如果这两个回调都为null则按钮会处于禁用状态，禁用状态不响应用户点击。并且将按disabledColor属性而不是color属性指定颜色进行着色。

1.RaisedButton

RaisedButton即“凸起按钮”，它默认带有阴影和灰色背景。按下后，阴影会变大。可将RaisedButton添加到大多数平面布局中，例如在复杂的内容列表中，或者宽阔的空间中。避免在已经凸起的内容（例如对话框或卡片）上使用RaisedButton。RaisedButton的最小尺寸为88.0x36.0。代码示例如下：

class EnabledButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {},
      child: Text('Enabled Button', style: TextStyle(fontSize: 18)),
    );
  }
}

// 不可点击按钮
class DisabledButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: null,
      child: Text('Disabled Button', style: TextStyle(fontSize: 18)),
    );
  }
}

// 颜色渐变button
class GradientButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {},
      textColor: Colors.white,
      padding: const EdgeInsets.all(0.0),
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: <Color>[
              Color(0xFF0D47A1),
              Color(0xFF1976D2),
              Color(0xFF42A5F5),
            ],
          ),
        ),
        padding: const EdgeInsets.all(10.0),
        child: const Text(
          'Gradient Button',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

运行效果图如下：

RaisedButton也可以通过RaisedButton.icon方法用按钮图标和标签的Widget创建按钮，代码示例如下：

class RaisedButtonIcon extends StatelessWidget {
  RaisedButtonIcon({
    Key key,
    this.icon = Icons.add_circle,
  }) : super(key: key);

  final IconData icon;

  @override
  Widget build(BuildContext context) {
    return RaisedButton.icon(
      color: Colors.yellow,
      onPressed: () {},
      icon: Icon(icon, size: 25.0, color: Colors.red),
      label: Text('图片文字按钮'),
    );
  }
}

运行效果图如下：

RaisedButton按钮外观可以通过其属性来定义。代码示例如下：

// 自定义RaisedButton
class RaisedButtonCustom extends StatelessWidget {
  RaisedButtonCustom({
    Key key,
    this.text = '自定义按钮',
    this.color = Colors.blueAccent,
    this.shape,
    this.onPressed,
  }) : super(key: key);

  final String text;
  final Color color;
  final ShapeBorder shape;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    final _onPressed = onPressed;
    return RaisedButton(
      child: Text(text),
      color: color,
      colorBrightness: Brightness.dark,
      highlightColor: Colors.yellow,
      disabledColor: Colors.grey,
      textColor: Colors.white,
      disabledTextColor: Colors.grey,
      splashColor: Colors.transparent,
      clipBehavior: Clip.antiAlias,
      padding: EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
      shape: (shape is ShapeBorder)
          ? shape
          : Border.all(
              color: Colors.grey,
              width: 2.0,
              style: BorderStyle.solid,
            ),
      onPressed: () {
        if (_onPressed is VoidCallback) {
          _onPressed();
        }
      },
      onHighlightChanged: (isClick) {
        print(isClick);
      },
    );
  }
}

运行效果图如下：
  • child
    按钮的内容
  • color
    按钮颜色
  • colorBrightness
    按钮亮度 可以设置dark，light两种状态
  • highlightColor
    高亮时背景颜色
  • disabledColor
    按钮失效时的背景颜色
  • textColor
    按钮上的文字颜色，但是前提是不设置字体自身的颜色才会起作用
  • disabledTextColor
    按钮失效上的文字颜色，不能使用文本自己的样式或者颜色时才会起作用
  • splashColor
    按钮水波纹效果颜色，点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚。如果不想要这种效果，可以将颜色设置为透明Colors.transparent
  • clipBehavior
    裁剪， 裁剪等级依次递增：none（默认）、hardEdge、antiAliasWithSaveLayer、antiAlias
  • shape
    通过Shape属性的设置， 改变按钮边框样式和圆角
  • onPressed
    按钮点击事件
  • onHighlightChanged
    改变高亮颜色回调函数，一个按钮会触发两次，按下后改变时触发一次，松手后恢复原始颜色触发一次，参数bool 按下后true 恢复后false。

2.FlatButton

FlatButton即“扁平按钮”，默认背景透明并不带阴影。按下后，会有背景色。
FlatButton故意没有可见的边框，因此必须依靠其相对于其他内容的位置来确定上下文，在对话框和卡片中，它们应该组合在一个底角中。 避免在与其他内容融合的地方使用平面按钮，例如在列表中间。FlatButton的最小尺寸为88.0x36.0。代码示例如下：

class FlatButtonDefault extends StatelessWidget {
  FlatButtonDefault({
    Key key,
    this.isDisabled = true,
  }) : super(key: key);

  // isDisabled： 是否禁用， isDisabled默认true
  final bool isDisabled;

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      color: Colors.blue,
      onPressed: isDisabled
          ? () {
              print('点击FlatButton');
            }
          : null,
      child: Text('FlatButton'),
    );
  }
}

运行效果图如下：

FlatButton同样可以通过.icon方法实现图片文字按钮，代码示例如下：

class FlatButtonIcon extends StatelessWidget {
  FlatButtonIcon({
    Key key,
    this.icon = Icons.add_circle,
  }) : super(key: key);

  final IconData icon;

  @override
  Widget build(BuildContext context) {
    return FlatButton.icon(
      onPressed: () {},
      icon: Icon(icon, size: 25.0, color: Colors.orange),
      label: Text('图片文字按钮', style: TextStyle(color: Colors.white)),
      color: Colors.black,
    );
  }
}

运行效果图如下：

FlatButton按钮也可自定义外观，属性和RaisedButton大体相同。代码示例如下：

class FlatButtonCustom extends StatelessWidget {
  FlatButtonCustom({
    Key key,
    this.text = '自定义按钮',
    this.color = Colors.blueAccent,
    this.shape,
    this.onPressed,
  }) : super(key: key);

  final String text;
  final Color color;
  final ShapeBorder shape;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    final _onPressed = onPressed;
    return FlatButton(
      child: Text(text),
      color: color,
      colorBrightness: Brightness.dark,
      highlightColor: Colors.yellow,
      disabledColor: Colors.grey,
      textColor: Colors.black,
      disabledTextColor: Colors.white,
      splashColor: Colors.purple,
      clipBehavior: Clip.antiAlias,
      padding: EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
      shape: (shape is ShapeBorder)
          ? shape
          : Border.all(
              color: Colors.grey,
              width: 2.0,
              style: BorderStyle.solid,
            ),
      onPressed: () {
        if (_onPressed is VoidCallback) {
          _onPressed();
        }
      },
      onHighlightChanged: (isClick) {
        print(isClick);
      },
    );
  }
}

运行效果图如下：

3. OutlineButton

OutlineButton类似于带有细灰色圆形矩形边框的FlatButton。默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)。默认情况下，OutlineButton的highlightElevation定义为0.0（无阴影） 如果将highlightElevation的值设置为大于0.0，则该按钮将成为RaisedButton和FlatButton之间的交叉 ，其高度增加，并且在按下按钮时其背景变得不透明。OutlineButton的最小尺寸为88.0x36.0。代码示例如下：

class OutlineButtonDefault extends StatelessWidget {
  OutlineButtonDefault({
    Key key,
    this.isDisabled = true,
  }) : super(key: key);

  final bool isDisabled;

  @override
  Widget build(BuildContext context) {
    return OutlineButton(
      // 文本内容
      child: Text('OutlineButton'),
      onPressed: isDisabled ? () {} : null,
    );
  }
}

运行效果图如下：

OutlineButton同样可以通过.icon方法实现图片文字按钮，代码示例如下：

class OutlineButtonIcon extends StatelessWidget {
  final IconData icon;

  OutlineButtonIcon({
    Key key,
    this.icon = Icons.add_circle,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return OutlineButton.icon(
      onPressed: () {},
      icon: Icon(icon, size: 25.0, color: Colors.red),
      label: Text('图片按钮'),
    );
  }
}

运行效果图如下：

OutlineButton按钮也可自定义外观，与RaisedButton、FlatButton不同的是OutlineButton边框形状由Shape定义，外观由borderSide，disabledBorderColor和highlightedBorderColor定义，其他属性大体相同。代码示例如下：

class OutlineButtonCustom extends StatelessWidget {
  OutlineButtonCustom({
    Key key,
    this.text = '自定义按钮',
    this.color = Colors.blueAccent,
    this.shape,
    this.onPressed,
  }) : super(key: key);

  final String text;
  final Color color;
  final ShapeBorder shape;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    final _onPressed = onPressed;
    return OutlineButton(
      // 文本内容
      child: Text(text),
      // 边框的颜色
      borderSide: BorderSide(
        color: Colors.purple,
        width: 2.0,
      ),
      // 设置无效
      // color: Colors.red,
      // 高亮时背景色
      highlightedBorderColor: Colors.black54,
      // 按钮失效时边框颜色
      disabledBorderColor: Colors.red,
      // 文字颜色
      textColor: Colors.black,
      // 按钮失效时背景色
      disabledTextColor: Colors.grey,
      // 按钮内部，墨汁飞溅的颜色 点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚
      splashColor: Colors.transparent,
      // 裁剪， 裁剪等级依次递增：none（默认）hardEdge antiAliasWithSaveLayer antiAlias
      clipBehavior: Clip.antiAlias,
      padding:
          const EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
      // 高亮时候的阴影
      highlightElevation: 0.0,
      // OutLine中只能设置圆角，边框用borderSide
      shape: shape,
      onPressed: () {
        if (_onPressed is VoidCallback) {
          _onPressed();
        }
      },
    );
  }
}

运行效果图如下：

4.IconButton

IconButton即“图标按钮”，不包括文字，默认没有背景，点击后会出现背景。长按可弹出tip文字。图标按钮通常在AppBar.actions字段中使用，但它们也可以在许多其他地方使用。如果可能，图标按钮的命中区域的大小至少为48.0像素，与实际的iconSize无关，以满足Material Design规范中的触摸目标大小要求。代码示例：

class IconButtonDefault extends StatelessWidget {
  IconButtonDefault({
    Key key,
    this.isDisabled = true,
  }) : super(key: key);

  final bool isDisabled;

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.android),
      color: Colors.blueAccent,
      // 长按显示文案
      tooltip: 'Decrease volume by 10',
      onPressed: isDisabled ? () {} : null,
    );
  }
}

运行效果图如下：

IconButton按钮也可自定义外观，属性和前几个按钮大体相同。代码示例如下：

class IconButtonCustom extends StatelessWidget {
  IconButtonCustom(
      {Key key,
      this.color = Colors.blueAccent,
      this.onPressed})
      : super(key: key);

  final Color color;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    final _onPressed = onPressed;
    return IconButton(
        icon: Icon(Icons.volume_off),
        alignment: AlignmentDirectional.center,
        color: Colors.yellow,
        disabledColor: Colors.grey,
        highlightColor: Colors.purple,
        iconSize: 50.0,
        splashColor: Colors.transparent,
        padding:
            EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
        // tooltip: '按下描述文本',
        onPressed: () {
          if (_onPressed is VoidCallback) {
            _onPressed();
          }
        });
  }
}

运行效果图如下：
  • alignment
    图标在IconButton中的定位方式。如果父Widget尺寸大于child Widget尺寸，这个属性设置会起作用, 有很多种对齐方式，具体属性可查阅文档Alignment

代码传送门

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 220,002评论 6赞 509
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,777评论 3赞 396
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 166,341评论 0赞 357
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,085评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,110评论 6赞 395
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,868评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,528评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,422评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,938评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,067评论 3赞 340
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,199评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,877评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,540评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,079评论 0赞 23
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,192评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,514评论 3赞 375
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,190评论 2赞 357