Flutter RaisedButton、FlatButton、OutlineButton 参数详解

最新推荐文章于 2025-09-29 20:10:17 发布

原创

最新推荐文章于 2025-09-29 20:10:17 发布 · 2w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#flutter # RaisedButton #FlatButton #OutlineButton

本文详细介绍了Flutter中的MaterialButton组件，包括RaisedButton、FlatButton和OutlineButton。它们都继承自MaterialButton，并由RawMaterialButton构建。文章着重解析了onPressed、textColor、color、shape等关键参数，并提供了示例代码。

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
}