SuperAPI AI 工具集

variant-layout-math-stays-in-the-variant

前端与建站

查看项目

更新于 10-17 16:16

技能介绍

本条目是一份关于 Jetpack Compose 布局计算的实践指南,核心主张是:当同一屏幕的两种外观各自都需要“恰好一屏”的测量与布局计算时,这份计算应分别保留在各自的变体中,而不是提取成共享代码。

用途 文档面向需要在两种视觉变体(look)中分别实现“适配一屏”布局的 Kotlin/Compose 开发者。所述场景为:测量头部、主视觉区(hero)与信息栏的高度,再按 gap = (screenHeight − header − hero − info − minimum) / 2 计算上下间距,并以 minimum 为下限,使内容在视觉上居中且恰好触及首屏底部。文档给出了一段 LaunchedEffect 代码示例作为该计算的参考写法。

主要能力与经验要点

  1. 不建议提取共享逻辑:两种外观会逐渐分化,其中一种可能静默分化。共享版本必须同时满足两套约束的并集,导致简单外观为复杂外观付出额外 effect 执行与重排的代价,且难以判断约束归属。文档建议保留两份各约二十行、各带注释的副本。
  2. effect 的 key 必须涵盖函数体读取的所有值,包括被测量的 hero 高度。固定方形 hero 的副本未把 heroDp 列为 key,属于潜在的陈旧读取;复制到 hero 高度会变化的副本后就成为真实缺陷,间距沿用上一条轨道的数值,整列发生偏移。
  3. 测量元素是不可见占位符,其宽高比必须镜像实际绘制内容。若播放视频时绘制帧为 16:9 而占位符仍为方形,其下所有数值都会出错;该条件表达式应与绘制帧所用表达式一致,开始漂移时可放到状态持有者上。
  4. 间距占位符可以动画(如 animateContentSize()),测量占位符不可以,否则会形成测量与动画互相触发的循环。
  5. 预留空间的占位符不得接收指针输入,否则会吞掉本应落在其所代表元素上的手势;裸 Spacer 是惰性的,带背景或点击的 Box 则不是。
  6. 下限只是下限而非保证:窗口较矮时算术结果为负,分支返回 minimum,列溢出并滚动,这是正确行为;绝不能让负间距被实际使用,因为它不会被钳制而会重叠。
  7. 保存在可保存状态中的测量高度会在下次测量前返回;旋转或进程恢复后,首帧会用上一配置的数值计算间距并在下一轮修正,通常不可见,偶尔出现一帧跳变;若需要,可用 screenInfo 是否与测量时的条件匹配来保护整段逻辑。

验证方式 文档提供了若干 grep 检查:并排阅读两份代码块,确认仅在两套外观真正不同处存在差异;列出每个测量占位符及其声明的宽高比,须与各自外观绘制的帧匹配(匹配回调时不要依赖参数名拼写);确认没有任何测量元素对自身尺寸做动画;并手工在 hero 形状会变化的外观上切换纯音频轨道与视频轨道,确认信息栏回到同一位置,往返后出现永久偏移即说明缺少 effect key。

适用场景与限制 适用于 Kotlin/Jetpack Compose 中多视觉变体、需要精确一屏适配的界面开发。文档为经验性实践说明,未提供库、版本、平台兼容性或性能数据;具体 API 行为与效果需以实际项目验证为准。