SwiftUI菜单样式Picker添加padding后出现文本换行问题

使用带菜单样式（.menu）的SwiftUI Picker，标签包含图标与文本。给包含该Picker的视图添加padding后，明明空间充足，Picker却会因空间不足显示为多行文本。

示例代码 #

struct ContentView: View {
    let options = [
        "Some Long Text"
    ]

    private var selectedOption: Binding<String> =
        .constant("Some Long Text")

    var body: some View {
        HStack {
            Text("Some Text")
            Picker("Work Type", selection: selectedOption) {
                ForEach(self.options, id: \.self) {
                    Label($0, systemImage: "pencil.tip.crop.circle")
                }
            }.pickerStyle(.menu)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            ContentView()
            ContentView()
                .padding()
        }
    }
}

问题现象 #

解决方案 #

方法1：强制固定尺寸 #

给Picker添加fixedSize()，让它保持内容所需的最小尺寸，避免自动换行：

Picker("Work Type", selection: selectedOption) {
    ForEach(self.options, id: \.self) {
        Label($0, systemImage: "pencil.tip.crop.circle")
    }
}
.pickerStyle(.menu)
.fixedSize()

方法2：调整布局优先级 #

在HStack中给Text设置较低的布局优先级，让Picker优先获取足够空间：

HStack {
    Text("Some Text")
        .layoutPriority(0)
    Picker("Work Type", selection: selectedOption) {
        ForEach(self.options, id: \.self) {
            Label($0, systemImage: "pencil.tip.crop.circle")
        }
    }
    .pickerStyle(.menu)
    .layoutPriority(1)
}

方法3：指定最小宽度 #

直接给Picker设置合适的最小宽度，确保文本有足够显示空间：

Picker("Work Type", selection: selectedOption) {
    ForEach(self.options, id: \.self) {
        Label($0, systemImage: "pencil.tip.crop.circle")
    }
}
.pickerStyle(.menu)
.frame(minWidth: 150) // 根据实际内容调整宽度值

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