iOS15兼容：SwiftUI中Stepper行点击触发模态框的优化方案求助

问题背景 #

• 需求：实现兼容iOS 15的SwiftUI视图，点击包含Stepper的列表行时弹出模态视图，同时保证Stepper可正常调整数值
• 当前问题：给列表行添加onTapGesture后，点击Stepper会触发模态视图而非修改数值，尝试设置.plain或BorderlessButtonStyle()样式无效
• 现有临时方案：通过ZStack叠加重复视图实现功能，但代码冗余，维护成本高

优化实现方案 #

方案1：手势优先级控制 #

通过给父视图添加空的同步手势，让Stepper的内置手势优先响应，避免被父视图的tap手势拦截：

struct CategoryView: View {
    @State private var stepperValue = 0
    
    var body: some View {
        List {
            StepperRow(value: $stepperValue)
        }
    }
}

struct StepperRow: View {
    @Binding var value: Int
    @State private var modalIsPresented = false
           
    var body: some View {
        VStack(alignment: .leading) {
            Stepper(
                "\(value) Name of the article",
                value: $value,
                in: 0...Int.max
            )
            Text("Item description, which could be long and I'd like to go under the stepper.")
                .font(.caption)
        }
        .onTapGesture {
            modalIsPresented = true
        }
        .sheet(isPresented: $modalIsPresented) {
            ModalView()
        }
        // 关键：让Stepper手势优先响应
        .simultaneousGesture(TapGesture().onEnded {} )
    }
}

方案2：精准绑定tap区域 #

直接将tap手势绑定在非Stepper的文本区域，Stepper独立出来，从根源避免手势冲突：

struct CategoryView: View {
    @State private var stepperValue = 0
    
    var body: some View {
        List {
            StepperRow(value: $stepperValue)
        }
    }
}

struct StepperRow: View {
    @Binding var value: Int
    @State private var modalIsPresented = false
           
    var body: some View {
        HStack(alignment: .top) {
            VStack(alignment: .leading) {
                Text("\(value) Name of the article")
                Text("Item description, which could be long and I'd like to go under the stepper.")
                    .font(.caption)
            }
            .onTapGesture {
                modalIsPresented = true
            }
            Spacer()
            Stepper(
                "",
                value: $value,
                in: 0...Int.max
            )
            .labelsHidden()
        }
        .sheet(isPresented: $modalIsPresented) {
            ModalView()
        }
    }
}

原理说明 #

• 方案1利用SwiftUI手势的优先级规则：simultaneousGesture会让子视图的手势优先于父视图的手势响应，空的tap手势仅用于调整优先级，不会产生额外交互
• 方案2通过拆分布局，将tap手势仅作用在需要触发模态框的区域，Stepper作为独立组件自然不受tap手势影响，逻辑更直观，代码可读性更高

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