SwiftUI iOS 14 中 DatePicker 的居中对齐

Question

我有一个 GraphicalDatePickerStyle 的 DatePicker，我想将它放在矩形的中心。我的代码：

HStack {
        Spacer()
        DatePicker("", selection: $notificationTimeOnPicker, displayedComponents: .hourAndMinute).foregroundColor(Color("ChartColor")).labelsHidden()
                                .datePickerStyle(GraphicalDatePickerStyle())
        Spacer()
                            
        }

这就是我得到和想要的：

如何将 DatePicker 居中？看起来它的框架由于某种未知的原因而很宽。我尝试将其框架大小更改为宽度：95 或更小以使其居中，但之后在某些设备上打字时我得到...而不是数字。

Answer 1

它似乎只适用于 CompactDatePickerStyle

DatePicker("", selection: $notificationTimeOnPicker, displayedComponents: .hourAndMinute)
    .foregroundColor(Color("ChartColor"))           
    .datePickerStyle(CompactDatePickerStyle())
    .clipped()
    .labelsHidden()

Answer 2

紧凑的风格太小，而且行为对于我的要求来说很奇怪，所以我也考虑到可访问性，对大小进行了合理的硬编码：

struct ContentView: View {
    @Environment(\.sizeCategory) private var sizeCategory

    var body: some View {
            DatePicker("Select a time", selection: .constant(Date()), displayedComponents: .hourAndMinute)
                .datePickerStyle(GraphicalDatePickerStyle())
                .labelsHidden()
                .frame(maxWidth: CGFloat(sizeCategory.isAccessibilityCategory ? 235 : 200))
    }
}

好处是 SwiftUI 动态挤压/扩展选择器以适应宽度，而不是剪裁它。

Answer 3

从 iOS 17+ 开始，

.labelsHidden()

就是我将 DatePicker 对齐到中心所需的全部。

DatePicker("", selection: $notificationTimeOnPicker, displayedComponents: .hourAndMinute)
.datePickerStyle(GraphicalDatePickerStyle())
.foregroundStyle(Color("ChartColor"))
.labelsHidden() // this solved my alignment issues caused by the default empty 'EmptyView' label that was hungrily taking up horizontal space.

我希望这能为其他在 2024 年寻找答案的人解决这个问题！

Answer 4

这对我有用：

DatePicker("", selection: $date, displayedComponents: .date)
    .datePickerStyle(.graphical)
    .labelsHidden()
    .scaledToFit()

Answer 5

UIKit 解决方案

经过几次谷歌搜索，我一直在结果页面的顶部找到这篇文章，所以我只是在这里回答，尽管它与OP问题并不完全相关，请随意惩罚我;)。

在 Interface Builder 中给出这个结构：

在视图控制器中，使用 IBOutlet 连接 Picker 以通过编程方式访问它。

@IBOutlet weak var expirationDate: UIDatePicker!

最后在 viewWillLayoutSubviews() 或 viewDidLayoutSubviews() 中添加以下代码：

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()

    if let viewPicker = expirationDate.subviews.first?.subviews.first {
        // Force the date picker to be centered
        viewPicker.center.x = expirationDate.subviews.first!.center.x
    }
}

希望您觉得它有用！