SuperAPI AI 工具集

lazy-item-grouping-beats-arrangement-gap

前端与建站

查看项目

更新于 10-17 16:16

技能介绍

用途:该技能聚焦 Compose 惰性列表中"item 边界即间距边界"的问题,帮助开发者理解并修正由 item 拆分与 Arrangement.spacedBy 共同造成的间距叠加。

主要能力:

  1. 揭示合成间距的来源:屏幕上的间距 = 列表 arrangement + 上方块自身底部 padding + 下方块自身顶部 padding,三者分属不同文件、不同维护者,源码中没有哪个常量等于实际渲染值。
  2. 给出合并方案:把必须作为一个整体阅读的块(如标题 + 导航器 + 计数)放入同一个 item,内部用 Column(verticalArrangement = Arrangement.spacedBy(...)) 加必要时的单个显式 Spacer 管理间距,使所有数值集中可见。
  3. 指出常见陷阱:拆分 item 是性能直觉,但对页面顶部少量常驻块并不划算,反而把间距控制权交给为段间距选定的常量;同一段块间距只能有一个所有者,要么列表统一负责、块不带顶部 padding,要么块各自负责、列表不加间距;条件块应把条件放在 item { } 外层,避免空 item 仍被两侧加间距形成双重死区;不要用负 padding 抵消叠加间距;contentPadding 只负责列表首尾空间,spacedBy 不处理首尾。
  4. 合并 item 会合并 key:声明了 key 的列表,三个 item 合成一个后需为新块提供稳定 key,否则丢失滚动位置与 item 状态的锚点。
  5. 提供验证方法:用 grep 定位采用 Arrangement.spacedBy 的惰性列表、统计 item 数量分布、汇总命名间距常量,再大幅改动列表 arrangement 常量观察全页哪些间距变化,以此判断间距归属;同时提醒检查未编辑的另一布局分支。

使用方式:资料以 Kotlin/Compose 代码示例和 shell grep 命令给出,开发者可对照代码模式与 grep 命令在项目中定位并修正问题。

适用场景:Android Jetpack Compose 惰性列表布局调试、列表间距归属排查、多分支布局下的间距一致性检查。

限制:资料仅针对 Compose 惰性列表,未提供其他框架或平台的适配说明;示例中的常量与组件名为示意,实际项目需按自身结构调整;未提及性能数据、版本要求或自动化验证工具。