Flutter 按钮组件 ElevatedButton 详解

目录

1. 引言

2. ElevatedButton 的基本用法

3. 主要属性

4. 自定义按钮样式

4.1 修改背景颜色和文本颜色

4.2 修改按钮形状和边框

4.3 修改按钮大小

4.4 阴影控制

4.5  水波纹效果

5. 结论

相关推荐

---

1. 引言

        在 Flutter 中，ElevatedButton 是一个常用的按钮组件，它带有背景颜色和阴影效果，适用于强调操作。

        ElevatedButton 继承自 ButtonStyleButton，相比 TextButton 和 OutlinedButton，其默认样式更具有视觉层次感，适用于主要操作按钮。本文将详细介绍 ElevatedButton 的用法、主要属性及自定义方法。

2. ElevatedButton 的基本用法

• 必填参数:

  • onPressed: 点击回调函数（设为 null ，按钮会变为不可点击状，按钮禁用）。

  • child: 子组件（通常为 Text 或 Icon）。

ElevatedButton(
  onPressed: () {
    print('ElevatedButton 被点击');
  },
  child: Text('点击 ElevatedButton'),
)

3. 主要属性

属性	说明
onPressed	按钮点击时的回调函数
onLongPress	长按时触发的回调
child	按钮的内容，如 Text 或 Icon
style	自定义按钮样式

示例：

ElevatedButton(
  onPressed: () {},
  onLongPress: () => print('长按按钮'),
  child: Text('长按试试'),
)

4. 自定义按钮样式

4.1 修改背景颜色和文本颜色

ElevatedButton(
  style: ElevatedButton.styleFrom(
    foregroundColor: Colors.white, // 文字颜色
    backgroundColor: Colors.blue, // 背景色
  ),
  onPressed: () {},
  child: Text('点击 ElevatedButton'),
)

4.2 修改按钮形状和边框

ElevatedButton(
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  ),
  。。。。。
)

4.3 修改按钮大小

ElevatedButton(
  style: ElevatedButton.styleFrom(
    minimumSize: Size(200, 80),
  ),
  onPressed: () {},
  child: Text('大按钮'),
)

4.4 阴影控制

ElevatedButton.styleFrom(
  elevation: 10, // 默认阴影
  shadowColor: Colors.blue, // 阴影颜色
)

4.5  水波纹效果

ElevatedButton.styleFrom(
  splashFactory: InkRipple.splashFactory, // 默认水波纹
  overlayColor: Colors.blue.withValues(green: 0.1), // 直接使用颜色
)

5. 结论

    ElevatedButton 是 Flutter 中常见的按钮组件，适用于强调操作。通过 style 属性可以灵活地修改背景色、形状、大小等。掌握 ElevatedButton 的使用可以帮助开发者创建更美观的交互界面。

相关推荐

Flutter 按钮组件 TextButton 详解-CSDN博客文章浏览阅读1.2k次，点赞50次，收藏51次。TextButton 适用于不需要强调的按钮操作，如取消、返回或辅助功能。通过 style 属性可以自定义颜色、形状、背景等。掌握 TextButton 的使用，可以帮助开发者创建更加灵活和简洁的 UI 交互体验。https://shuaici.blog.csdn.net/article/details/146068020Flutter 基础组件 Image 详解-CSDN博客文章浏览阅读1.2k次，点赞30次，收藏39次。Image 组件是 Flutter 中用于显示图片的核心组件，它支持多种图片来源（本地、网络、资源文件等），并提供丰富的调整选项，如缩放、适应模式、缓存等。本文将详细介绍 Image 组件的使用方式及其重要参数。https://shuaici.blog.csdn.net/article/details/146067128