SwiftUI iOS 14中DatePicker的中心对齐

2admgd59  于 2023-04-19  发布在  Swift
关注(0)|答案(4)|浏览(154)

我有一个GraphicalDatePickerStyle的DatePicker,我想把它放在一个矩形的中心。我的代码:

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

这就是我想要和得到的:

如何居中我的DatePicker?看起来它的框架是宽的一些未知的原因.我尝试更改其框架大小为宽度:95或更少的中心,但在此之后,我得到...而不是数字时,打字的一些设备。

p1iqtdky

p1iqtdky1#

它似乎只适用于CompactDatePickerStyle

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

h5qlskok2#

紧凑的样式太小了,行为对我的要求来说很奇怪,所以我合理地硬编码了大小,同时考虑了可访问性:

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动态地挤压/扩展选择器以适应宽度,而不是剪切它。

v1uwarro

v1uwarro3#

这对我很有效:

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

zqdjd7g94#

UIKit解决方案

经过几次谷歌搜索,我一直在结果页面的顶部找到这篇文章,所以我只是要在这里回答,即使它不完全与OP问题有关,请随意惩罚我;).
在Interface Builder中给出以下结构:

在视图控制器中,使用IBOutlet连接选择器以编程方式访问它。

@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
    }
}

希望对你有用!

相关问题