按下按鈕后如何更改 SwiftUI 中的按鈕

Question

當我按下按鈕時，我希望一張卡片圖像變為另一張卡片圖像。 這是我當前的代碼：

import SwiftUI

var leftCard = "green_back"
var rightCard = "blue_back"

func dealCards() {
    leftCard = "1C"
    print("deal")
}

struct GameView: View {
    var body: some View {
        VStack {
            HStack(alignment: .center, spacing: 20) {
                Image(leftCard)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    
                Image(rightCard)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
            }
            .padding(.all, 25)
            
            Button(action: dealCards) {
                Text("Deal Cards")
                    .fontWeight(.bold)
                    .font(.title)
                    .padding(10)
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .padding(10)
                    .border(Color.blue, width: 5)
            }
        }
    }
}

struct GameView_Previews: PreviewProvider {
    static var previews: some View {
        GameView()
    }
}

當我按下按鈕時，此代碼會打印“交易”，但不會更改圖像。

我正在使用 MacOS Big Sur beta 3 和 Xcode 12 beta 2。

編輯：我只需將變量移動到 GameView 結構中並向它們添加@State修飾符。 感謝所有回答的人。 :D

Answer 1

您甚至可以刪除 function 並將代碼直接添加到按鈕

struct GameView: View {
    
    @State var leftCard = "green_back"
    @State var rightCard = "blue_back"
    
    var body: some View {
        VStack {
            HStack(alignment: .center, spacing: 20) {
                Image(leftCard)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                
                Image(rightCard)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
            }
            .padding(.all, 25)
            
            Button(action: {
                self.leftCard = "1C"
            }) {
                
                Text("Deal Cards")
                    .fontWeight(.bold)
                    .font(.title)
                    .padding(10)
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .padding(10)
                    .border(Color.blue, width: 5)
            }
        }
    }
}

Answer 2

以下代碼應更新您的Images ，並應在deal() function 中為您提供一個隨機值。

在View或組件中定義屬性和函數非常重要。 全局變量一般不推薦使用，可能會導致意想不到的結果。

import SwiftUI

struct GameView: View {

    // 1. Add ImageName to handle names via dot (.) to avoid mistyping strings. CaseIterable allow you to get an array of all the values defined.
    enum ImageName: String, CaseIterable {
        case greenBack = "green_back"
        case blueBack = "blue_back"
        case other = "1C"
    }

    // 2. Add @State to update the GameView() automatically when any of the properties are updated.
    @State private var leftCard: ImageName = .greenBack
    @State private var rightCard: ImageName = .blueBack

    var body: some View {
        VStack {
            HStack(alignment: .center, spacing: 20) {

                // 3. Add .rawValue to get the raw String value
                Image(leftCard.rawValue)
                    .resizable()
                    .aspectRatio(contentMode: .fit)

                Image(rightCard.rawValue)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
            }
            .padding(.all, 25)

            Button(action: dealCards) {
                Text("Deal Cards")
                    .fontWeight(.bold)
                    .font(.title)
                    .padding(10)
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .padding(10)
                    .border(Color.blue, width: 5)
            }
        }
    }

    func dealCards() {
        // 4. Update the name via dot(.) of any card that you want.
        // You can also randomise the card doing .allCases.randomElement()
        leftCard = ImageName.allCases.randomElement() ?? .greenBack
        print("deal")
    }
}

struct GameView_Previews: PreviewProvider {
    static var previews: some View {
        GameView()
    }
}

Answer 3

您可以將變量移動到GameView並添加@State修飾符：

struct GameView: View {
    @State var leftCard = "green_back"
    @State var rightCard = "blue_back"
    
    var body: some View {
        ...
    }
    
    func dealCards() {
        leftCard = "1C"
        print("deal")
    }
}

這樣 SwiftUI 將在您的@State變量更改時刷新視圖。