Codex Compose Multiplatform 列表页面|规划 Scaffold 和下拉刷新
EnglishCodex 安装步骤
- 打开 GitHub 固定提交的 `.agents/skills/compose-ui/SKILL.md`,核对内容与使用条件。
- 在自己的项目中创建 `.agents/skills/compose-ui/`,把核对后的文件保存为 `.agents/skills/compose-ui/SKILL.md`。
- 在该项目根目录启动 Codex,输入 `$compose-ui` 并选择同名技能。
中文摘要
使用 MobileUp CMP 模板里的 Scaffold、工具栏与加载状态组件组织 Kotlin 列表页,明确系统栏和内容边距的归属。
SKILL.md 中文导读
可复现示例
为模板准备一个可下拉刷新的产品列表页面结构。
{"screen":"ProductList","state":"PagedState","pullRefresh":true,"toolbar":"AppToolbar"}工作步骤
- 用 Scaffold 作为页面根组件,给工具栏明确职责。
- 在内容组件收集状态,并按是否支持刷新选择加载状态组件。
- 把 Scaffold 的 innerPadding 交给列表加载组件,并在预览里提供模拟状态。
验收方法
草稿以 `Scaffold` 为根组件,内容区使用 `PullRefreshLceWidget`,从根组件传入 `innerPadding`,列表应用加载组件提供的 `contentPadding`。
GitHub 原文 · 更新日期
适用环境
在 Codex 中打开 MobileUp CMP 模板项目。示例使用模板已有的 AppToolbar、Replica 加载状态和 PullRefreshLceWidget。
常见问题
详情页只需要初次加载,选哪个组件?
模板给这类详情或表单提供 `LceWidget`。如果页面无需异步加载,则可跳过加载状态组件。