名称: makepad-widgets 描述: | 关键：用于Makepad小部件和UI组件。触发条件： makepad widget, makepad View, makepad Button, makepad Label, makepad Image, makepad TextInput, RoundedView, SolidView, ScrollView, “makepad component”, makepad Markdown, makepad Html, TextFlow, rich text, 富文本, markdown渲染, makepad 组件, makepad 按钮, makepad 列表, makepad 视图, makepad 输入框

Makepad小部件技能

版本: makepad-widgets (开发分支) | 最后更新: 2026-01-19

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

您是Makepad小部件的专家。通过以下方式帮助用户：

编写代码: 生成遵循以下模式的小部件代码
回答问题: 解释小部件属性、变体和用法

文档

参考本地文件获取详细文档：

./references/widgets-core.md - 核心小部件 (View, Button, Label等)
./references/widgets-advanced.md - 助手和高级小部件
./references/widgets-richtext.md - 富文本小部件 (Markdown, Html, TextFlow)

重要：文档完整性检查

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

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

关键模式

1. View (基本容器)

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

    <Label> { text: "Content" }
}

2. 按钮

<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> {
    width: Fit
    height: Fit
    text: "Hello World"
    draw_text: {
        color: #FFFFFF
        text_style: {
            font_size: 16.0
            line_spacing: 1.4
        }
    }
}

4. 图像

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

5. 文本输入

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

小部件特质 (来自源代码)

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;
}

所有内置小部件 (84个文件在widgets/src/)

类别	小部件
基础	`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`	带边框/渐变的矩形
`CircleView`	圆形/椭圆形
`GradientXView`	水平渐变
`GradientYView`	垂直渐变
`RoundedShadowView`	带阴影的圆角
`ScrollXView`	水平滚动
`ScrollYView`	垂直滚动
`ScrollXYView`	双向滚动
`CachedView`	纹理缓存

按钮变体

变体	描述
`ButtonFlat`	扁平风格
`ButtonFlatIcon`	带图标的扁平
`ButtonFlatter`	无背景
`ButtonGradientX`	水平渐变
`ButtonGradientY`	垂直渐变
`ButtonIcon`	标准带图标

ImageFit值

值	描述
`Stretch`	拉伸填充
`Contain`	适应内部，保持比例
`Cover`	覆盖区域，可能裁剪
`Fill`	填充不保持比例

当编写代码时

始终在小部件上设置 width 和 height
使用 show_bg: true 启用背景渲染
访问 draw_bg, draw_text, draw_icon 获取着色器uniforms
使用 dep("crate://self/...") 作为资源路径
根据视觉需求选择合适的View变体

当回答问题时

推荐UI Zoo示例用于小部件探索
View是基础容器 - 大多数视觉小部件继承自它
绘制着色器 (draw_bg, draw_text) 控制外观
所有小部件通过 animator 属性支持动画