如何实现SwiftUI响应式UI：适配全设备及统一文本显示

核心适配方法 #

• 利用GeometryReader获取容器尺寸
  直接读取父容器或屏幕的宽高，按比例调整布局元素的大小、间距。示例：

  GeometryReader { geometry in
      Button("提交") {
          // 点击逻辑
      }
      .frame(width: geometry.size.width * 0.8, height: 50)
      .padding(.top, geometry.size.height * 0.1)
  }
  

• 使用相对布局API（iOS 16+）
  用relativeFrame替代嵌套GeometryReader，更简洁地实现相对宽高：

  Button("提交") {}
  .relativeFrame(width: .percent(80))
  .frame(height: 50)
  

• 自适应字体与动态类型兼容
  结合系统动态类型，让字体随用户偏好缩放，同时保证布局稳定：

  Text("标题")
      .font(.system(size: 24, design: .rounded))
      .minimumScaleFactor(0.8) // 防止文本溢出
      .dynamicTypeSize(...DynamicTypeSize.accessibility3) // 限制缩放范围
  

• 按尺寸类/设备类型切换布局
  根据水平尺寸类（紧凑/宽松）或设备类型，切换布局结构：

  @Environment(\.horizontalSizeClass) private var horizontalSizeClass
  
  var body: some View {
      if horizontalSizeClass == .compact {
          VStack { /* 竖屏布局 */ }
      } else {
          HStack { /* 横屏/平板布局 */ }
      }
  }
  

• 相对间距与内边距
  避免固定数值的padding/spacing，改用基于容器尺寸的比例值：

  VStack(spacing: UIScreen.main.bounds.width * 0.06) {
      Text("第一行")
      Text("第二行")
  }
  .padding(.horizontal, .relative(5)) // iOS 17+ 相对内边距API
  

Figma中设置的24pt是基于逻辑像素的基准值，但不同iPhone的屏幕尺寸、ppi不同，要实现视觉大小一致，需基于物理尺寸适配：

方法一：基于基准宽度的相对字体计算 #

以Figma常用的375pt（iPhone 8宽度）为基准，按当前设备宽度比例缩放字体：

extension Font {
    static func figmaFont(size: CGFloat, baseWidth: CGFloat = 375) -> Font {
        let scale = UIScreen.main.bounds.width / baseWidth
        return .system(size: size * scale)
    }
}

// 使用方式
Text("标题")
    .font(.figmaFont(size: 24))

方法二：利用UIFontMetrics实现物理尺寸一致 #

通过系统字体度量，让字体在不同设备上保持相同物理大小：

extension Font {
    static func physicalFont(size: CGFloat) -> Font {
        let uiFont = UIFont.systemFont(ofSize: size)
        let scaledFont = UIFontMetrics.default.scaledFont(for: uiFont, compatibleWith: UITraitCollection(preferredContentSizeCategory: .large))
        return Font(scaledFont)
    }
}

// 使用方式
Text("标题")
    .font(.physicalFont(size: 24))

注意事项 #

• 若完全禁用动态类型（不推荐，违反无障碍规范），可添加.disableAutosizing()：

  Text("标题")
      .font(.system(size: 24))
      .disableAutosizing()
  

内容的提问来源于stack exchange，提问作者Saurabh Pathak