如何调整SwiftUI中UIPickerView多滚轮之间的间距？

SwiftUI默认的WheelPickerStyle没有提供直接调整滚轮间距的API，UIKit的UIPickerView本身也没有公开的间距属性，但可以通过两种方式实现需求：

方案一：SwiftUI布局层面快速实现（视觉模拟间距） #

通过调整每个滚轮Picker的宽度，结合HStack的spacing来留出滚轮之间的空白，操作简单，适合快速需求。

修改你的MultiWheelPicker代码：

1. 在HStack中指定spacing参数，控制滚轮间的空白宽度
2. 重新计算每个Picker的宽度，确保总宽度适配容器

修改后的代码片段：

struct MultiWheelPicker<Data>: View where Data : Hashable {
  let labels: [String]
  let data: [[Data]]
  @Binding var selection: [Data]
  let componentSpacing: CGFloat // 新增间距参数

  var body: some View {
    GeometryReader { geometry in
      // 设置HStack的spacing为滚轮间距
      HStack(spacing: componentSpacing) {
        ForEach(0..<data.count) { column in
          picker(label: labels[column],
                 columnData: data[column],
                 column: column,
                 geometry: geometry)
        }
      }
    }
  }

  @ViewBuilder private func picker(
    label: String,
    columnData: [Data],
    column: Int,
    geometry: GeometryProxy
  ) -> some View {
    Picker(label, selection: $selection[column]) {
      ForEach(0..<columnData.count) { row in
        Text(String(describing: columnData[row]))
          .tag(columnData[row])
      }
    }
    .pickerStyle(.wheel)
    .labelsHidden()
    // 计算每个Picker的宽度：总宽度减去所有间距后平分
    .frame(width: (geometry.size.width - componentSpacing * CGFloat(data.count - 1)) / CGFloat(data.count),
           height: geometry.size.height)
    .clipped()
  }
}

// 使用示例
struct MultiWheelPickerTest: View {
  @State var selection = ["1", "1", "1991"]

  var body: some View {
    VStack(alignment: .center) {
      Text(verbatim: "Selection: \(selection)")
      MultiWheelPicker(labels: ["Day", "Month", "Year"],
                       data:  [
                        Array(1...31).map { "\($0)" },
                        Array(1...12).map { "\($0)" },
                        Array(1991...2023).map { "\($0)" }
                       ],
                       selection: $selection,
                       componentSpacing: 15) // 设置滚轮间距为15
      .frame(width: 300, height: 150)
    }
  }
}

方案二：封装UIKit的UIPickerView（真正控制滚轮布局） #

如果需要更灵活的控制（比如自定义滚轮样式、精确调整间距），可以直接封装UIKit的UIPickerView，通过代理方法控制每个滚轮的宽度，从而实现间距调整。

自定义Picker的代码：

struct CustomWheelPicker: UIViewRepresentable {
    typealias UIViewType = UIPickerView
    
    let data: [[String]]
    @Binding var selection: [String]
    let componentSpacing: CGFloat // 滚轮间距
    
    func makeUIView(context: Context) -> UIPickerView {
        let picker = UIPickerView()
        picker.dataSource = context.coordinator
        picker.delegate = context.coordinator
        picker.backgroundColor = .clear
        return picker
    }
    
    func updateUIView(_ uiView: UIPickerView, context: Context) {
        // 更新选中状态
        for component in 0..<data.count {
            guard let row = data[component].firstIndex(of: selection[component]) else { continue }
            uiView.selectRow(row, inComponent: component, animated: false)
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UIPickerViewDataSource, UIPickerViewDelegate {
        let parent: CustomWheelPicker
        
        init(_ parent: CustomWheelPicker) {
            self.parent = parent
        }
        
        // 滚轮数量
        func numberOfComponents(in pickerView: UIPickerView) -> Int {
            parent.data.count
        }
        
        // 每个滚轮的行数
        func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
            parent.data[component].count
        }
        
        // 每行的标题
        func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
            parent.data[component][row]
        }
        
        // 选中行的回调
        func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
            parent.selection[component] = parent.data[component][row]
        }
        
        // 控制每个滚轮的宽度，通过减去总间距实现滚轮间的空白
        func pickerView(_ pickerView: UIPickerView, widthForComponent component: Int) -> CGFloat {
            let totalSpacing = parent.componentSpacing * CGFloat(parent.data.count - 1)
            return (pickerView.frame.width - totalSpacing) / CGFloat(parent.data.count)
        }
    }
}

// 使用示例
struct CustomPickerTest: View {
    @State var selection = ["1", "1", "1991"]
    
    var body: some View {
        VStack(alignment: .center) {
            Text(verbatim: "Selection: \(selection)")
            CustomWheelPicker(
                data: [
                    Array(1...31).map { "\($0)" },
                    Array(1...12).map { "\($0)" },
                    Array(1991...2023).map { "\($0)" }
                ],
                selection: $selection,
                componentSpacing: 20 // 设置滚轮间距
            )
            .frame(width: 300, height: 150)
        }
    }
}

补充说明 #

• 方案一属于视觉层面的模拟，本质是缩小每个滚轮的宽度来留出空白，优点是不需要接触UIKit，纯SwiftUI实现；
• 方案二直接基于UIKit的UIPickerView，能更精确控制滚轮的布局，还可以扩展自定义滚轮的字体、颜色等样式；
• 如果你需要保留原有的UIPickerView高度调整，可以在自定义的UIViewRepresentable中给picker设置intrinsicContentSize，或者直接在frame中指定高度。

内容的提问来源于stack exchange，提问作者EndyVelvet