SuperAPI AI 工具集

makepad-2-0-layout

前端与建站

查看项目

更新于 10-27 03:31

技能介绍

用途

该技能用于构建或排查 Makepad 布局,基于项目已安装的 Splash/script DSL 语法。适用场景包括:使用 Makepad 2.0 编写 UI 代码、诊断组件尺寸、布局流、裁剪、滚动或弹层定位问题。使用前应先确认项目所采用的 Makepad 具体版本与 DSL 语法;资料中的示例假设采用 2.0 风格的导入语法,且并非可编译的测试夹具,不应将现有可运行应用按示例整体迁移。对应的组件与源码示例可参考 Makepad 官方仓库。

核心概念

Makepad 不使用 CSS flexbox 或 CSS grid,而是采用 layout turtle 系统:turtle 逐个遍历子组件并放置。两个核心概念为:

  • Walk:单个组件如何确定自身尺寸(width、height、margin)。
  • Layout:容器如何排列子组件(flow、spacing、padding、align)。

每个容器组件(View、SolidView、RoundedView、ScrollYView 等)同时具备 Walk 属性(自身尺寸)与 Layout 属性(子组件排列方式)。

主要能力

Walk 尺寸系统:width/height 支持 Fill(占满剩余空间,为默认值)、Fit(收缩至内容大小)、固定像素值,以及带约束的写法 Fill{min: 100 max: 500}、Fit{max: Abs(300)}。margin 用于在组件外侧添加间距,支持统一数值、Inset{top, bottom, left, right} 结构以及 0. 零值写法。

height: Fit 关键规则:容器默认 height 为 Fill;当 Fill 处于 Fit 容器内时会形成循环依赖并解析为 0 像素,这是 Makepad 中最常见的布局问题。规则是:除非父容器具有固定或 Fill 高度,否则每个 View、SolidView、RoundedView 等容器都应显式设置 height: Fit。例外包括:位于固定高度父容器内、位于最终可追溯到已知尺寸(如 Window body)的 Fill 高度链内;ScrollYView 需要有限视口,可用已知高度父容器中的 Fill,或显式固定/受限高度。

Layout 排列系统:flow 支持 Right(从左到右,默认)、Down(从上到下)、Overlay(层叠)、Flow.Right{wrap: true} 与 Flow.Down{wrap: true}(换行);spacing 控制子组件间距;padding 控制容器内边距,支持统一数值与 Inset;align 以 0.0 到 1.0 的坐标值定位子组件,提供 Center、HCenter、VCenter、TopLeft 等简写;clip_x/clip_y 控制溢出内容是否被裁剪。

弹层定位:clip_x/clip_y 设为 false 仅允许局部子组件绘制到父组件边界之外,并不等同于窗口级浮层。弹窗、菜单、提示框等需要独立浮动的元素应使用顶层 Modal/overlay 容器。在 overlay 内定位弹层时,优先使用 walk.abs_pos 显式锚定,而非运行时修改 margin:通过 button.area().clipped_rect(cx) 取得触发器的实际屏幕矩形(包含 view_shift 与裁剪),计算屏幕坐标后写入 popup.walk.abs_pos = Some(dvec2(x, y))。用 script_apply_eval! 推送 margin.top/margin.left 来定位弹层通常结果不稳定,因为仍在与布局协商而非显式锚定。

滚动容器:ScrollYView(仅垂直,适合长列表与页面内容)、ScrollXView(仅水平,适合宽表格与时间线)、ScrollXYView(双轴,适合地图、画布与大型内容)。可滚动视图使用 height: Fill 而非 Fit,因为需要固定视口,内容在视口内增长。

Filler 占位组件:Filler{} 等价于 View{width: Fill height: Fill},用于推开兄弟组件。只在 width: Fit 的兄弟组件之间使用;与 width: Fill 兄弟并列时会平分剩余空间并导致文本被裁剪,此时可改用 width: Fill 的容器自然推开 Fit 兄弟。

常见布局模式:资料给出垂直页面布局与水平工具栏示例,涵盖标题/副标题/分隔线/正文的纵向排列,以及固定 44 像素高、带背景色与按钮的工具栏。

使用方式与注意事项

技能以文字说明与代码示例为主,示例采用 use mod.prelude.widgets.* 导入语法。资料提示:上游 API 变更频繁,需对照当前 Makepad 2.0 文档核实;不要在未经用户明确批准的情况下运行附带脚本。更完整的上游文档见 references/extended-guide.md。除上述内容外,该技能的具体安装命令、收费方式、支持的平台与版本兼容范围暂未提供。