乐趣区

关于dart:Flutter-117Flutter手把手教程UI控件多图预警按钮详解

jiezi

作者 | 弗拉德
起源 | 弗拉德（公众号：fulade_me)

Material 格调中罕用的按钮有三种 RaiseButton、FlatButton、OutlineButton。
这三种按钮都是继承了 MaterialButton，而MaterialButton 又继承自StatelessWidget。

RaiseButton：带有暗影成果的按钮，默认带有灰色背景，点击上来会有点击成果和暗影。
FlatButton: 扁平格调按钮，点击上来会有背景色彩。
OutlineButton: 带有边框的按钮，且边框会在点击时扭转色彩。

1. RaisedButton

咱们先来看 RaisedButton 的构造方法

  const RaisedButton({
    Key key,
    /// 点击后的回调办法
    @required VoidCallback onPressed,
    /// 长按后的回调办法
    VoidCallback onLongPress,
    /// 高亮时候的回调办法
    ValueChanged<bool> onHighlightChanged,
    /// 鼠标指针的光标进入或悬停在此按钮(这个用于 Web 端或 PC 端)
    MouseCursor mouseCursor,
    /// 文本的主题，这个跟 MaterialApp 的属性 theme 无关
    ButtonTextTheme textTheme,
    /// 文本色彩
    Color textColor,
    /// 不可点击时的文本色彩
    Color disabledTextColor,
    /// 背景色彩
    Color color,
    /// 可点击时的背景色彩
    Color disabledColor,
    /// 获取焦点时的色彩(用于 Web 端或 PC 端)
    Color focusColor,
    /// 指鼠标悬停时的色彩(用于 Web 端或 PC 端)
    Color hoverColor,
    /// 高亮时的色彩
    Color highlightColor,
    /// 水波纹色彩，按下松开会有水波纹成果
    Color splashColor,
    /// 按钮主题色彩，默认浅色
    Brightness colorBrightness,
    /// 默认时的 暗影大小
    double elevation,
    /// 选中时的 暗影大小
    double focusElevation,
    /// 指鼠标悬停时的暗影大小
    double hoverElevation,
    /// 高亮时的暗影大小
    double highlightElevation,
    /// 不可选中时的暗影大小
    double disabledElevation,
    /// 内边距 跟布局无关
    EdgeInsetsGeometry padding,
    VisualDensity visualDensity,
    /// 设置按钮的形态
    ShapeBorder shape,
    /// 切边的款式
    Clip clipBehavior = Clip.none,
    FocusNode focusNode,
    bool autofocus = false,
    MaterialTapTargetSize materialTapTargetSize,
    /// 动画的工夫
    Duration animationDuration,
    /// 子控件
    Widget child,
  })

1.1 一个最简略的 RaisedButton

RaisedButton(child: Text("RaisedButton"),
    onPressed: () {},
);

成果:

1.2 不可点击状态

RaisedButton(child: Text("不设置 onPressed"),
    disabledColor: Colors.blue,
    disabledTextColor: Colors.red,
);

如果不设置 onPressed 参数，默认是不可点击的，当然咱们仍然能够设置不可点击时候的文字色彩和背景色彩。须要留神 onPressed 是@required参数，不倡议不传此参数。

1.3 文本色彩

RaisedButton(child: Text("textColor 红色"),
    textColor: Colors.red,
    onPressed: () {},
);

textColor能够设置文字的色彩。

1.4 设置形态

RaisedButton(onPressed: () {},
    child: Text("椭圆形"),
    shape: StadiumBorder(),);

通过 shape 参数能够设置按钮的形态，常见的形态有 RoundedRectangleBorder 矩形、CircleBorder圆形、StadiumBorder椭圆形、BeveledRectangleBorder八边形。

1.5 背景色彩

RaisedButton(child: Text("背景色彩"),
    color: Colors.red,
    onPressed: () {},
);

通过传入 color 能够设置按钮的背景色彩。

1.6 高亮色彩

RaisedButton(onPressed: () {},
    child: Text("高亮红色"),
    highlightColor: Colors.red,
);

传入 highlightColor 参数来设置选中时候的色彩。

1.7 水波纹红色

RaisedButton(onPressed: () {},
    child: Text("水波纹红色"),
    splashColor: Colors.red,
);

splashColor能够帮忙咱们设置点击后的水波纹色彩。

1.8 高亮回调

RaisedButton(child: Text("高亮变动回调"),
    onPressed: () {},
    onHighlightChanged: (value) {print("高亮切换");
    },
);

onHighlightChanged能够接管一个回调办法，当按钮被按下并高亮的时候会回调该办法。
1.9 长按回调

RaisedButton(child: Text("长按回调"),
    onPressed: () {},
    onLongPress: () {print("长按回调");
    },
);

onLongPress能够接管一个长按回调办法，当按钮被长按的时候会回调该办法。

1.10 设置暗影的大小

RaisedButton(child: Text("暗影设置 20"),
    onPressed: () {},
    elevation: 20.0,
);

elevation参数能够设置暗影的大小，默认的暗影比拟小，能够通过此参数设置更大的暗影大小。

想体验以上代码运行成果，能够到我的 Github 仓库我的项目flutter_app->lib->routes->flat_button_page.dart，能够下载下来运行并体验。

2. FlatButton

FlatButton的结构函数参数跟 RaisedButton 参数基本一致，设置形式也是一样的。

  const FlatButton({
    Key key,
    /// 点击后的回调
    @required VoidCallback onPressed,
    /// 长按后的回调
    VoidCallback onLongPress,
    /// 点击 高亮后的回调
    ValueChanged<bool> onHighlightChanged,
    /// 鼠标指针的光标进入或悬停在此按钮(这个用于 Web 端或 PC 端)
    MouseCursor mouseCursor,
    /// 文本的主题，这个跟 MaterialApp 的属性 theme 无关
    ButtonTextTheme textTheme,
    /// 文字色彩
    Color textColor,
    /// 不可点击时的文本色彩
    Color disabledTextColor,
    /// 背景色彩
    Color color,
    /// 不可点击时的背景色彩
    Color disabledColor,
    /// 获取焦点时的色彩(用于 Web 端或 PC 端)
    Color focusColor,
    /// 指鼠标悬停时的色彩(用于 Web 端或 PC 端)
    Color hoverColor,
    /// 高亮时的色彩
    Color highlightColor,
    /// 水波纹色彩，按下松开会有水波纹成果
    Color splashColor,
    /// 按钮主题色彩，默认浅色
    Brightness colorBrightness,
    /// 内边距 跟布局无关
    EdgeInsetsGeometry padding,
    VisualDensity visualDensity,
    /// 按钮的形态
    ShapeBorder shape,
    /// 切边的款式
    Clip clipBehavior = Clip.none,
    FocusNode focusNode,
    bool autofocus = false,
    MaterialTapTargetSize materialTapTargetSize,
    /// 子控件
    @required Widget child,
  })

2.1 一个最简略的 FlatButton

FlatButton(child: Text("FlatButton"),
    onPressed: () {},
);


咱们能够看到绝对比于 RaisedButton，FlatButton 默认扁平化格调的。

2.2 设置形态

FlatButton(onPressed: () {},   
    child: Text("椭圆形"),
    shape: StadiumBorder(),);

通过传入 shape 参数可设置 FlatButton 的形态。须要留神的是：设置好的形态，只有当点击上来的时候才能够看到成果。

其余的 不可点击状态、文本色彩、背景色彩、高亮色彩、水波纹红色、高亮回调、长按回调 等状态的设置代码跟 RaisedButton 的设置形式一样。

想体验 FlatButton 的运行成果，能够到我的 Github 仓库我的项目flutter_app->lib->routes->flat_button_page.dart，能够下载下来运行并体验。

3. OutlineButton

咱们来看 OutlineButton 的构造函数

const OutlineButton({
    Key key,
    /// 点击后的回调
    @required VoidCallback onPressed,
    /// 长按后的回调
    VoidCallback onLongPress,
    /// 鼠标指针的光标进入或悬停在此按钮(这个用于 Web 端或 PC 端)
    MouseCursor mouseCursor,
    /// 文本的主题，这个跟 MaterialApp 的属性 theme 无关
    ButtonTextTheme textTheme,
    /// 文字色彩
    Color textColor,
    /// 不可点击时的文本色彩
    Color disabledTextColor,
    /// 背景色彩
    Color color,
    /// 获取焦点时的色彩(用于 Web 端或 PC 端)
    Color focusColor,
    /// 指鼠标悬停时的色彩(用于 Web 端或 PC 端)
    Color hoverColor,
    /// 高亮时的色彩
    Color highlightColor,
    /// 水波纹色彩，按下松开会有水波纹成果
    Color splashColor,
     /// 高亮时的暗影大小
    double highlightElevation,
    /// 边框的延时
    this.borderSide,
    /// 不可用时 边框的色彩
    this.disabledBorderColor,
    /// 选中时边框的样色
    this.highlightedBorderColor,
    /// 内边距 跟布局无关
    EdgeInsetsGeometry padding,
    VisualDensity visualDensity,
    /// 按钮的形态
    ShapeBorder shape,
    /// 切边的款式
    Clip clipBehavior = Clip.none,
    FocusNode focusNode,
    bool autofocus = false,
    /// 子控件
    Widget child,
  })

3.1 简略的 OutlineButton

OutlineButton(onPressed: () {},
    child: Text("OutlineButton"),
);

它的边框默认是灰色的，点击选中的时候会变为蓝色。

3.2 Border 的款式

OutlineButton(child: Text("Border 色彩"),
    borderSide: BorderSide(color: Colors.red, width: 2),
    highlightColor: Colors.yellow,
    highlightedBorderColor: Colors.green,
    onPressed: () {},
);

borderSide能够接管一个 BorderSide 的对象，该对象能够设置色彩和宽度，同样咱们也能够通过设置 highlightColor 和highlightedBorderColor来设置选中的背景色彩和选中的边框色彩。

其余的 不可点击状态、文本色彩、高亮色彩、水波纹红色、高亮回调、长按回调 等状态的设置代码跟 RaisedButton 的设置形式一样。

想体验 FlatButton 的运行成果，能够到我的 Github 仓库我的项目flutter_app->lib->routes->outline_button_page.dart，能够下载下来运行并体验。

4. IconButton

4.1 简略的 IconButton

IconButton(icon: Icon(Icons.local_taxi),
    onPressed: () {},
);

IconButton能够接管一个 Icon 类的的参数，Flutter 自带了很多 Icon 详情可见这里
4.1 带有选中提醒的 IconButton

IconButton(icon: Icon(Icons.local_cafe),
    tooltip: "Cafe Button",
    color: Colors.red,
    onPressed: () {},
);

通过设置 tooltip 属性，能够设置按钮按下的弹出提醒文字。咱们这里设置了 Cafe Button 的文字。

4.2 自定义图片的 IconButton

IconButton(icon: Image.asset("images/flutter_icon_100.png"),
    onPressed: () {},
);

咱们同样能够提供一个 Image 类型的 Icon，这样就满足咱们设置不同的图片按钮。
如下图：

想体验 IconButton 的运行成果，能够到我的 Github 仓库我的项目flutter_app->lib->routes->icon_button_page.dart，能够下载下来运行并体验。

以上就是 Material 格调的按钮以及详解，如果你想理解 Cupertino 格调按钮，能够点击这里。
咱们日常开发中大多数状况下都会应用 Material 格调的款式。

退出移动版