SwiftUI ScrollView 内含 Button 无法检测滚动怎么办？是swiftui的bug吗？

Question

import SwiftUI
struct ScrollOffsetPreferenceKey: PreferenceKey {
    typealias Value = CGFloat
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}
struct test5Scroll: View {
    var body: some View {
        NavigationView {
            
            ScrollView {
                GeometryReader { proxy in
                    if let distanceFromTop = proxy.bounds(of: .named("MyScrollView"))?.minY {
                        Text(distanceFromTop, format: .number)
                            .padding(.top, 120)
                            .foregroundStyle(.pink)
                            .navigationTitle("明明变了为什么检测不到")
                            .preference(key: ScrollOffsetPreferenceKey.self, value: distanceFromTop)
                    } else {
                        Text("检测无效")
                    }
                }
                ForEach(0 ..< 30) { index in
                    // 很奇怪的是，如果你把外层的 HStack去掉，就能检测到滚动，否则检测不到
                    // 或者你把Button去掉直接用Text也是能检测到的？这是bug吗？怎么修复？
                    HStack{
                        Button(action: {
                            
                        }, label: {
                            Text("item --- \(index)")
                        })
                    }
                        .frame(width: 100, height: 40)
                }
            }
            .background(.black.opacity(0))
            .coordinateSpace(.named("MyScrollView"))
            .onPreferenceChange(ScrollOffsetPreferenceKey.self) { value in
                // 明明变了为什么滚动的时候检测不到？
                print("Scroll offset ----- \(value)")
            }
        }
        
    }
}

#Preview {
    test5Scroll()
}

在检测滚动的时候，当元素内有Button就检测不到滚动

我尝试去除Button，可以检测到，但是不符合预期啊，谢谢了我该怎么办

Answer 1

使用自定义 ButtonStyle： 通过自定义 ButtonStyle，可以避免 Button 拦截触摸事件。

import SwiftUI

struct ScrollOffsetPreferenceKey: PreferenceKey {
    typealias Value = CGFloat
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

struct TransparentButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .contentShape(Rectangle())
            .background(Color.clear)
    }
}

struct test5Scroll: View {
    var body: some View {
        NavigationView {
            ScrollView {
                GeometryReader { proxy in
                    if let distanceFromTop = proxy.bounds(of: .named("MyScrollView"))?.minY {
                        Text(distanceFromTop, format: .number)
                            .padding(.top, 120)
                            .foregroundStyle(.pink)
                            .navigationTitle("明明变了为什么检测不到")
                            .preference(key: ScrollOffsetPreferenceKey.self, value: distanceFromTop)
                    } else {
                        Text("检测无效")
                    }
                }
                ForEach(0 ..< 30) { index in
                    HStack {
                        Button(action: {
                            // Button action
                        }) {
                            Text("item --- \(index)")
                        }
                        .buttonStyle(TransparentButtonStyle())
                    }
                    .frame(width: 100, height: 40)
                }
            }
            .background(Color.black.opacity(0))
            .coordinateSpace(.named("MyScrollView"))
            .onPreferenceChange(ScrollOffsetPreferenceKey.self) { value in
                print("Scroll offset ----- \(value)")
            }
        }
    }
}

#Preview {
    test5Scroll()
}