---

name: makepad-widgets description: "版本：makepad-widgets (dev 分支) | 最后更新：2026-01-19 > > 检查更新：https://crates.io/crates/makepad-widgets" risk: safe source: community

Makepad 组件技能

版本： makepad-widgets (dev 分支) | 最后更新： 2026-01-19

检查更新：https://crates.io/crates/makepad-widgets

你是 Makepad 组件专家。通过以下方式帮助用户：

• 编写代码：按照以下模式生成组件代码
• 回答问题：解释组件属性、变体和用法

何时使用

• 你需要在 Makepad 中使用核心或高级组件。
• 任务涉及组件选择、属性、变体、组合或组件特定行为。
• 你需要 View、Button、标签、富文本或其他 makepad-widgets 构建块的示例。

文档

详细文档请参阅本地文件：

• ./references/widgets-core.md - 核心组件（View、Button、Label 等）
• ./references/widgets-advanced.md - 辅助和高级组件
• ./references/widgets-richtext.md - 富文本组件（Markdown、Html、TextFlow）

重要：文档完整性检查

在回答问题之前，Claude 必须：

1. 读取上面列出的相关参考文件
2. 如果文件读取失败或文件为空：
   • 通知用户："本地文档不完整，建议运行 /sync-crate-skills makepad --force 更新文档"
   • 仍然基于 SKILL.md 模式 + 内置知识回答
3. 如果参考文件存在，将其内容纳入回答

关键模式

1. View（基础容器）

<View> {
    width: Fill
    height: Fill
    flow: Down
    padding: 16.0
    show_bg: true
    draw_bg: { color: #1A1A1A }

    <Label> { text: "Content" }
}

2. Button（按钮）

<Button> {
    text: "Click Me"
    draw_bg: {
        color: #0066CC
        color_hover: #0088FF
        border_radius: 4.0
    }
    draw_text: {
        color: #FFFFFF
        text_style: { font_size: 14.0 }
    }
}

3. Label 带样式

<Label> {
    width: Fit
    height: Fit
    text: "Hello World"
    draw_text: {
        color: #FFFFFF
        text_style: {
            font_size: 16.0
            line_spacing: 1.4
        }
    }
}

4. Image（图片）

<Image> {
    width: 200.0
    height: 150.0
    source: dep("crate://self/resources/photo.png")
    fit: Contain
}

5. TextInput（文本输入）

<TextInput> {
    width: Fill
    height: Fit
    text: "Default value"
    draw_text: {
        text_style: { font_size: 14.0 }
    }
}

组件 Trait（来自源码）

pub trait WidgetNode: LiveApply {
    fn find_widgets(&self, path: &[LiveId], cached: WidgetCache, results: &mut WidgetSet);
    fn walk(&mut self, cx: &mut Cx) -> Walk;
    fn area(&self) -> Area;
    fn redraw(&mut self, cx: &mut Cx);
}

pub trait Widget: WidgetNode {
    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {}
    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep;
    fn draw(&mut self, cx: &mut Cx2d, scope: &mut Scope) -> DrawStep;
    fn widget(&self, path: &[LiveId]) -> WidgetRef;
}

所有内置组件（widgets/src/ 中 84 个文件）

| 类别 | 组件 | |----------|---------| | 基础 | View, Label, Button, Icon, Image | | 输入 | TextInput, CheckBox, RadioButton, Slider, DropDown, ColorPicker | | 容器 | ScrollBars, PortalList, FlatList, StackNavigation, Dock, Splitter | | 导航 | TabBar, Tab, FoldHeader, FoldButton, ExpandablePanel | | 覆盖层 | Modal, Tooltip, PopupMenu, PopupNotification | | 媒体 | Video, RotatedImage, ImageBlend, MultiImage | | 布局 | AdaptiveView, SlidePanel, PageFlip, SlidesView | | 特殊 | Markdown, Html, TextFlow, WebView, KeyboardView | | 工具 | LoadingSpinner, DesktopButton, LinkLabel, ScrollShadow |

核心组件参考

| 组件 | 用途 | 关键属性 | |--------|---------|----------------| | View | 容器 | flow, align, show_bg, draw_bg, optimize | | Button | 可点击 | text, draw_bg, draw_text, draw_icon | | Label | 文本显示 | text, draw_text | | Image | 图片显示 | source, fit | | TextInput | 文本输入 | text, draw_text, draw_cursor, draw_selection | | CheckBox | 切换 | text, selected | | RadioButton | 选择 | text, selected | | Slider | 值滑块 | min, max, step | | DropDown | 选择菜单 | labels, selected | | PortalList | 虚拟列表 | 大列表的高效滚动 | | Modal | 对话框 | 覆盖层对话框 | | Tooltip | 提示 | 悬停提示 |

View 变体

| 变体 | 描述 | |---------|-------------| | SolidView | 纯色背景 | | RoundedView | 圆角 | | RoundedAllView | 单独控制各角 | | RectView | 带边框/渐变的矩形 |