如何正确制作此 Picker 剪辑 [英] How do I make this Picker clip properly

问题描述

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

I create a set of side by side pickers in an HStack by calling the view below. The "control" area for each picker is much wider to the left of the picker than it should be. ".clipped()" is supposed to fix this, but it is not working. At some point when I was developing the code, it was working, but now I can't get it back. When I try to manipulate the pickers, I can move the rightmost one anywhere on the right 3 columns. The left column cannot be manipulated at all. What is going on here?

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()
        }
    }
}

推荐答案

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

I finally found a reference to the real answer. The formulation below works, at least in iOS 13.6 and 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()

这篇关于如何正确制作此 Picker 剪辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！