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)

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)

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

Answer 2

尝试将图像上的修饰符更改为以下内容。

Image("tmp")
    .resizable()
    .scaledToFit()
    .frame(maxWidth: geometry.size.width * 0.88)