如何解决SwiftUI Picker无法水平居中及检测其展开状态问题

1. 修复Picker左对齐问题 #

你的Picker出现左对齐，是因为默认情况下Picker没有占满父视图的可用宽度。只需给Picker添加.frame(maxWidth: .infinity)让它横向填充父容器，再根据需求设置文本对齐方式即可。

修改后的代码示例：

struct ContentView: View {
    private let options = ["Action", "Comedy", "Drama", "Horror", "Zombie"]
    @State var selection = "Action"
    var body: some View {
        VStack {
            Picker("Select Genre", selection: $selection) {
                ForEach(options, id: \.self) { item in
                    HStack {
                        Text(item)
                        Image(systemName: "heart.fill")
                    }
                }
            }
            .frame(maxWidth: .infinity) // 让Picker占满横向宽度
            .multilineTextAlignment(.center) // 可选：让选中的文本居中显示
        }
        .padding()
    }
}

如果你的Picker使用.pickerStyle(.menu)样式，上述方法依然适用；若需更精细的布局控制，可结合外层容器的对齐属性调整。

2. 检测Picker选项面板的展开/收起状态 #

SwiftUI原生没有提供直接的回调监听Picker面板的展开与收起，但可以通过UIKit包装的方式实现精准监听：

实现方案：UIViewControllerRepresentable包装UIPickerView #

struct CustomPicker: UIViewControllerRepresentable {
    let options: [String]
    @Binding var selection: String
    @Binding var isExpanded: Bool // 跟踪面板展开状态
    
    func makeUIViewController(context: Context) -> UINavigationController {
        let pickerVC = UIPickerViewController(options: options, selection: $selection, isExpanded: $isExpanded)
        return UINavigationController(rootViewController: pickerVC)
    }
    
    func updateUIViewController(_ uiViewController: UINavigationController, context: Context) {}
}

class UIPickerViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {
    let options: [String]
    @Binding var selection: String
    @Binding var isExpanded: Bool
    
    init(options: [String], selection: Binding<String>, isExpanded: Binding<Bool>) {
        self.options = options
        _selection = selection
        _isExpanded = isExpanded
        super.init(nibName: nil, bundle: nil)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    let pickerView = UIPickerView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        pickerView.dataSource = self
        pickerView.delegate = self
        if let selectedIndex = options.firstIndex(of: selection) {
            pickerView.selectRow(selectedIndex, inComponent: 0, animated: false)
        }
        // 添加确认按钮
        let doneButton = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(dismissPicker))
        navigationItem.rightBarButtonItem = doneButton
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        isExpanded = true // 面板展开时标记状态
    }
    
    @objc func dismissPicker() {
        isExpanded = false // 面板收起时标记状态
        dismiss(animated: true)
    }
    
    // UIPickerView数据源与代理方法
    func numberOfComponents(in pickerView: UIPickerView) -> Int { 1 }
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int { options.count }
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? { options[row] }
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        selection = options[row]
    }
}

// 使用示例
struct ContentView: View {
    private let options = ["Action", "Comedy", "Drama", "Horror", "Zombie"]
    @State var selection = "Action"
    @State var isPickerExpanded = false
    
    var body: some View {
        VStack {
            Button("Select Genre: \(selection)") {
                isPickerExpanded = true
            }
            .sheet(isPresented: $isPickerExpanded) {
                CustomPicker(options: options, selection: $selection, isExpanded: $isPickerExpanded)
            }
            
            // 实时显示Picker状态
            Text(isPickerExpanded ? "Picker已展开" : "Picker已收起")
        }
        .padding()
    }
}

这种方式通过自定义Picker的UIKit实现，能准确捕获面板的展开与收起事件。若使用系统默认的Menu样式Picker，也可通过@State变量结合按钮点击间接跟踪，但准确性不如UIKit包装方案。

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