如何使 SwiftUI Picker 换行文本

发布于07月18日

当使用Picker和.pickerStyle(WheelPickerStyle())时， Select 器占用的水平空间似乎是固定的.在下图中，选取器框架(从其较浅的 colored颜色可以看出)比其元素所需的更大.

我试图使选取器的宽度与它包含的最长选项的宽度相同，类似于Text()个视图"包装"其文本的方式，并且仅与其中的文本所需的大小相同.

对于SwiftUI中的轮式捡拾器，我该如何实现这一点？

推荐答案

一个解决方案看起来有点复杂，因为选取器不是本机SwiftUI控件，但后端有UIPickerView个，所以我们需要将前面提到的to get rid of compression contains和to calculate most long label结合起来，并显式压缩选取器.

主要部分是

@State private var maxWidth = CGFloat.zero
@State private var width = CGFloat.infinity

var body: some View {
    Picker("", selection: $selection) {
        ForEach( ... 

           // Row/Label view is here

            .background(GeometryReader {
                Color.clear.preference(key: ViewWidthKey.self,
                    value: $0.frame(in: .local).size.width)
            })
            .onPreferenceChange(ViewWidthKey.self) {
                self.maxWidth = max($0, maxWidth)
                width = max($0, maxWidth)
            }
        }
    }
    .pickerStyle(.wheel)
    .frame(maxWidth: width + 2 * 20 /* padding on both sides */)
}

使用Xcode 13.4/iOS 15.5测试

Test code on GitHub