VStack 中的 SwiftUI 视图相互重叠

Question

我在 VStack 中有两个视图。一切看起来都很好，直到我尝试在可访问性设置中放大字体。然后由于某种原因堆栈没有扩展以容纳两个视图。相反，它是将一个视图推到另一个视图之上。见下文。

我怎样才能正确对齐这些？下面是我的代码。

 var body: some View {
    VStack(spacing: 10) {
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")
            .fixedSize(horizontal: false, vertical: true)
            .padding()

        GeometryReader { geometry in
            VStack(spacing: 0) {
                Image("tmp")
                    .resizable()
                    .scaledToFill()
                    .frame(width: geometry.size.width * 0.88)

                VStack(spacing: 10) {
                    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit")
                        .frame(width: geometry.size.width * 0.8, alignment: .leading)
                        .fixedSize(horizontal: false, vertical: true)

                    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit")
                        .frame(width: geometry.size.width * 0.8, alignment: .leading)
                        .fixedSize(horizontal: false, vertical: true)

                    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit")
                        .frame(width: geometry.size.width * 0.8, alignment: .leading)
                        .fixedSize(horizontal: false, vertical: true)
                }
                .padding()
                .background(
                    Rectangle()
                        .fill(Color.white)
                )
            }
            .cornerRadius(10)
            .edgesIgnoringSafeArea(.all)
        }
        .scaledToFit()
        .shadow(color: .gray, radius: 10, x: 5, y: 5)
        .scaledToFill()

        Spacer()
    }
    .background(Rectangle()
        .fill(Color.gray)
        .scaledToFill())
}

Answer 1

问题：

重叠的问题在于本节：

    .scaledToFit() // Not needed
    .shadow(color: .gray, radius: 10, x: 5, y: 5)
    .scaledToFill() // Not needed

答案：

你不需要既不scaledToFit也不scaledToFill存在。

可视化问题：

使用scaledToFill：

使用scaledToFit：

看到蓝色边框了吗？这就是问题所在。

一些技巧：

1. 无需为背景颜色创建虚拟矩形。.background修饰符可以直接接受颜色，例如：

.background(Color.gray)

2. 您只能忽略background修饰符的安全区域，例如：

.background(Color.gray.edgesIgnoringSafeArea(.all))

3. 不要重复修改器！将它们组合在一起并应用一次，例如：

Group {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit")
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit")
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit")
}
.frame(width: geometry.size.width * 0.8, alignment: .leading)
.fixedSize(horizontal: false, vertical: true)

4. 在浮点数中乘以宽度会导致misaligned图像。所以总是把结果四舍五入，如：

(geometry.size.width * 0.88).rounded(.down)

结果：

图片：

重构代码：

var body: some View {
    VStack(spacing: 10) {
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")
            .padding()

        GeometryReader { geometry in
            VStack(spacing: 0) {
                Image("tmp")
                    .resizable()
                    .scaledToFill()
                    .frame(width: (geometry.size.width * 0.88).rounded(.down))

                VStack(spacing: 10) {
                        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit")
                        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit")
                        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit")
                }
                .frame(width: (geometry.size.width * 0.8).rounded(.down), alignment: .leading)

                .padding()
                .background(Color.white)
            }
            .cornerRadius(10)
        }
        .shadow(color: .gray, radius: 10, x: 5, y: 5)
        Spacer()
    }
    .background(Color.gray.edgesIgnoringSafeArea(.all))
}