SwiftUI 点击按钮后显示对应图片和文本的实现方法

实现方案 #

你需要用到SwiftUI的@State属性包装器管理视图状态，点击按钮时修改状态值，系统会自动刷新关联的图片、文本视图，完整可运行代码如下：

import SwiftUI

struct ContentView: View {
    // 定义状态变量，标记按钮是否被点击
    @State private var isButtonClicked = false
    
    var body: some View {
        VStack {
            // 根据状态动态切换显示的图片
            Image(systemName: isButtonClicked ? "star.fill" : "house.fill")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 75, height: 75)
            // 根据状态动态切换显示的文本
            Text(isButtonClicked ? "指定显示的文本" : "TEST")
            Spacer().frame(height: 100)
            Button(action: {
                // 点击按钮修改状态，如果需要点击一次就固定显示，直接赋值为true即可
                // isButtonClicked = true
                // 如果需要每次点击来回切换，用toggle方法
                isButtonClicked.toggle()
            }) {
                Text("TEST")
                    .foregroundColor(Color.white)
                    .padding()
            }
            .background(Color.black)
            .cornerRadius(10)
        }
        .padding()
    }
}

关键逻辑说明 #

• @State修饰的变量是视图专属的状态值，修改后会自动触发绑定了该变量的所有视图刷新
• 示例中使用三目运算符根据isButtonClicked的取值动态绑定图片和文本的内容，你可以把star.fill和指定显示的文本替换为你实际要展示的图片资源和文字内容
• 如果只需要第一次点击后就固定显示新内容，把按钮action里的isButtonClicked.toggle()替换为isButtonClicked = true即可

内容的提问来源于stack exchange，提问作者user16253979