SwiftUI List行点击后选中状态瞬间取消的问题及异常求助

问题根源 #

你在使用List的selection绑定功能时，同时在行内嵌套了Button，两者的点击逻辑发生冲突：

• 默认样式的Button会拦截并消耗行点击事件，导致List的选中状态被干扰——点击时先通过Button的action设置selected，但紧接着List的默认选中逻辑被Button触发的事件打断，重置了选中状态，所以出现瞬间高亮又消失的情况。
• 当你把selected = surah.id改成surah.id ±1时，Button设置的是其他行的ID，List的默认选中逻辑没有覆盖这个值，所以目标行能保持选中状态。

解决方案 #

方案1：移除Button，利用List原生选中逻辑 #

直接去掉行内的Button，List会自动在行点击时更新selected值并保持高亮。如果需要额外的点击逻辑，用onTapGesture补充：

List(viewModel.surahs, selection: $selected) { surah in
    HStack {
        Text(surah.name.transliteration.en)
        Spacer()
        Text(surah.name.short)
    }
    .onTapGesture {
        // 这里添加点击行需要执行的额外操作
        // 注：List的selection会自动设置selected为当前surah.id，这行可以省略
        // selected = surah.id
    }
}
.listStyle(.plain)

方案2：保留Button，禁用其默认样式干扰 #

如果必须保留Button（比如需要区分行内不同区域的点击），给Button添加PlainButtonStyle()，让它不干扰List的选中逻辑：

List(viewModel.surahs, selection: $selected) { surah in
    Button {
        selected = surah.id
        // 其他点击逻辑
    } label: {
        HStack {
            Text(surah.name.transliteration.en)
            Spacer()
            Text(surah.name.short)
        }
    }
    .buttonStyle(PlainButtonStyle()) // 关键：消除Button对List选中样式的干扰
}
.listStyle(.plain)

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