Как добавить элементы после 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 для своих элементов в представлении, а затем расположить их так, как вам нужно