SwiftUI实现点击按钮隐藏/删除文本及按钮功能

要实现点击按钮后隐藏对应的文本和按钮本身，核心是利用SwiftUI的状态变量控制视图的渲染逻辑，具体实现如下：

实现步骤 #

• 为每组（Text+Button）添加一个@State布尔变量，标记该组是否显示
• 给每组的HStack添加条件判断，仅当状态为true时渲染该组
• 在按钮的点击事件中，将对应组的状态设为false，从而隐藏整个组

修改后的完整代码 #

//
//  ContentView.swift
//  codespeedy
//
//  Created by CodeSpeedy on 19/07/23.
//

import SwiftUI

struct ContentView: View {
    // 定义三个状态变量，分别控制三组视图的显示/隐藏
    @State private var showHiGroup = true
    @State private var showHelloGroup = true
    @State private var showHolaGroup = true
    
    var body: some View {
        VStack{
            // 仅当showHiGroup为true时渲染该组
            if showHiGroup {
                HStack{
                    Text("Hi")
                    Button("Hi Button"){
                        // 点击后隐藏当前组
                        showHiGroup = false
                    }
                }
            }
            
            if showHelloGroup {
                HStack{
                    Text("Hello")
                    Button("Hello Button"){
                        showHelloGroup = false
                    }
                }
            }
            
            if showHolaGroup {
                HStack {
                    Text("Hola")
                    Button("Hola Button"){ // 修正原按钮文本，与对应组名称匹配
                        showHolaGroup = false
                    }
                }
            }
        }
        .padding()
    }
}

补充说明 #

• @State是SwiftUI的基础状态管理工具，变量值变化会自动触发视图重新渲染
• 这种方式是从视图树中真正移除元素，而非仅隐藏视觉效果，性能更优
• 如果需要支持恢复显示功能，只需在其他操作中将对应状态变量设回true即可

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