如何正确制作此 Picker 剪辑答案

【问题标题】：How do I make this Picker clip properly如何正确制作此 Picker 剪辑
【发布时间】：2020-08-20 02:55:49
【问题描述】：

我通过调用下面的视图在 HStack 中创建一组并排选择器。每个选择器的“控制”区域在选择器左侧比应有的要宽得多。 “.clipped()” 应该解决这个问题，但它不起作用。在我开发代码的某个时候，它可以工作，但现在我无法取回它。当我尝试操纵选择器时，我可以将最右边的选择器移动到右侧 3 列的任意位置。左列根本无法操作。这是怎么回事？

struct SinglePickerView: View {
    @Binding var note: Int
    let notes: [String]
    let width: CGFloat
   
    var body: some View {
        VStack {
            ZStack (alignment: .center) {
                RoundedRectangle(cornerRadius: 5)
                    .fill(Color(red: 192, green: 192, blue: 192))
                    .frame(width: width-10, height: 25)
                Text("\(notes[note])")
                .foregroundColor(.black)
            }

            Picker(selection: $note, label: Text("")) {
                ForEach(0 ..< 72) { index in
                    Text("\(self.notes[index])")
                        .foregroundColor(.white)
                        .tag(index)
               }
            }
            .labelsHidden()
            .frame(width: width)
            .clipped()
        }
    }
}

【问题讨论】：

标签： swiftui picker

【解决方案1】：

尝试在父容器处移动剪辑，如下所示。使用 Xcode 12 / iOS 14 测试。

struct SinglePickerView: View {
    @Binding var note: Int
    let notes: [String]
    let width: CGFloat

    var body: some View {
        VStack {
            ZStack (alignment: .center) {
                RoundedRectangle(cornerRadius: 5)
                    .fill(Color(red: 192, green: 192, blue: 192))
                    .frame(width: width-10, height: 25)
                Text("\(notes[note])")
                .foregroundColor(.black)
            }

            Picker(selection: $note, label: Text("")) {
                ForEach(0 ..< notes.count, id: \.self) { index in
                    Text("\(self.notes[index])")
                        .foregroundColor(.white)
                        .tag(index)
               }
            }
            .labelsHidden()
        }
        .frame(width: width)
        .contentShape(Rectangle())
        .clipped()
    }
}

struct TestStackOfPickers: View {
    let notes = (1...10).map { String($0) }
    @State var note1 = 1
    @State var note2 = 5
    @State var note3 = 3

    var body: some View {
        HStack {
            SinglePickerView(note: $note1, notes: notes, width: 80).border(Color.red)
            SinglePickerView(note: $note2, notes: notes, width: 80).border(Color.red)
            SinglePickerView(note: $note3, notes: notes, width: 80).border(Color.red)
        }
    }
}

【讨论】：

似乎没有帮助。我在 iOS 13.6 和 XCode 11.6 上。我尝试按照您的建议将 .clipped() 移到 VStack 中，并在任一位置添加 .contentShape() 。我确实看到，在视图预览中，当它停止时，选择器周围会出现蓝框，正是我希望看到它们的位置。

【解决方案2】：

我终于找到了真正答案的参考。下面的公式至少在 iOS 13.6 和 XCode 11.6 中有效。

Picker(selection: $note, label: Text("")) {
    ForEach(0 ..< 72) { index in
        Text("\(self.notes[index])")
            .frame(width: self.width)
            .foregroundColor(.white)
            .tag(index)
       }
}
.labelsHidden()
.frame(width: width)
.compositingGroup() 
.clipped()

【讨论】：