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)

1. 将宽度乘以浮点数会产生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)