iOS 18模态界面滚动起始于按钮时触发按钮点击问题咨询

在iOS 18系统中，当界面以模态（modal）形式展示时，若滚动操作的起始点落在按钮区域内，该按钮会被意外触发点击事件；非模态界面无此问题，且旧版iOS无论模态或非模态场景下均不会出现该异常。

复现代码 #

import SwiftUI

struct ContentView: View {
    
    @State var presentModal = false
    
    var body: some View {
        Button(action: {
            presentModal = true
        }, label: {
            Text("open modal")
        })
        .sheet(isPresented: $presentModal, content: {
            ScrollView {
                ForEach(0..<100, id: \.self) { index in
                    Button(action: {
                        print("Button \(index) tapped!")
                    }) {
                        Text("Button \(index)")
                            .frame(maxWidth: .infinity)
                            .frame(height: 100)
                            .background(randomColor(for: index))
                            .padding(.horizontal)
                    }
                }
            }
        })
    }
    
    func randomColor(for index: Int) -> Color {
        let hue = Double(index % 100) / 100.0
        return Color(hue: hue, saturation: 0.8, brightness: 0.8)
    }
}

#Preview {
    ContentView()
}

临时修复方案 #

针对这个iOS 18的系统级问题，可以通过以下两种方式临时规避：

• 给按钮添加高优先级拖动手势：让滚动手势优先被识别，阻止起始于按钮的滚动操作触发点击事件：

  Button(action: {
      print("Button \(index) tapped!")
  }) {
      Text("Button \(index)")
          .frame(maxWidth: .infinity)
          .frame(height: 100)
          .background(randomColor(for: index))
          .padding(.horizontal)
  }
  .highPriorityGesture(DragGesture())
  

• 改用TapGesture实现点击逻辑：放弃Button的默认交互，通过.onTapGesture绑定点击逻辑，避免滚动时误触：

  Text("Button \(index)")
      .frame(maxWidth: .infinity)
      .frame(height: 100)
      .background(randomColor(for: index))
      .padding(.horizontal)
      .onTapGesture {
          print("Button \(index) tapped!")
      }
  

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