VStack嵌套Text视图时内边距不一致问题求解（无需frame修饰符）

在SwiftUI中使用VStack组件嵌套Text视图时，会出现内边距不一致的问题：当Text视图存在时，VStack的水平与垂直内边距变得不均匀；移除Text视图后，内边距恢复正常。目前发现给Text添加frame修饰符可作为临时解决办法，但不想在UI设计中使用该修饰符，现提供以下可行解决方案：

问题复现代码 #

struct ContentView: View {
    
    private let spacing: CGFloat = 20.0
    @State private var show: Bool = Bool()
    
    var body: some View {
        
        VStack(spacing: spacing) {
            
            if (show) {
                Text("Hello, world!")
                    .background(Color.blue)
            }
            
            Color.black
                .frame(width: 200.0, height: 200.0)
            
            Button("Reset") {
                show.toggle()
            }
            .buttonStyle(.borderedProminent)
        }
        .background(Color.red)
        .padding(spacing)
    }
}

问题截图 #

解决方案 #

1. 添加fixedSize修饰符

让Text保持固有尺寸，避免影响VStack的布局计算：

Text("Hello, world!")
    .background(Color.blue)
    .fixedSize()

2. 用HStack包裹Text

通过HStack让Text在VStack中保持对齐，同时避免改变VStack的整体尺寸：

HStack {
    Text("Hello, world!")
        .background(Color.blue)
    Spacer() // 如需左对齐保留此行，居中则移除
}

3. 强制VStack充满父视图宽度

让VStack占据父视图全部宽度，避免因Text的窄尺寸收缩自身：

VStack(spacing: spacing) {
    // 子视图内容
}
.background(Color.red)
.padding(spacing)
.frame(maxWidth: .infinity)

4. 调整Text的布局优先级

降低Text的布局优先级，让VStack优先参考其他子视图（如黑色方块）的尺寸：

Text("Hello, world!")
    .background(Color.blue)
    .layoutPriority(0)

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