首页 > 解决方案 > 选择器干扰 onTapGesture

问题描述

我想澄清一下我已经搜索了答案,但没有找到任何有用的东西。我已经发布了这个问题,但是我已经修改了它,因为我为代码提供了图像而不是使用文本。

我有以下代码:

struct TimeChoiceView: View {

    @State var buttonText = "None"
    @State var isPressed = false
    var text : String = "SomeView"

    var body: some View{
        VStack{
            HStack{
                VStack(alignment: .leading, spacing: 20){
                    Text(text).padding(EdgeInsets(top: 0, leading: 15, bottom: 0, trailing: 0)).font(.system(size: 14))
                }
                Spacer()
                VStack(alignment: .trailing){
                        Text(buttonText).padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 15)).foregroundColor(.gray).font(.system(size: 14)).onTapGesture {
                            self.isPressed = !self.isPressed
                            self.buttonText = self.buttonText == "None" ? "Undo" : "None"
                        }
                }
            }
            HStack {
                if isPressed {
                    TimeChoice()
                }
            }
        }
    }

}

在此视图中,TimeChoice是否使用以下代码实现了 Picker:

struct TimeChoice: View{
    @State var hours: Int = 8
    @State var minutes: Int = 30

    var body: some View {
                HStack {
                    Spacer()
                    Picker("", selection: $hours){
                        ForEach(0..<23, id: \.self) { i in
                            Text("\(i)").tag(i)
                        }
                    }.pickerStyle(WheelPickerStyle()).frame(width: 50, height: 70).clipped()
                    Text(":")
                    Picker("", selection: $minutes){
                        ForEach(0..<60, id: \.self) { i in
                            Text(i < 10 ? "0\(i)" : "\(i)").tag(i)
                        }
                        }.pickerStyle(WheelPickerStyle()).frame(width: 50, height: 70).clipped()
                    Spacer()
                }
    }
}

选择器的出现是由onTapGesture方法 in触发的TimeChoiceView,但正如您所见,尝试再次按下Undo按钮不会触发相关操作。我可以设置选择器,但不能设置按钮。我有理由认为这与.onTapGesture干扰选择器的方法有关,因为这只会在我按下按钮并且选择器消失时发生。有没有人经历过这样的行为?

标签: swiftswiftuipicker

解决方案


问题在于,在提供的代码中,Picker按钮在打开时会重叠(甚至在视觉上被剪裁),因此请处理所有点击事件。

解决方案是将按钮面板放置在可选显示的选择器视图上方。使用 Xcode 11.4 / iOS 13.4 测试

var body: some View{
    VStack{
        HStack{
            VStack(alignment: .leading, spacing: 20){
                Text(text).padding(EdgeInsets(top: 0, leading: 15, bottom: 0, trailing: 0)).font(.system(size: 14))
            }
            Spacer()
            VStack(alignment: .trailing){
                    Text(buttonText).padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 15)).foregroundColor(.gray).font(.system(size: 14))
                    .onTapGesture {
                        self.isPressed.toggle()
                        self.buttonText = self.buttonText == "None" ? "Undo" : "None"
                    }
            }
        }.zIndex(1)          // << here !!
        HStack {
            if isPressed {
                TimeChoice()
            }
        }
    }
}

推荐阅读