figma-ios-horizontal-layout

Figma 横向布局适配策略

核心原则

默认：从左往右按设计稿绝对位置布局（SnapKit）

特殊：容器左右间隙满足条件时，使用动态宽度 + 子元素比例缩放

注：垂直方向的布局（导航栏高度、安全区、吸底按钮）由 figma-ios-vertical-layout-safearea 负责。

---

⭐️ 数据包优先：先查 _layout_hint.horizontal_pattern

figma-ios-preload-data 阶段 1 已经把"左右间隙差 ≤ 2 / 接近全宽 / 自由布局"算好写入：

"_layout_hint": {
  "horizontal_pattern": "symmetric" | "near_full_width" | "free",
  "left_inset": 16.0,
  "right_inset": 16.0,
  "child_count": 4
}

判断流程：

1. 容器节点存在 _layout_hint.horizontal_pattern → 直接采用其结果
   • symmetric → 对称布局策略（动态宽度 + 比例缩放）
   • near_full_width → 接近全宽（动态宽度 + 子元素策略选择）
   • free → 端固定布局（默认）
2. 没有 _layout_hint → fallback 到下面的"步骤 1：判断容器宽度策略"自己算

---

步骤 1：判断容器宽度策略（仅当 _layout_hint 缺失时）

从 Figma 读取容器数据，计算左右间隙：

# Figma 数据
screen_width = 375  # 设计稿屏幕宽度
container_x = 16    # 容器相对屏幕 x
container_width = 343

# 计算左右间隙
left_margin = container_x  # 16
right_margin = screen_width - container_x - container_width  # 375 - 16 - 343 = 16

判断规则

# 场景 1：对称布局（左右间隙相等，偏差 ≤2pt）
if abs(left_margin - right_margin) <= 2:
    → 容器使用动态宽度
    → 子元素按比例缩放

# 场景 2：接近全宽布局（左右边距都较小）
elif right_margin <= 20 and left_margin <= 80:
    → 容器使用动态宽度
    → 子元素根据类型选择策略（见步骤 2）

# 场景 3：固定宽度布局（默认）
else:
    → 容器使用固定宽度
    → 子元素使用固定位置

---

步骤 2：判断子元素布局策略

前提：容器已确定为动态宽度（场景 1 或 2）

子元素策略

# 检查 1：是否是滚动容器？
if container.is_scrollable or 'scroll' in container.name.lower():
    → 使用 UICollectionView/UIScrollView
    → 子元素固定尺寸、固定间距
    → 走 [figma-ios-listview-recognition](../figma-ios-listview-recognition/SKILL.md) 逻辑

# 检查 2：多个横向排列的子元素（非滚动）
elif len(horizontal_children) >= 1:
    → 子元素按比例缩放（位置、宽度、高度都缩放）
    → child_x = figma_x × scale
    → child_width = figma_width × scale
    → child_height = figma_height × scale

# 默认：固定布局（不应该出现）
else:
    → 子元素使用固定位置和尺寸

---

代码生成规则

场景 1：对称布局（动态宽度 + 比例缩放）

示例：步骤条（左 16pt，右 16pt）

// 计算缩放比例
let screenWidth = /* host.utils.screen_width */
let scale = (screenWidth - 32) / 343.0  // (屏幕宽 - 左右边距) / Figma 容器宽

// 容器：动态宽度
stepIndicatorContainer.snp.makeConstraints { make in
    make.leading.trailing.equalToSuperview().inset(16)
    make.height.equalTo(68)
}

// 子元素：位置和宽度都按比例缩放
// Figma 数据: step1(x=18, width=56), sep1(x=91, width=24), step2(x=131, width=71)

step1View.snp.makeConstraints { make in
    make.leading.equalToSuperview().offset(18 * scale)  // 位置缩放
    make.width.equalTo(56 * scale)  // ✅ 宽度也缩放
    make.centerY.equalToSuperview()
}

stepSeparator1.snp.makeConstraints { make in
    make.leading.equalToSuperview().offset(91 * scale)
    make.width.height.equalTo(24 * scale)  // ✅ 尺寸缩放
    make.centerY.equalToSuperview()
}

step2View.snp.makeConstraints { make in
    make.leading.equalToSuperview().offset(131 * scale)
    make.width.equalTo(71 * scale)  // ✅ 宽度缩放
    make.centerY.equalToSuperview()
}