SwiftUI - 弹出图像/文本 [英] SwiftUI - Pop up Image/Text

问题描述

我正在编写一个游戏(我的第一个游戏)并且我已经设置好电路板并且代码适用于游戏.我正在使用 SwiftUI 来堆叠主屏幕.我现在想在玩家丢信时弹出一个文本/图像.我看过很多游戏，但找不到任何关于如何完成的帮助或说明.

I am writing a game (my first) and I have the board set up and the code works for the game. I am using SwiftUI to stack the main screen. I am now wanting to pop up a text/image when the player drops a letter. I have seen in lots of games, but cannot find any help or instruction on how it is done.

    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....

这是我想要的那种流行的东西，带有弹出的文本.

this is the sort pop thing I am trying to get, with a text that pops up.

推荐答案

我可能误解了您的要求.我不能使用你的例子，所以我不得不自己做:

I may have misunderstood what you asked for. I cannot use your example so I had to make my own:

这利用 ZStack 通过 transition 在 GameView 之上绘制 Text...注意 withAnimation 块以激活过渡.

This makes use of ZStack to draw Text on top of the GameView via a transition... note the withAnimation block to activate the transition.

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()
                }
            }
        }
    }

}

我希望这会有所帮助！

这篇关于SwiftUI - 弹出图像/文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！