乐趣区

flutter-基础组件-Button

jiezi

Button

Material widget 库中提供了多种按钮 Widget 如 RaisedButton、FlatButton、OutlineButton 等，它们都是直接或间接对 RawMaterialButton 的包装定制，所以他们大多数属性都和 RawMaterialButton 一样。在介绍各个按钮时我们先介绍其默认外观，而按钮的外观大都可以通过属性来自定义，我们在后面统一介绍这些属性。另外，所有 Material 库中的按钮都有如下相同点：

  1. 按下时都会有“水波动画”。
  2. 有一个 onPressed 属性来设置点击回调，当按钮按下时会执行该回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。

RaisedButton

RaisedButton 是一种有“漂浮”效果的按钮，这种按钮默认有阴影和灰色背景，同时，按下后，阴影还会逐渐变深。

RaisedButton(onPressed: () {},
  child: Text("基本"),
),
RaisedButton(onPressed: () {},
  child: Text("textColor 文本的颜色，color 背景颜色，highlightColor 按钮按下的颜色"),
  textColor: Colors.white,
  color: Colors.pink,
  highlightColor: Colors.blue,
),
RaisedButton(child: Text("disabledTextColor 禁用时文本颜色，disabledColor 禁用时背景颜色"),
  disabledTextColor: Colors.white,
  disabledColor: Colors.green,
),
RaisedButton(onPressed: () {},
  child: Text("splashColor 水波的颜色"),
  splashColor: Colors.red,
),
RaisedButton(onPressed: () {},
  child: Text("colorBrightness 按钮主题高亮 Brightness.light"),
  colorBrightness: Brightness.light,
),
RaisedButton(onPressed: () {},
  child: Text("colorBrightness 按钮主题高亮 Brightness.dark"),
  colorBrightness: Brightness.dark,
),
RaisedButton(onPressed: () {},
  child: Text("elevation 按钮下面的阴影"),
  elevation: 10.0,
),
RaisedButton(onPressed: () {},
  child: Text("highlightElevation 高亮时候的阴影"),
  highlightElevation: 5,
),
RaisedButton(onPressed: () {},
  child: Text("disabledElevation 按下的时候的阴影"),
  disabledElevation: 5.0,
),
RaisedButton(onPressed: () {},
  child: Text("onHighlightChanged 水波纹高亮变化回调, 按下返回 true, 抬起返回 false"),
  onHighlightChanged: (bool b) {print(b);
  },
),

效果如下：

说明：

  • textColor：文字的颜色
  • color：按钮的背景颜色
  • highlightColor：按钮按下时的颜色
  • disabledTextColor：禁用时文本颜色
  • disabledColor：禁用时的背景颜色
  • splashColor：水波的颜色
  • colorBrightness：按钮主题，默认浅色
  • elevation：按钮下面的阴影
  • highlightElevation：高亮时候的阴影
  • disabledElevation：按下的时候的阴影
  • onHighlightChanged：水波纹高亮变化回调, 按下返回 true，抬起返回 false

FlatButton

与 RaisedButton 相反，FlatButton 是一种扁平风格的按钮，默认情况下，背景透明并不带阴影，按下后会有背景色：

FlatButton(onPressed: () => {},
  child: Text("FlatButton，默认没有阴影和背景色，其他属性和 RaisedButton 一样"),
),

效果如下：

OutlineButton

OutlineButton 是带边框的按钮，默认情况下，没有阴影且背景透明，按下之后，边框的颜色会变亮，同时出现背景和阴影：

OutlineButton(onPressed: () => {},
  child: Text("normal",),
  highlightColor: Colors.blue,
  highlightedBorderColor: Colors.black,
  disabledBorderColor: Colors.green,
  textColor: Colors.red,
  borderSide: BorderSide(
    color: Colors.blue,
    width: 2.0,
    style: BorderStyle.solid,
  ),
)

说明：

  • color 属性无效

  • borderSide：用于设置边框样式，配置项如下：

    • color：边框颜色
    • width：边框粗细
    • style：边框样式，只有 none 和 solid
  • disabledBorderColor：禁用下的边框颜色
  • highlightedBorderColor：高亮下的边框颜色

IconButton

IconButton 顾名思义，带有 icon 的按钮，不包括文字，默认没有背景，点击后会出现背景：

IconButton(icon: Icon(Icons.volume_up),
  tooltip: '音量增大 10%',
  onPressed: () {},
),

效果如下：

说明：

  • tooltip：长按按钮之后的信息提示
  • icon：在按钮内显示的图标
  • iconSize：图标大小

自定义按钮外观

定义一个背景蓝色，两边圆角的按钮：

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

效果如下：

说明：

在上面的代码中，我们主要通过 shape 来指定其外形为一个圆角矩形。因为按钮背景是蓝色 (深色)，我们需要指定按钮主题 colorBrightness 为 Brightness.dark，这是为了保证按钮文字颜色为浅色。

按钮的大小

在以上介绍的这些 button 组件中，都不能设置其宽度和高度。想要设置其大小，我们可以通过 Container 容器来完成：

Container(
  width: 100.0,
  height: 50.0,
  child: RaisedButton(
    color: Colors.blue,
    highlightColor: Colors.blue[700],
    colorBrightness: Brightness.dark,
    child: Text("Submit"),
    splashColor: Colors.grey,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(100.0),
    ),
    onPressed: () => {},
  ),
),

效果如下：

说明：

Container 容器组件是专门用来控制大小的，我们会在后面的章节中详细介绍。

退出移动版