iOS 中的分段选择器 - 控制点击已选择的项目

Question

我在 iOS 中使用分段选择器，其中包含很少的项目。当用户点击未选择的项目时，该项目将被选中。某些项目可以包含子项目。因此，当用户点击已选择的类型时，我需要显示带有子项目的模式窗口以选择其中之一。 但是，无法处理分段选取器中已选定项目的点击。我尝试使用“长按”，但效果不佳。

我想使用原生 iOS 设计，这就是为什么我不想使用“按钮”而不是分段选择器。

所以问题是我如何处理点击分段选择器已选定的项目以显示子项目以选择其中之一？它可以是“长按”或其他对用户来说直观的替代方案。

import SwiftUI

struct CustomSegmentedPicker: View {
    
    @State private var showModalSelectD: Bool = false
    
    enum periods {
        case A, B, C, D, All
    }
    
    @State var predefinedPeriod: periods = periods.All
    @State var predefinedPeriodD: String = "D1"
    
    var body: some View {
        ZStack {
            Color.clear
                .sheet(isPresented: $showModalSelectD, content: {
                    List {
                        Picker("D", selection: $predefinedPeriodD) {
                            Text("D1").tag("D1")
                            Text("D2").tag("D2")
                            Text("D3").tag("D3")
                        }
                        .pickerStyle(.inline)
                    }
                })
            VStack {
                HStack {
                    Picker("Please choose a currency", selection: $predefinedPeriod) {
                        Text("A").tag(periods.A)
                        Text("B").tag(periods.B)
                        Text("C").tag(periods.C)
                        Text("D (\(predefinedPeriodD))").tag(periods.D)
                            .contentShape(Rectangle())
                            .simultaneousGesture(LongPressGesture().onEnded { _ in
                                print("Got Long Press")
                                showModalSelectD.toggle()
                            })
                            .simultaneousGesture(TapGesture().onEnded{
                                print("Got Tap")
                                showModalSelectD.toggle()
                            })
                        Text("All").tag(periods.All)
                    }
                    .pickerStyle(SegmentedPickerStyle())
                }
            }
        }
    }
}

Answer 1

您可以利用分段选择器为所有按钮提供相同宽度的事实。因此，您可以使用覆盖层覆盖当前处于活动状态的选择器项目，并使用它来接收点击手势。如果选择了不同的项目，覆盖层将移至该项目，等等。

为了方便起见，我更新了枚举：

enum periods: Int, CaseIterable {
    case A = 0
    case B = 1
    case C = 2
    case D = 3
    case All = 4
}

然后可以像这样应用叠加：

Picker("Please choose a currency", selection: $predefinedPeriod) {
    Text("A").tag(periods.A)
    Text("B").tag(periods.B)
    Text("C").tag(periods.C)
    Text("D (\(predefinedPeriodD))").tag(periods.D)
    Text("All").tag(periods.All)
}
.pickerStyle(SegmentedPickerStyle())
.overlay {
    GeometryReader { proxy in
        let buttonWidth = proxy.size.width / CGFloat(periods.allCases.count)
        Rectangle()
            .fill(.background)
            .opacity(0.001)
            .frame(width: buttonWidth)
            .offset(x: CGFloat(predefinedPeriod.rawValue) * buttonWidth)
            .simultaneousGesture(LongPressGesture().onEnded { _ in
                print("Got Long Press on \(predefinedPeriodD)")
                if predefinedPeriod == .D {
                    showModalSelectD.toggle()
                }
            })
            .simultaneousGesture(TapGesture().onEnded{
                print("Got Tap on \(predefinedPeriodD)")
                if predefinedPeriod == .D {
                    showModalSelectD.toggle()
                }
            })
    }
}