SwiftUI中在Form/List添加Picker时行高异常问题

你的问题出在Picker在List中的默认样式上——在iOS 16及后续版本中，SwiftUI的Picker放在List/Form里时，默认使用NavigationLinkPickerStyle，这种样式会将Picker渲染成可跳转至选择页面的列表行，布局上会预留更多空间，导致行高超出预期。

要得到紧凑的行高效果，只需给Picker指定对应的样式即可，以下是两种常用方案：

方案一：使用菜单样式Picker #

直接给Picker添加.pickerStyle(.menu)修饰符，这会将Picker转为下拉菜单样式，行高与普通List行保持一致：

import SwiftUI

struct ContentView: View {
    @State private var selectedOption: Int = 0
    
    var body: some View {
        List {
            Picker("Picker Row", selection: $selectedOption) {
                ForEach(0..<10) {
                    Text("\($0)")
                }
            }
            .pickerStyle(.menu)
        }
    }
}

方案二：自定义行布局（更灵活） #

如果需要更精准的布局控制，可以用HStack包裹标签和无标题的Picker，配合隐藏标签：

import SwiftUI

struct ContentView: View {
    @State private var selectedOption: Int = 0
    
    var body: some View {
        List {
            HStack {
                Text("Picker Row")
                Spacer()
                Picker("", selection: $selectedOption) {
                    ForEach(0..<10) {
                        Text("\($0)")
                    }
                }
                .pickerStyle(.menu)
                .labelsHidden()
            }
        }
    }
}

两种方案都能让Picker行高匹配你预期的紧凑效果，你可以根据实际需求选择。

内容的提问来源于stack exchange，提问作者Yazeed AL-Zahrani