iOS16下SwiftUI Picker如何隐藏上下箭头及匹配DatePicker样式？

一、隐藏Picker右侧的上下箭头 #

针对Form中iOS16默认带右侧上下箭头的Picker，提供两种可行方案：

方案1：局部隐藏（不影响其他单元格） #

通过自定义ViewModifier精准覆盖原箭头位置，避免全局样式污染：

struct HidePickerAccessoryArrow: ViewModifier {
    func body(content: Content) -> some View {
        content
            .listRowBackground(Color.clear)
            .overlay(
                content
                    .padding(.trailing, 20) // 覆盖原箭头区域
            )
    }
}

// 使用示例
Picker("选择选项", selection: $selectedOption) {
    ForEach(["选项1", "选项2", "选项3"], id: \.self) {
        Text($0)
    }
}
.modifier(HidePickerAccessoryArrow())

方案2：全局隐藏（适合页面无箭头需求） #

在视图初始化时统一修改UITableViewCell的箭头样式，页面销毁后恢复默认：

struct ContentView: View {
    @State private var selectedOption = "选项1"
    @State private var selectedDate = Date()
    
    init() {
        UITableViewCell.appearance().accessoryType = .none
    }
    
    var body: some View {
        Form {
            Picker("选择选项", selection: $selectedOption) {
                ForEach(["选项1", "选项2", "选项3"], id: \.self) {
                    Text($0)
                }
            }
            
            DatePicker("选择日期", selection: $selectedDate)
        }
        .onDisappear {
            UITableViewCell.appearance().accessoryType = .disclosureIndicator
        }
    }
}

二、让Picker背景与DatePicker一致 #

无需手动设置背景和圆角，通过以下方式实现系统样式统一：

方案1：利用分组表单默认样式 #

将Picker和DatePicker放在启用.formStyle(.grouped)的Form中，系统会自动匹配两者的背景、圆角样式：

Form {
    Section {
        Picker("选择选项", selection: $selectedOption) {
            ForEach(["选项1", "选项2", "选项3"], id: \.self) {
                Text($0)
            }
        }
        .pickerStyle(.automatic)
        
        DatePicker("选择日期", selection: $selectedDate)
            .datePickerStyle(.compact)
    }
}
.formStyle(.grouped)

方案2：全局统一Picker外观 #

在App初始化时通过UIAppearance设置UIPickerView的样式，完全匹配DatePicker的视觉效果：

@main
struct YourApp: App {
    init() {
        let datePickerBg = UIColor.systemGroupedBackground
        UIPickerView.appearance().backgroundColor = datePickerBg
        UIPickerView.appearance().layer.cornerRadius = 12 // 匹配DatePicker圆角
        UIPickerView.appearance().layer.masksToBounds = true
    }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

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