ScrollView嵌套Form时内部元素随机无法响应点击的解决方法

问题根源在于Form本身自带滚动功能，嵌套在ScrollView里会触发手势识别冲突——多次交互后，系统会优先让外层ScrollView处理触摸事件，导致Form内的DisclosureGroup、Button等元素无法接收点击信号。

下面给出两种可行的解决方案，根据你的实际场景选择：

方案一：移除外层ScrollView，直接给Form设置固定尺寸（推荐） #

既然Form本身就支持滚动，完全不需要额外套一层ScrollView。直接通过frame给Form设置固定宽高，既满足尺寸要求，又能避免手势冲突：

struct ContentView: View {
    var body: some View {
        Form {
            // 示例表单内容
            DisclosureGroup("展开更多选项") {
                TextField("请输入内容", text: .constant(""))
                Button("执行操作") {
                    print("按钮已触发")
                }
            }
            
            // 可添加更多表单元素
            TextField("常规输入框", text: .constant(""))
            Button("独立按钮") {
                print("独立按钮被点击")
            }
        }
        .frame(width: 350, height: 450) // 设置固定尺寸
        .border(.gray) // 可选：添加边框直观展示固定范围
    }
}

方案二：保留外层ScrollView，禁用Form内部滚动 #

如果Form只是页面中多个滚动元素之一，必须保留外层ScrollView，那就禁用Form自身的滚动功能，让外层ScrollView统一处理滚动，同时确保子元素的点击手势能正常传递：

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                // 页面其他内容
                Text("页面头部内容")
                    .font(.title)
                
                // 嵌套的Form
                Form {
                    DisclosureGroup("展开选项") {
                        TextField("输入内容", text: .constant(""))
                        Button("点击按钮") {
                            print("按钮被点击")
                        }
                    }
                }
                .scrollDisabled(true) // 禁用Form内部滚动
                .frame(width: 350) // 固定Form宽度，高度由内容决定
                
                // 页面其他内容
                Text("页面底部内容")
                    .font(.title)
            }
        }
        .frame(height: 500) // 固定外层ScrollView的高度
    }
}

核心逻辑是避免两层滚动容器的手势冲突，让滚动逻辑由单一容器负责，这样Form内的交互元素就能稳定接收点击事件了。

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