如何在ZStack之后添加元素？

Question

当我尝试将一个元素放在ZStack之后时，该元素最终位于一些ZStack元素的顶部。有没有办法让元素呈现在ZStack下，或者我需要创建另一个视图？下面的代码也带有渲染的屏幕。

​

​

struct ContentView: View {
    var body: some View {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [Color.init(hex: "050607"), Color.init(hex: "585A5E")]), startPoint: .bottom, endPoint: .top)
                .edgesIgnoringSafeArea(.all)
            VStack {
                Text("Tesla")
                    .font(.subheadline)
                    .foregroundColor(Color.init(hex: "C9CBCD"))
                Text("Cybertruck")
                    .font(.largeTitle)
                .bold()
                    .foregroundColor(.white)
                VStack {
                    ZStack{
                        HStack {
                            Text("297")
                                .font(.system(size:150))
                                .fontWeight(.thin)
                            Text("km")
                                .font(.subheadline)
                                .fontWeight(.thin)
                                .offset(y: -45)
                        }
                        .foregroundColor(.white)
                        Image("cybertruck")
                        .resizable()
                        .scaledToFit()
                            .frame(width: 500)
                            .offset(x: 50, y: 110)

                    }
                    Text("A/C is turned on")
                        .foregroundColor(.white)
                    Text("Tap to open the car")
                }
            }
        }
    }
}

Answer 1

您的问题在于offset的使用。在视图周围放置边框，您将能够看到正在发生的事情。offset会导致元素在其框架之外呈现。ZStack将是保存原始位置所需的大小，而VStack元素将被放置在该大小下。然后，偏移量将移动元素，导致事物重叠。

如果您详细说明了您想要的确切布局，我们也许能够帮助您重新设计，而不会产生偏差。

您的文本可能需要baselineOffset或alignmentGuide，而不是偏移量。你的图像可能还想要一个alignmentGuide，让它与你想要匹配的任何东西保持一致。

Answer 2

您可以为视图中的元素设置zIndex，然后根据需要对它们进行排列