SwiftUI问题：列表上方ScrollView内按钮底部区域无法点击

这个问题是因为SwiftUI的List底层基于UITableView实现，默认会扩展自身的交互区域到顶部安全区上方，即使视觉上它排在横向ScrollView下方，也会覆盖ScrollView底部的按钮区域，导致这部分无法响应点击。

你可以通过给横向ScrollView添加zIndex(1)提升它的交互优先级，让按钮的点击事件能被正常接收：

import SwiftUI

struct TestListScreen: View {

    var body: some View {
        
        NavigationView {
            
            VStack(spacing: 0) {
                ScrollView(.horizontal, showsIndicators: true) {
                    HStack(spacing: 8) {
                        
                        ForEach(1..<10) { i in
                            Button { print(i) } label: {
                                Text("Button \(i)")
                                    .padding(24)
                                    .background(Color.yellow)
                            }
                        }
                    }
                }
                .zIndex(1) // 添加这一行，提升交互优先级
                
                List {
                    ForEach(1..<100) { i in
                        Text(String(i))
                    }
                }
                .listStyle(.plain)
                .listRowInsets(EdgeInsets())
                .frame(maxHeight: .infinity)
            }
            .navigationBarTitle("Buttons above the list", displayMode: .inline)
        }

    }
}

struct TestListScreen_Previews: PreviewProvider {
    static var previews: some View {
        TestListScreen()
    }
}

另外，也可以通过给List设置滚动内容内边距，避免它的交互区域向上延伸：

List {
    // ... 原有代码
}
.listStyle(.plain)
.listRowInsets(EdgeInsets())
.frame(maxHeight: .infinity)
.scrollContentInsets(.init(top: 0)) // 限制List内容从顶部开始布局

两种方法都能解决问题，选你觉得更合适的就行。

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