VStack 中的 SwiftUI View 相互重叠

Question

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

如何正确对齐它们？下面是我的代码。

 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)

1. 您只能忽略安全区域 background 修饰符，例如:

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

1. 不要重复修饰语!将它们组合在一起并应用一次，例如:

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)

1. 乘以 float 的宽度会导致图像未对齐。所以总是像这样舍入结果:

(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))
}