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元素将放置在该位置下方。然后，偏移量将移动元素，从而导致事物重叠。

如果您详细说明了所需的确切布局，我们也许可以帮助您重新设计而不会产生偏移。

您的文本可能想要一个基线偏移量或alignmentGuide，而不是偏移量。您的图片可能还需要一个alignmentGuide，使其与您要匹配的内容对齐。

Answer 2

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

如何在ZStack之后添加元素？

2 个答案: