SwiftUI中HStack铺满宽度、等间距布局及字体适配问题

你遇到的核心问题是单个Text独立缩放导致的样式不一致，默认情况下每个Text会在空间不足时单独缩小，而非整个HStack内容同步缩放；同时手动添加Spacer易造成子VStack间距不均。以下是针对性解决方案：

1. 统一子VStack间距 #

直接给外层HStack设置spacing参数，替代手动添加Spacer()，确保所有子视图间距完全一致：

HStack(spacing: 24) { // 数值可根据视觉需求调整
    // 子VStack内容...
}

2. 实现整体统一缩放 #

将minimumScaleFactor()和scaledToFit()应用到整个HStack上，而非单个Text，让所有标签和数值同步缩放，保持字体大小统一：

HStack(spacing: 24) {
    VStack(alignment: .center) {
        Text("速度")
            .font(.title)
        Text("60 km/h")
            .font(.title)
    }
    VStack(alignment: .center) {
        Text("距离")
            .font(.title)
        Text("1234 m")
            .font(.title)
    }
    // 其他子VStack...
}
.frame(maxWidth: .infinity) // 让HStack占满可用宽度，减少内容挤压
.scaledToFit() // 自动按比例缩放内容，避免溢出容器
.minimumScaleFactor(0.6) // 设置最小缩放比例，保证内容可读

关键注意事项： #

• 移除单个Text上的minimumScaleFactor()，避免独立缩放导致的大小差异。
• .scaledToFit()会让整个HStack内容同步缩放，确保所有元素样式统一。

额外对齐优化 #

若需保证子VStack宽度一致，可给每个子VStack设置最小宽度：

VStack(alignment: .center) {
    Text("速度")
        .font(.title)
    Text("60 km/h")
        .font(.title)
}
.frame(minWidth: 80) // 固定最小宽度，避免空间不足时宽度差异过大

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