词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Claude Code Flutter 按钮技能：配置 iOS 风格主操作

English

Claude Code 安装步骤

  1. 打开 GitHub 固定提交的 `.claude/skills/button-system/SKILL.md`，核对内容与使用条件。
  2. 在自己的项目中创建 `.claude/skills/button-system/`，把核对后的文件保存为 `.claude/skills/button-system/SKILL.md`。
  3. 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/button-system`。

中文摘要

选用主题化 ButtonWidget 为 Flutter 页面提供主要动作，在需要自定义加载状态时使用基础交互组件。

SKILL.md 中文导读

可复现示例

给步道列表选择一个主题化主按钮。使用练习文字和组件现有的大号蓝色变体，并在本地测试其回调。
`Browse trails` · `ButtonWidget.label` · `LargeButtonSize` · `BlueButtonColor`

工作步骤

  1. 区分页面主操作与需要底层交互控制的场景。
  2. 选择主题尺寸、颜色和清晰的按钮标签。
  3. 观察渲染，并在局部组件测试验证传入回调。

验收方法

界面显示 `Browse trails`，按钮使用 `LargeButtonSize` 和 `BlueButtonColor`。触发该按钮后执行传入的回调。

GitHub 原文 · 更新日期

适用环境

在已接入 Sampaio Tech iOS Design System 的 Flutter 示例项目中打开 Claude Code。确认 ButtonWidget 和 CupertinoButtonWidget 可从所用组件版本访问。

常见问题

加载状态需要改成独立按钮组件吗？

项目的基础 `CupertinoButtonWidget` 已支持加载指示与回调控制。按现有构造器接入并分别验证等待和完成两种状态。

相关指南