Как изменить кнопку в 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

Следующий код должен обновить ваш Images и должен дать вам случайное значение также в deal() функция.

Очень важно, чтобы вы определяли свои свойства и функции внутри 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 2

Вы даже можете удалить функцию и добавить код прямо на кнопку

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 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 переменные меняются.