SwiftUI实现点击视图时自动取消兄弟视图选中状态的方法

你的问题核心是选中状态没有统一管理，每个Tile的选中状态独立存储，导致无法联动取消之前的选中项。下面是最优实现方案：

核心思路 #

将选中状态的控制权集中到父视图，用一个变量记录当前选中的Tile的ID，子视图根据这个ID判断自己是否被选中，点击时通知父视图更新选中状态。

修改后的完整代码 #

struct ContentView: View {
    // 用数组统一管理Tile，方便扩展更多项
    @State private var tiles: [Tile] = [Tile(), Tile(), Tile()]
    // 记录当前选中的Tile的ID，可选类型支持取消选中
    @State private var selectedTileId: UUID?
    
    var body: some View {
        VStack {
            // 遍历数组生成TileView
            ForEach($tiles) { $tile in
                TileView(
                    tile: tile,
                    isSelected: tile.id == selectedTileId,
                    onTap: {
                        // 点击时切换选中状态：如果已选中则取消，否则设为当前选中
                        if selectedTileId == tile.id {
                            selectedTileId = nil
                        } else {
                            selectedTileId = tile.id
                        }
                    }
                )
            }
        }
        .padding()
    }
}

struct Tile: Identifiable, Equatable {
    var id: UUID = UUID()
    // 移除Tile自身的isSelected，状态统一由父视图管理
}

struct TileView: View {
    let tile: Tile
    let isSelected: Bool
    let onTap: () -> Void
    
    var body: some View {
        RoundedRectangle(cornerRadius: 15)
            .fill(isSelected ? Color.red : Color.yellow)
            .frame(height: 100)
            .padding()
            .onTapGesture(perform: onTap)
    }
}

关键优化点 #

• 统一状态管理：父视图用selectedTileId跟踪选中项，避免分散的@State导致状态不同步
• 可扩展性：用数组存储Tile，新增视图只需在数组里添加元素，不用单独声明变量
• 单向数据流：子视图只负责展示和传递点击事件，状态修改由父视图处理，符合SwiftUI的设计理念
• 支持取消选中：点击已选中的视图可以取消选中，若不需要此功能，直接把selectedTileId = tile.id即可

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