SwiftUI国家选择器实现：显示国名存ID且美国置顶

核心实现逻辑 #

• 第一步：先定义统一的选项数据结构，把「用户可见的展示文本」和「后端需要存储的值」绑定在一起，避免分开维护两个数组出现索引不匹配的问题。这个结构可以直接复用到后续的州选择器场景，不用改逻辑。
• 第二步：生成选项列表时，先把需要置顶的项（这里是美国）插入到数组首位，剩下的选项按字母排序追加到数组末尾，就能实现置顶+重复出现的需求。
• 第三步：Picker直接绑定选中的整个结构实例，后续需要展示名称就取实例的展示属性，需要存库就取实例的存储属性，不需要自己做映射。

参考实现代码 #

import SwiftUI

// 通用的选择项结构，国家选择、州选择都可以用
struct PickerOption: Hashable {
    let displayName: String // 给用户看的名称：国家名/州全称
    let storedValue: String // 存到数据库的值：国家ISO编码/州缩写
}

struct CountryView: View {
    // 直接绑定选中的整个选项，要什么值直接取属性就行
    @State private var selectedOption: PickerOption?
    @State private var showsCountryPicker = false
    
    // 生成国家选项列表
    private var countryOptions: [PickerOption] {
        // 先生成所有国家的选项
        let allOptions = Locale.isoRegionCodes.compactMap { code in
            guard let name = Locale.current.localizedString(forRegionCode: code) else { return nil }
            return PickerOption(displayName: name, storedValue: code)
        }
        // 单独取出美国的选项
        guard let usOption = allOptions.first(where: { $0.storedValue == "US" }) else {
            return allOptions.sorted { $0.displayName < $1.displayName }
        }
        // 美国放最前面，剩下的排序后追加，自然就有重复的美国在列表里
        return [usOption] + allOptions.sorted { $0.displayName < $1.displayName }
    }

    var body: some View {
        HStack {
            Text("国家:")
                .font(.system(size: 17))
            Spacer()
            if let selected = selectedOption {
                Text(selected.displayName)
                    .font(.system(size: 17))
                    .foregroundColor(Color("WhiteText"))
            } else {
                Text("选择国家")
                    .font(.system(size: 17))
                    .foregroundColor(Color("GrayText"))
            }
        }
        .onTapGesture {
            showsCountryPicker.toggle()
        }
        
        if showsCountryPicker {
            Picker("国家", selection: $selectedOption) {
                ForEach(countryOptions, id: \.self) { option in
                    Text(option.displayName)
                }
            }
            .pickerStyle(WheelPickerStyle())
            .padding()
            .labelsHidden()
        }
        
        // 要存库的时候直接取 selectedOption?.storedValue 就是国家ID
    }
}

后续州选择器复用说明 #

你要做美国州选择器的时候，只需要替换countryOptions的生成逻辑：把displayName设为州的全称，storedValue设为州的缩写，其他Picker、展示、取值的逻辑完全不用修改，就能实现展示全称存缩写的需求。

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