SwiftUI - всплывающее изображение / текст

Question

Я пишу игру (свою первую), и у меня настроена доска, и код работает для игры. Я использую SwiftUI для укладки основного экрана. Теперь я хочу всплыть текст / изображение, когда игрок бросает письмо. Я видел во многих играх, но не могу найти никакой помощи или инструкции о том, как это делается.

    import SwiftUI


struct ContentView: View {
    @State private var showLetters = [String](repeating: "Blank", count: 36)
    @State private var testLetters = [String](repeating: "Blank", count: 7)
    @State private var originalLetters = [String](repeating: "Blank", count: 7)
    @State private var tray = [String](repeating: "Blank", count: 7)
    @State private var buttonFrames = [CGRect](repeating: .zero, count: 35)
    @State private var score = 0
    @State private var lineNo = 0

    @State var displayItem: Int = -1

    let allowedWords = Bundle.main.words(from: "words.txt")

    var body: some View {


        VStack(spacing: 5) {

            Image("word5sm")


            HStack {
                ForEach(0..<7) { number in
                    Letter(text: self.showLetters[number], index: number, onChanged: self.letterMoved, onEnded: self.letterDropped)
                        .allowsHitTesting(false)
                        .overlay(
                            GeometryReader { geo in
                                Color.clear
                                    .onAppear {
                                        self.buttonFrames[number] = geo.frame(in: .global)

                                    }
                            }
                        )


                }


            }


            HStack {ForEach(7..<14) { number in
                Letter(text: self.showLetters[number], index: number, onChanged: self.letterMoved, onEnded: self.letterDropped)
                                   .allowsHitTesting(false)
                                   .overlay(
                                       GeometryReader { geo in
                                           Color.clear
                                               .onAppear {
                                                  self.buttonFrames[number] = geo.frame(in: .global)
                                               }
                                       }
                                   )
                }
            }


            HStack {ForEach(14..<21) { number in
                Letter(text: self.showLetters[number], index: number, onChanged: self.letterMoved, onEnded: self.letterDropped)
                                   .allowsHitTesting(false)
                                   .overlay(
                                       GeometryReader { geo in
                                           Color.clear
                                               .onAppear {
                                                  self.buttonFrames[number] = geo.frame(in: .global)
                                               }
                                       }
                                   )
                }
            }

            HStack {ForEach(21..<28) { number in
                Letter(text: self.showLetters[number], index: number, onChanged: self.letterMoved, onEnded: self.letterDropped)
                                   .allowsHitTesting(false)
                                   .overlay(
                                       GeometryReader { geo in
                                           Color.clear
                                               .onAppear {
                                                  self.buttonFrames[number] = geo.frame(in: .global)
                                               }
                                       }
                                   )
                }
            }

            HStack {ForEach(28..<35) { number in
                Letter(text: self.showLetters[number], index: number, onChanged: self.letterMoved, onEnded: self.letterDropped)
                                   .allowsHitTesting(false)
                                   .overlay(
                                       GeometryReader { geo in
                                           Color.clear
                                               .onAppear {
                                                  self.buttonFrames[number] = geo.frame(in: .global)
                                               }
                                       }
                                   )
                }
            }

            HStack {

                    ResetButton {
                        self.returnLetters()
                    }

                    NewLine {
                        self.newLine()
                    }

                    CalcButton {
                        self.calcButton()
                    }

                   }

            HStack {
                ForEach(0..<7) { number in
                    Letter(text: self.tray[number], index: number, onChanged: self.letterMoved, onEnded: self.letterDropped)

                }


            }




        }
        .frame(width: 768, height: 856)
        .background(Image("Background"))
        .onAppear(perform: startGame)
        .allowsHitTesting(true)

        }



This is my code for the main screen....

Это то, что я пытаюсь получить, с всплывающим текстом.

Answer 1

Возможно, я неправильно понял, что вы просили. Я не могу использовать ваш пример, поэтому мне пришлось сделать свой собственный:

Это использует ZStack для рисования Text поверх GameView через transition ... обратите внимание на withAnimation блок для активации перехода.

struct GameView: View {
    @Binding var showText: Bool
    var body: some View {
        VStack {
            Rectangle()
                .foregroundColor(.blue)
            .frame(width: 80, height: 180)
            Circle()
                .foregroundColor(.red)
            .frame(width: 50)
            Rectangle()
                .foregroundColor(.green)
            .frame(width: 150, height: 110)
        }
    }
}

struct ContentView: View {

    @State var showText = false

    var body: some View {
        ZStack {
            VStack {
                GameView(showText: self.$showText)
                Button(action: {
                    withAnimation {
                        self.showText.toggle()
                    }
                }, label: {
                    Text("Show / Hide Text")
                })
            }
            if self.showText {
                VStack {
                    Spacer()
                    HStack {
                        Spacer()
                        Text("Hello I am a Text")
                            .foregroundColor(.orange)
                            .font(.system(.largeTitle))
                            .transition(.opacity)
                        Spacer()
                    }
                    Spacer()
                }
            }
        }
    }

}

Надеюсь, это поможет!