SwiftUI动态列表实现单一按钮激活状态的问题求助

核心思路 #

不为每个TrainingCell单独维护激活状态，而是在父视图中声明一个全局激活ID变量，用来记录当前处于激活状态的单元格唯一标识。每个单元格通过对比自身ID与这个全局变量，判断是否显示激活样式。

具体代码实现 #

1. 定义训练数据模型（示例）

struct Training: Identifiable {
    let id: UUID = UUID()
    let name: String
    // 可添加其他训练相关属性
}

2. 父视图逻辑实现

struct TrainingListView: View {
    // 存储当前激活的训练项ID，nil表示无激活项
    @State private var activeTrainingId: UUID?
    
    // 模拟训练数据列表
    let trainings: [Training] = [
        Training(name: "力量训练"),
        Training(name: "有氧训练"),
        Training(name: "柔韧性训练")
    ]
    
    var body: some View {
        List {
            ForEach(trainings) { training in
                TrainingCell(
                    training: training,
                    isActive: activeTrainingId == training.id,
                    onTap: {
                        // 点击切换激活状态：当前项已激活则取消，否则设置为当前项ID
                        activeTrainingId = activeTrainingId == training.id ? nil : training.id
                        // 此处添加打开侧边面板的逻辑
                    }
                )
            }
        }
    }
}

3. TrainingCell单元格实现

struct TrainingCell: View {
    let training: Training
    let isActive: Bool
    let onTap: () -> Void
    
    var body: some View {
        Button(action: onTap) {
            HStack {
                Text(training.name)
                Spacer()
                Text(isActive ? "X Close" : "View")
                    .foregroundColor(isActive ? .red : .blue)
            }
            .padding()
        }
    }
}

关键逻辑说明 #

• activeTrainingId作为全局状态，同一时间仅能指向一个训练项ID，确保只有一个单元格显示激活样式
• 点击按钮时，通过三目运算符快速切换激活状态：若当前单元格已激活则清空全局ID，否则将全局ID设为当前单元格ID，自动取消之前的激活项
• 侧边面板的显示可直接绑定activeTrainingId，例如当activeTrainingId != nil时显示面板，根据ID加载对应内容

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