SwiftUI iOS 14 中 DatePicker 的中心对齐

Posted 2023-02-25

【中文标题】SwiftUI iOS 14 中 DatePicker 的中心对齐

【英文标题】：Center alignment of DatePicker in SwiftUI iOS 14

【发布时间】：2020-10-14 09:43:59

【问题描述】：

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

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

这是我得到和想要的：

如何让我的 DatePicker 居中？看起来它的框架很宽，原因不明。我尝试将其框架大小更改为 width: 95 或更少以使其居中，但之后在某些设备上键入时我得到 ... 而不是数字。

【问题讨论】：

尝试将.clipped() 添加到您的选择器

@LeoDabus 谢谢，但没有帮助☹️

这可能会有所帮助***.com/a/62274156/2303865

【参考方案1】：

它似乎只适用于 CompactDatePickerStyle

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

【参考方案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 动态压缩/扩展选择器以适应宽度而不是剪裁它。

【参考方案3】：

UIKit 解决方案

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

鉴于 Interface Builder 中的这种结构：

在您的 View Controller 中，使用 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
    

希望你觉得它有用！