SwiftUI中Horizontal ScrollView滚动超出可视区域问题排查

从提供的GIF可见，Horizontal ScrollView偶尔会随机滚动至可视区域外，需向右拖动才能显示条目。该问题随机出现，已排除proxy.scrollTo(:)导致的可能——即使不触发滚动到选中元素的逻辑，滚动条内的元素有时也会不可见。

相关代码如下：

@ViewBuilder func buildScrollView() -> some View {
    ScrollViewReader { proxy in
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                ForEach(scaleEntries, id: \.self.title) { entry in
                    VStack {
                        Button(action: {
                            self.selectedScaleEntry = entry
                            saveRating()
                            // this looks absolutly stupid but it needs to be done to update the state of the parent views
                            self.viewModel.selectedComparisonElement = self.viewModel.selectedComparisonElement
                        }) {
                            Text(entry.scaleValueIdentifier ?? "")
                                .font(.custom("MB Corpo S Text WEB", size: 24).weight(.bold))
                                .frame(width: 40, height: 40)
                                .padding()
                                .foregroundColor(.black)
                                .background(Color(UIColor(hex: entry.color!)))
                                .border(selectedScaleEntry?.title != entry.title ? .clear : .gray, width: 4)
                                .id(entry.color)
                        }
                        Text(entry.scaleValueTitle ?? " ")
                            .font(.custom("Helvetica", size: 12).weight(.light))
                            .fixedSize(horizontal: false, vertical: true)
                    }
                }
            }
            .frame(maxWidth: .infinity, maxHeight: 110)
        }
        .padding()
        .onChange(of: self.selectedScaleEntry) { _ in
            if selectedScaleEntry != nil {
                    withAnimation {
                        proxy.scrollTo(selectedScaleEntry?.color, anchor: .trailing)
                    }
            }
        }
    }
}

曾怀疑是ScrollViewReader的问题，但已排除；也考虑过frame设置的问题，但无法确定。

问题排查与解决方案 #

1. 移除HStack的maxWidth: .infinity设置 #

Horizontal ScrollView的内容容器（HStack）设置maxWidth: .infinity会强制其撑满父视图宽度，这与横向滚动视图的自适应内容宽度逻辑冲突，容易导致布局计算偏差，引发随机滚动异常。

修改：保留maxHeight: 110，删除maxWidth: .infinity，让HStack根据内部元素总宽度自适应：

HStack {
    // 原有子元素代码
}
.frame(maxHeight: 110)

2. 修复元素ID的唯一性问题 #

当前使用entry.color作为按钮的id，若多个条目颜色重复，会造成ScrollViewReader的ID冲突，干扰滚动视图的内部状态管理。

修改：改用entry.title作为id（ForEach已用\.self.title作为唯一标识，说明title是唯一的）：

Button(action: {
    // 原有代码
}) {
    // 原有代码
    .id(entry.title) // 替换为唯一的title
}

同步更新scrollTo的目标ID：

proxy.scrollTo(selectedScaleEntry?.title, anchor: .trailing)

3. 替换冗余的父视图状态更新逻辑 #

按钮点击时self.viewModel.selectedComparisonElement = self.viewModel.selectedComparisonElement的写法会强制触发视图重复刷新，可能干扰ScrollView的布局计算。

修改：在视图模型中添加专门的更新触发信号，避免无意义的赋值操作：

// 视图模型代码示例
class YourViewModel: ObservableObject {
    // 原有属性
    @Published var triggerParentUpdate = false
}

// 按钮点击时调用
self.viewModel.triggerParentUpdate.toggle()

父视图通过监听triggerParentUpdate的变化来更新状态。

4. 调整padding的位置 #

ScrollView外层的.padding()可能干扰其可视区域计算，将padding移到HStack内部，避免影响滚动边界：

ScrollView(.horizontal, showsIndicators: false) {
    HStack {
        // 原有子元素代码
    }
    .frame(maxHeight: 110)
    .padding() // 移至此处
}
// 移除ScrollView外层的.padding()

综合修改后的代码 #

@ViewBuilder func buildScrollView() -> some View {
    ScrollViewReader { proxy in
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                ForEach(scaleEntries, id: \.self.title) { entry in
                    VStack {
                        Button(action: {
                            self.selectedScaleEntry = entry
                            saveRating()
                            // 触发父视图更新
                            self.viewModel.triggerParentUpdate.toggle()
                        }) {
                            Text(entry.scaleValueIdentifier ?? "")
                                .font(.custom("MB Corpo S Text WEB", size: 24).weight(.bold))
                                .frame(width: 40, height: 40)
                                .padding()
                                .foregroundColor(.black)
                                .background(Color(UIColor(hex: entry.color!)))
                                .border(selectedScaleEntry?.title != entry.title ? .clear : .gray, width: 4)
                                .id(entry.title)
                        }
                        Text(entry.scaleValueTitle ?? " ")
                            .font(.custom("Helvetica", size: 12).weight(.light))
                            .fixedSize(horizontal: false, vertical: true)
                    }
                }
            }
            .frame(maxHeight: 110)
            .padding()
        }
        .onChange(of: self.selectedScaleEntry) { _ in
            if let selectedEntry = selectedScaleEntry {
                withAnimation {
                    proxy.scrollTo(selectedEntry.title, anchor: .trailing)
                }
            }
        }
    }
}

// 对应视图模型补充
class YourViewModel: ObservableObject {
    // 原有属性
    @Published var triggerParentUpdate = false
}

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