SwiftUI中子视图内Button点击失效问题求助

问题描述 #

封装了PopulationPlace卡片视图，预览时内部的收藏按钮可正常响应点击，但将该视图加入横向滚动列表后，按钮点击失效。

相关代码如下：

PopulationPlace视图代码 #

struct PopulationPlace: View {
    let image: String
    let score: String
    let title: String
    @State private var isFavorite: Bool = false
    var body: some View {
        Image(image)
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 200, height: 210)
            .clipShape(RoundedRectangle(cornerRadius: 25.0))
            .overlay(alignment: .topTrailing, content: {
                Button {
                    withAnimation{
                        isFavorite = false
                    }
                } label: {
                    Image(systemName: "heart.circle.fill")
                        .symbolRenderingMode(.palette)
                        .foregroundStyle(.red, .yellow)
                        .foregroundColor(.red)
                        .padding(.vertical, 8)
                        .padding(.leading, 8)
                }
                .padding()
            })
    }
}

横向滚动列表代码 #

ScrollView(.horizontal, showsIndicators: false){
    HStack{
        ForEach(sampleList, id: \SamplePopulation.self){
            item in
            PopulationPlace(image: item.image, score: item.score, title:item.title)
        }
    }
}

样本数据结构 #

struct SamplePopulation: Identifiable, Hashable{
    let id: String = UUID().uuidString
    let image: String
    let score: String
    let title: String
}

解决方法 #

1. 修正ForEach的id参数 #

由于SamplePopulation实现了Identifiable协议，ForEach可以直接遍历数组元素，无需手动指定id；如果要显式指定，应使用协议自带的id属性而非self，避免潜在的哈希冲突：

ForEach(sampleList) { item in
    PopulationPlace(image: item.image, score: item.score, title: item.title)
}

或者：

ForEach(sampleList, id: \.id) { item in
    PopulationPlace(image: item.image, score: item.score, title: item.title)
}

2. 修复按钮点击失效问题 #

Image默认不接收用户交互，叠加在其上的按钮点击区域会被ScrollView的滚动手势拦截。需要给Image添加contentShape，确保点击区域匹配卡片的圆角矩形形状，让按钮点击优先响应：
修改PopulationPlace中的Image部分代码：

Image(image)
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 200, height: 210)
    .clipShape(RoundedRectangle(cornerRadius: 25.0))
    .contentShape(RoundedRectangle(cornerRadius: 25.0)) // 添加该行
    .overlay(alignment: .topTrailing, content: {
        // 按钮代码不变
    })

3. 优化按钮逻辑（可选） #

当前按钮点击固定将isFavorite设为false，不符合收藏按钮的预期逻辑，建议改为切换状态，同时可根据状态切换图标样式：

Button {
    withAnimation{
        isFavorite.toggle()
    }
} label: {
    Image(systemName: isFavorite ? "heart.circle.fill" : "heart.circle")
        .symbolRenderingMode(.palette)
        .foregroundStyle(.red, .yellow)
        .padding(.vertical, 8)
        .padding(.leading, 8)
}

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