SuperAPI AI 工具集

responsive-gate-size-not-platform

前端与建站

查看项目

更新于 10-17 16:16

技能介绍

本文介绍在Kotlin/Compose开发中,如何正确实现自适应布局:应基于窗口自身的宽度与高度关系进行条件判断,而非依据运行平台。

用途

用于指导开发者构建响应式界面,确保布局能正确响应窗口形状变化(如分屏、桌面窗口缩放、设备旋转),避免因错误地依赖平台判断而导致布局异常。

主要能力

  1. 正确门控:通过screenInfo.wDP < screenInfo.hDP判断窗口是否为“竖向”(高大于宽),该值随窗口变化而更新,重组会跟随。
  2. 避免陷阱:
    • 一个布尔值不应回答多个问题(如同时控制“是否沉浸式”和“使用哪个头部”)。
    • 避免platform && shape组合判断,这仍会因平台而错误。
    • 门控所拥有的几何值必须同步翻转,如宽高比、缩放、遮罩尺寸等。
    • 宽分支中测量剩余空间时,应基于最窄支持窗口计算,而非最宽窗口的列宽。
    • 统一方形窗口的判断(如wDP < hDP与hDP >= wDP不一致)。
    • 浮动界面在分支切换后需重新定位。
  3. 验证方法:提供grep命令检查所有形状门控、平台检查残留、门控拥有的所有值、分支内尺寸设置,并通过连续调整窗口大小而非旋转来测试。

使用方式

  • 在需要根据窗口形状切换布局时,使用窗口尺寸信息进行判断。
  • 确保门控所控制的每个几何属性(宽高比、高度、缩放类型、遮罩高度等)都随形状变化而调整。
  • 运行文中提供的grep命令进行代码审查,识别不一致或污染的门控。
  • 在桌面环境中拖动窗口宽度进行连续测试,观察布局切换和剩余列宽。

适用场景

  • 需要适配手机、平板、桌面等多种窗口尺寸的Compose应用。
  • 支持分屏、自由窗口调整大小的场景。
  • 需要避免因平台判断导致的布局错误。

限制

  • 内容基于特定项目(maxrave-dev/kotlin-footguns)的实践,可能不适用于所有框架。
  • 未提供完整的安装步骤或依赖信息。
  • 部分具体实现细节(如getScreenSizeInfo()的实现)暂未提供。
  • 验证命令依赖grep和find工具,适用于Unix-like环境。