flutter：原生按钮组件

大前端 flutter

发布时间 : 2025-08-17 00:00

字数:497 阅读 :

常见的 Material 按钮组件
ElevatedButton
其它按钮

常见的 Material 按钮组件

按钮	说明	示例
ElevatedButton	带阴影、凸起效果的按钮，适合强调性操作	提交、确认
TextButton	扁平按钮，没有阴影，主要用于次要操作	“取消”、“更多”
OutlinedButton	带边框的按钮，没有阴影	“注册”、“返回”
IconButton	只有图标的按钮	常见于导航栏、工具栏
FloatingActionButton (FAB)	悬浮按钮，一般用于页面的主要操作	新增、编辑

ElevatedButton

定义

const ElevatedButton({
  Key? key,
  // 点击事件
  required VoidCallback? onPressed,
  // 长按
  VoidCallback? onLongPress,
  // hover
  ValueChanged<bool>? onHover,
  ValueChanged<bool>? onFocusChange,

  // 样式
  ButtonStyle? style,

  // 焦点
  FocusNode? focusNode,
  bool autofocus = false,
  Clip clipBehavior = Clip.none,

  // 按钮内容
  required Widget? child,
})

ButtonStyle 样式定义

class ButtonStyle with Diagnosticable {
  /// Create a [ButtonStyle].
  const ButtonStyle({
    // 文字
    this.textStyle,
    // 背景色
    this.backgroundColor,
    // 前景色
    this.foregroundColor,
    // 鼠标滑过颜色
    this.overlayColor,
    // 阴影
    this.shadowColor,
    // 阴影高度
    this.elevation,
    // 内边距
    this.padding,
    // 最小尺寸
    this.minimumSize,
    // 固定 size
    this.fixedSize,
    // 最大最小尺寸
    this.maximumSize,
    // 边框
    this.side,
    // 形状
    this.shape,
    // 鼠标光标
    this.mouseCursor,
    // 紧凑程度
    this.visualDensity,
    // 配置可以按下按钮的区域的尺寸
    this.tapTargetSize,
    // 定义 [shape] 和 [elevation] 的动画更改的持续时间
    this.animationDuration,
    // 检测到的手势是否应该提供声音和/或触觉反馈
    this.enableFeedback,
    // 子元素对齐方式
    this.alignment,
    // 墨水效果
    this.splashFactory,
  });

代码

ElevatedButton(
  // 按钮点击事件
  onPressed: () {},
  style: ButtonStyle(
    // 背景色
    backgroundColor: WidgetStateProperty.all(Colors.yellow),
    // 前景色
    foregroundColor: WidgetStateProperty.all(Colors.red),
    // 鼠标滑过颜色
    overlayColor: WidgetStateProperty.all(Colors.blue),
    // 阴影颜色
    shadowColor: WidgetStateProperty.all(Colors.red),
    // 阴影高度
    elevation: WidgetStateProperty.all(8),
    // 边框
    side: WidgetStateProperty.all(
      const BorderSide(width: 5, color: Colors.cyan),
    ),
    // 固定尺寸
    fixedSize: WidgetStateProperty.all(const Size(200, 100)),
  ),
  child: const Text('ElevatedButton'),
),

其它按钮

// 文字按钮
TextButton(onPressed: () {}, child: const Text('文字按钮')),

// 边框按钮
OutlinedButton(onPressed: () {}, child: const Text('边框按钮')),

// 图标按钮
IconButton(
  onPressed: () {},
  icon: const Icon(Icons.holiday_village),
  iconSize: 50,
  color: Colors.amber,
),

// 带图标 TextButton
TextButton.icon(
  onPressed: () {},
  icon: const Icon(Icons.holiday_village),
  label: const Text('带图标 TextButton'),
),

// 带图标 OutlinedButton
OutlinedButton.icon(
  onPressed: () {},
  icon: const Icon(Icons.holiday_village),
  label: const Text('带图标 OutlinedButton'),
),