1.继承关系
Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > MaterialButton > RaisedButton、FlatButton、OutlineButton
2.介绍
RaisedButton |
Material Design中的button, 一个凸起的材质矩形按钮。 |
FlatButton |
Material Design中的button,一个没有阴影的材质设计按钮。 |
OutlineButton |
Material Design中的button,RaisedButton和FlatButton之间的交叉:一个带边框的背景透明的按钮,当按下按钮时,其高度增加,背景变得不透明。 |
三个控件都继承于MaterialButton,查看源码会发现MaterialButton由RawMaterialButton(无主题Button)构建的。
而RawMaterialButton与CupertinoButton是一对button组合,都继承于StatefulWidget,前者是google风格,后者IOS风格!
RaisedButton、FlatButton、OutlineButton、CupertinoButton四种button在文章后面给出效果及示例,不对参数详解,主要对MaterialButton的创建及其参数详解。
注意使用CupertionBUtton要导入库:import 'package:flutter/cupertino.dart';
当然还有其他button:
IconButton比较简单,用于创建仅包含图标的按钮,参数就不再讲解;
以下后面文章会陆续详解!
• DropdownButton,一个显示可供选择的选项的按钮。
• FloatingActionButton,材质应用程序中的圆形按钮。
• InkWell,实现平面按钮的墨水飞溅部分。
后面文章会陆续详解!
3.创建MaterialButton
const MaterialButton({
Key key,
@required this.onPressed,
this.onHighlightChanged,
this.textTheme,
this.textColor,
this.disabledTextColor,
this.color,
this.disabledColor,
this.highlightColor,
this.splashColor,
this.colorBrightness,
this.elevation,
this.highlightElevation,
this.disabledElevation,
this.padding,
this.shape,
this.clipBehavior = Clip.none,
this.materialTapTargetSize,
this.animationDuration,
this.minWidth,
this.height,
this.child,
}) : super(key: key);
4.参数详解
4.1 VoidCallback onPressed
点击激活按钮时调用的方法
4.2ValueChanged<bool> onHighlightChanged
按下和抬起时都会调用的方法,详看后面示例
4.3 ButtonTextTheme textTheme
定义按钮的基色,以及按钮的最小尺寸,内部填充和形状的默认值。
默认为ButtonTheme.of(context).textTheme。
也可以指定值:
enum ButtonTextTheme {
normal, // 按钮文本为黑色或白色,具体取决于ThemeData.brightness
accent, // 按钮文本是ThemeData.accentColor
primary, // 按钮文本基于ThemeData.primaryColor
}
4.4 Color textColor
按钮文本的颜色
4.5 Color disabledTextColor
未设置按钮点击回调时使用的文本颜色
4.6 Color color
按钮的填充颜色