SwiftUI中修改水平内边距导致segmentedSlider高度异常变化的原因

1. Text固有尺寸与容器约束的双向影响 #

SwiftUI的布局是双向解析的：父容器会根据子视图的固有尺寸调整自身，子视图也会响应父容器的约束。当你给Text设置padding(.horizontal, 0)时，Text的固有宽度仅为文本内容宽度，如果你的SegmentedSlider容器（比如HStack）存在最小宽度约束（可能是你显式设置的，或者父视图传递的），容器会试图拉伸内部元素来满足宽度要求。这种拉伸会触发布局优先级的调整——如果内部的选中指示器/背景视图的高度优先级高于Text，容器会优先满足这些视图的高度约束，导致整体高度被额外撑开。

2. Padding改变子视图的布局权重分配 #

增大Text的水平padding后，Text的整体宽度会显著增加，直接“填满”容器的最小宽度需求，此时容器无需再拉伸其他元素。同时，SwiftUI的HStack会根据子视图的实际尺寸分配空间：当Text宽度较小时，容器会给背景/指示器视图分配更多剩余空间，而这类视图如果采用了相对高度（比如基于宽度的比例），就会出现“宽度越小，高度越大”的反向变化；当Text宽度足够时，背景视图的尺寸被Text限制，高度会自动匹配Text的行高，整体高度自然降低。

3. 未明确约束容器的高度范围 #

如果你的SegmentedSlider没有给外层容器设置明确的frame(height:)或fixedSize(vertical:)，SwiftUI会默认取内部所有子视图的最大高度作为整体高度。当Text无水平padding时，内部背景视图可能因宽度不足而被拉伸出更高的尺寸；而当Text带padding后，背景视图的高度被Text的行高限制，整体高度就会随之减小。

举个典型的错误示例：

struct SegmentedSlider: View {
    let options: [String]
    @State private var selectedIndex = 0
    
    var body: some View {
        HStack(spacing: 0) {
            ForEach(options.indices, id: \.self) { index in
                Text(options[index])
                    .padding(.horizontal, 0) // 此时高度异常
                    .background(selectedIndex == index ? Color.blue : Color.clear)
            }
        }
        .background(Color.gray.opacity(0.2))
        // 未设置明确高度约束
    }
}

当把padding(.horizontal)改为20时，Text宽度撑开容器，背景视图高度匹配Text行高，整体高度恢复正常。

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