按下按钮后，如何更改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测试版3和Xcode 12测试版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")
}
}

这样，当@State变量发生变化时，SwiftUI将刷新视图。