SwiftUI中实现列表项点击切换内容的方法

要实现这个功能，核心是给每个列表项单独管理展开状态，避免多个项状态冲突，具体修改步骤如下：

1. 父视图（ContentView）管理展开状态 #

在ContentView中添加字典类型的@State变量，记录每个名字对应的展开状态：

struct ContentView: View {
    var names = ["Bob","John","Lisa"]
    // 用字典存储每个项的展开状态，默认都为未展开
    @State private var expandedItems = [String: Bool]()
    
    var body: some View {
        List {
            ForEach(names, id: \.self) { name in
                // 将当前项的展开状态绑定到Detail视图
                Detail(name: name, isExpanded: $expandedItems[name, default: false])
                    .onTapGesture {
                        // 点击时切换对应项的展开状态
                        expandedItems[name] = !(expandedItems[name] ?? false)
                    }
            }
        }
    }
}

2. 修改Detail视图接收状态绑定 #

把原来的inFocus替换为从父视图传入的绑定变量，用来控制显示内容：

struct Detail: View {
    var name: String
    // 接收父视图传来的绑定状态
    @Binding var isExpanded: Bool
    
    var body: some View {
        VStack(alignment: .leading) {
            if !isExpanded {
                Text(name)
            } else {
                Text("This is a detail view")
                Text(name)
                Text("---------------------")
            }
        }
    }
}

补充说明 #

• 用字典expandedItems可以灵活管理每个独立项的状态，避免多个列表项共享同一状态的问题
• $expandedItems[name, default: false]是Swift便捷写法：如果字典中没有对应name的键，默认使用false（未展开状态）
• 给Detail添加onTapGesture触发状态切换，点击列表项即可完成展开/收起的切换

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