如何通过代码按设备尺寸比例适配StackView的宽高？

我来帮你搞定这个适配问题！其实用代码实现StackView的比例缩放适配并不复杂，核心是借助Auto Layout的比例约束，让StackView的宽高跟着父视图或屏幕尺寸按比例调整，这样就能在小屏设备（比如SE）上也保持合适的大小。下面给你两种实用的实现方式：

方法一：基于父视图的比例约束（推荐） #

这种方式让StackView的尺寸相对于它的父视图（比如控制器的view）按比例缩放，适配性更强，不管父视图布局怎么变都能保持比例。

首先创建StackView和文本框：

// 创建StackView并设置基础属性
let stackView = UIStackView()
stackView.axis = .vertical // 可根据需求改为.horizontal
stackView.spacing = 8
stackView.alignment = .fill
stackView.distribution = .fillEqually // 文本框均分空间，可按需调整
view.addSubview(stackView)

// 添加示例文本框
for _ in 0..<3 {
    let textField = UITextField()
    textField.borderStyle = .roundedRect
    stackView.addArrangedSubview(textField)
}

然后添加关键的比例约束：

stackView.translatesAutoresizingMaskIntoConstraints = false

// 激活约束：让StackView居中，宽高占父视图的80%和60%（可自行调整比例）
NSLayoutConstraint.activate([
    stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    stackView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.8),
    stackView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.6)
])

这里的multiplier就是比例系数，比如0.8代表StackView宽度是父视图宽度的80%，在任何设备上都会保持这个比例，SE上自然不会出现尺寸过大的问题。

方法二：基于基准设备的尺寸比例计算 #

如果需要严格对齐某台基准设备（比如iPhone8）的视觉效果，可以先计算当前设备与基准设备的尺寸比例，再换算StackView的大小：

// 基准设备（iPhone8）的屏幕尺寸
let baseScreenWidth: CGFloat = 375
let baseScreenHeight: CGFloat = 667

// 获取当前设备的屏幕尺寸
let currentScreen = UIScreen.main.bounds
let widthRatio = currentScreen.width / baseScreenWidth
let heightRatio = currentScreen.height / baseScreenHeight

// 基准设备上StackView的目标尺寸
let baseStackWidth: CGFloat = 300
let baseStackHeight: CGFloat = 400

// 计算当前设备的StackView尺寸
let targetStackWidth = baseStackWidth * widthRatio
let targetStackHeight = baseStackHeight * heightRatio

// 添加约束
stackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    stackView.widthAnchor.constraint(equalToConstant: targetStackWidth),
    stackView.heightAnchor.constraint(equalToConstant: targetStackHeight)
])

额外优化技巧 #

• 如果你想让StackView保持固定的宽高比（比如4:3），可以添加宽高比约束，这样只需要设置一个维度的比例即可：

stackView.widthAnchor.constraint(equalTo: stackView.heightAnchor, multiplier: 4/3).isActive = true

之后只需要设置宽度相对于父视图的比例，高度会自动按4:3计算。

• 注意StackView的distribution属性，比如用.fillEqually时，内部的文本框会自动均分StackView的空间，配合比例约束就能让文本框也跟着适配。

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