SwiftUI中点击ScrollView项无法更新尺寸的问题咨询

核心问题分析 #

1. 点击无反应：AnimalItem是值类型，AnimalItemView中用@State var item存储的是本地副本，修改副本的expanded不会影响父视图的源数组；同时selectedItem存储的也是副本，修改它的属性无法同步到源数据。
2. 调试日志报错：onChange(of: Optional<AnimalItem>) action tried to update multiple times per frame.——每次修改selectedItem的expanded（值类型修改会生成新实例），会触发onChange再次执行，形成循环。
3. 圆角显示异常：Image的scaledToFill会让内容超出设置的frame，若不在Image层级添加clipShape，仅靠父视图的裁剪无法正确应用圆角。
4. expanded属性合理性：该属性属于每个列表项的状态，放在AnimalItem中是合理的，能直接将数据与状态绑定，便于统一管理。

修复步骤 #

1. 修正子视图数据绑定 #

将AnimalItemView的@State var item改为@Binding var item，确保子视图能直接修改源数组中的数据：

struct AnimalItemView: View {
    @Binding var item: AnimalItem
    
    var body: some View {
        Image(item.expanded ? item.image : item.text)
            .resizable()
            .scaledToFill()
            .frame(width: item.expanded ? 350 : 200, height: 250)
            .clipShape(RoundedRectangle(cornerRadius: 10))
    }
}

2. 优化选中状态管理 #

用选中项的id替代整个AnimalItem实例，避免值类型重复触发onChange，同时确保同一时间仅一个项展开：

struct AnimalCarousalView: View {
    @State var items: [AnimalItem] = [
        .init(text: "A", image: "alligator"),
        .init(text: "B", image: "bear"),
        .init(text: "C", image: "cat")
    ]
    @State var selectedId: UUID?
    
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 10) {
                ForEach($items) { $item in
                    AnimalItemView(item: $item)
                        .onTapGesture {
                            withAnimation {
                                if let selectedId = selectedId, selectedId == item.id {
                                    // 再次点击当前项，切换收缩/展开状态
                                    item.expanded.toggle()
                                    self.selectedId = item.expanded ? item.id : nil
                                } else {
                                    // 点击新项，先关闭所有已展开项，再展开当前项
                                    items.indices.forEach { items[$0].expanded = false }
                                    item.expanded = true
                                    selectedId = item.id
                                }
                            }
                        }
                }
            }
            .padding(.horizontal)
        }
        .frame(height: 250)
        .scrollIndicators(.hidden)
        .clipped()
    }
}

3. 圆角问题优化 #

无需在AnimalItemView外层重复添加clipShape，仅在Image层级添加即可——因为scaledToFill会让图片内容超出frame，clipShape需要直接作用于Image才能正确裁剪圆角边缘。

关键说明 #

• 用@Binding传递AnimalItem：确保子视图对数据的修改能同步回父视图的源数组，解决点击无反应的核心问题。
• 存储selectedId而非整个实例：避免值类型修改触发的onChange循环，同时简化选中状态的判断逻辑。
• expanded属性的合理性：将每个项的展开状态与数据模型绑定，符合数据驱动UI的设计思路，便于后续扩展（如保存状态、批量操作等）。

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