Flutter学习笔记05-按钮

作者: zombie | 来源:发表于2020-09-17 17:37 被阅读0次

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

代码传送门

Flutter学习笔记05-按钮

1.RaisedButton

2.FlatButton

3. OutlineButton

4.IconButton

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

程序员