如何使 SwiftUI Picker 換行文本

Question

當使用帶有.pickerStyle(WheelPickerStyle())的Picker時，picker 占用的水平空間似乎是固定的。 在下圖中，Picker 框架（通過其較淺的顏色可見）大於其元素所需的大小。

我試圖讓選擇器的寬度與其包含的最長選項一樣寬，類似於Text()視圖“換行”其文本的方式，並且僅與其中的文本需要它們一樣大成為。

如何在 SwiftUI 中為 Wheel Picker 完成此操作？

Answer 1

一個解決方案看起來有點復雜，因為 Picker 不是原生的 SwiftUI 控件，而是在后端有UIPickerView ，所以我們需要結合已經提到的一個來擺脫壓縮包含和另一個來計算最長標簽並顯式壓縮選取器。

主要部分是

@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 測試

GitHub上的測試代碼