SwiftUI中如何消除滚轮样式DatePicker的多余内边距？

问题：希望在不改变字体大小的前提下消除DatePicker周围的多余内边距。使用scale修饰符能消除内边距，但会导致选择器过度放大；该选择器在小屏设备显示正常，但大屏设备上存在大量内边距。

当前代码：

struct Onboarding: View {
    var body: some View {
        DatePicker("", selection: .constant(Date()), in: Date().addingTimeInterval(-120 * 365 * 24 * 60 * 60)...Date(), displayedComponents: .date)
            .datePickerStyle(.wheel)
            .labelsHidden()
            .aspectRatio(contentMode: .fill)
    }
}

struct Onboarding_Previews: PreviewProvider {
    static var previews: some View {
        Onboarding()
    }
}

可行解决方案 #

方案1：通过frame约束+clipped裁剪多余空间

直接指定DatePicker的高度（匹配轮盘实际显示高度），再用clipped裁剪默认的多余内边距区域，完全不影响字体大小：

struct Onboarding: View {
    var body: some View {
        DatePicker("", selection: .constant(Date()), in: Date().addingTimeInterval(-120 * 365 * 24 * 60 * 60)...Date(), displayedComponents: .date)
            .datePickerStyle(.wheel)
            .labelsHidden()
            .frame(height: 180) // 可根据实际显示效果微调高度值
            .clipped()
    }
}

方案2：用GeometryReader动态适配不同设备

如果需要适配多尺寸设备，结合GeometryReader获取父视图尺寸，按比例设置DatePicker高度，避免大屏出现冗余空间：

struct Onboarding: View {
    var body: some View {
        GeometryReader { geo in
            DatePicker("", selection: .constant(Date()), in: Date().addingTimeInterval(-120 * 365 * 24 * 60 * 60)...Date(), displayedComponents: .date)
                .datePickerStyle(.wheel)
                .labelsHidden()
                .frame(height: geo.size.height * 0.3) // 按父视图高度比例调整，可自定义比例值
                .clipped()
        }
    }
}

方案3：自定义轮盘样式（彻底控制布局）

如果以上方法仍达不到预期，可自定义日期选择轮盘，完全掌控每个组件的内边距、布局和字体：

// 自定义日期选择轮盘简化实现
struct CustomDatePicker: View {
    @State private var selectedDate = Date()
    let dateRange: ClosedRange<Date>
    
    var body: some View {
        HStack(spacing: 20) {
            // 年份轮盘
            Picker("", selection: $selectedDate) {
                ForEach(1903...2024, id: \.self) { year in
                    Text("\(year)")
                }
            }
            .pickerStyle(.wheel)
            
            // 月份轮盘
            Picker("", selection: $selectedDate) {
                ForEach(1...12, id: \.self) { month in
                    Text(DateFormatter.monthFormatter.string(from: Calendar.current.date(from: DateComponents(year: 2024, month: month))!))
                }
            }
            .pickerStyle(.wheel)
            
            // 日期轮盘
            Picker("", selection: $selectedDate) {
                ForEach(1...31, id: \.self) { day in
                    Text("\(day)")
                }
            }
            .pickerStyle(.wheel)
        }
        .labelsHidden()
    }
}

// 日期格式化器扩展
extension DateFormatter {
    static let monthFormatter: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateFormat = "MMM"
        return formatter
    }()
}

// 使用自定义选择器
struct Onboarding: View {
    var body: some View {
        CustomDatePicker(dateRange: Date().addingTimeInterval(-120 * 365 * 24 * 60 * 60)...Date())
    }
}

自定义样式能完美匹配健康App的效果，但需要额外处理日期联动逻辑。

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