具有图形样式的 DatePicker 打破了 iOS 16.0 上的布局限制答案

【问题标题】：DatePicker with graphical style breaks layout constraints on iOS 16.0具有图形样式的 DatePicker 打破了 iOS 16.0 上的布局限制
【发布时间】：2022-12-12 02:33:45
【问题描述】：

以下代码在 iOS 16.0 的 Xcode-14.0.0-Beta 5 上运行时打破了布局约束

struct ContentView: View {
    
    @State var date = Date()
    
    var body: some View {
        DatePicker(selection: $date, displayedComponents: .date, label: { EmptyView() })
            .datePickerStyle(.graphical)
    }
}

关于如何修复或隐藏警告的任何建议？

控制台警告：

2022-08-24 17:16:40.471325+0300 DatePickerProblem[77364:483284] [LayoutConstraints] 无法同时满足约束条件。可能至少以下列表中的约束之一是您不想要的。尝试这个：（1）查看每个约束并尝试找出您不期望的； (2) 找到添加了不需要的约束或约束的代码并修复它。（注意：如果您看到不理解的 NSAutoresizingMaskLayoutConstraints，请参阅 UIView 属性 translatesAutoresizingMaskIntoConstraints 的文档） ( “<NSAutoresizingMaskLayoutConstraint:0x600003559180 h=--& v=--& _UIDatePickerCalendarTimeView:0x7fe15c322520.height == 0（活动）>”, “<NSLayoutConstraint:0x60000352bca0 _UIDatePickerCompactTimeLabel:0x7fe15c322bc0.centerY == _UIDatePickerCalendarTimeView:0x7fe15c322520.centerY - 1 (active)>”, “<NSLayoutConstraint:0x60000352bcf0 V:|-(>=0)-[_UIDatePickerCompactTimeLabel:0x7fe15c322bc0]（活动，名称：'|':_UIDatePickerCalendarTimeView:0x7fe15c322520）>” ) 将尝试通过打破约束来恢复 <NSLayoutConstraint:0x60000352bca0 _UIDatePickerCompactTimeLabel:0x7fe15c322bc0.centerY == _UIDatePickerCalendarTimeView:0x7fe15c322520.centerY - 1 (active)> 在 UIViewAlertForUnsatisfiableConstraints 创建一个符号断点以在调试器中捕获它。 <UIKitCore/UIView.h> 中列出的 UIView 的 UIConstraintBasedLayoutDebugging 类别中的方法也可能有帮助。 2022-08-24 17:16:40.471971+0300 DatePickerProblem[77364:483284] [LayoutConstraints] 无法同时满足约束条件。可能至少以下列表中的约束之一是您不想要的。尝试这个：（1）查看每个约束并尝试找出您不期望的； (2) 找到添加了不需要的约束或约束的代码并修复它。（注意：如果您看到不理解的 NSAutoresizingMaskLayoutConstraints，请参阅 UIView 属性 translatesAutoresizingMaskIntoConstraints 的文档） ( “<NSAutoresizingMaskLayoutConstraint:0x600003559180 h=--& v=--& _UIDatePickerCalendarTimeView:0x7fe15c322520.height == 0（活动）>”, “<NSLayoutConstraint:0x60000352bd40 UILabel:0x7fe15c324d00.centerY == _UIDatePickerCalendarTimeView:0x7fe15c322520.centerY - 1 (active)>”, “<NSLayoutConstraint:0x60000352bd90 V:|-(>=0)-[UILabel:0x7fe15c324d00]（活动，名称：'|':_UIDatePickerCalendarTimeView:0x7fe15c322520）>” ) 将尝试通过打破约束来恢复 <NSLayoutConstraint:0x60000352bd40 UILabel:0x7fe15c324d00.centerY == _UIDatePickerCalendarTimeView:0x7fe15c322520.centerY - 1 (active)> 在 UIViewAlertForUnsatisfiableConstraints 创建一个符号断点以在调试器中捕获它。 <UIKitCore/UIView.h> 中列出的 UIView 的 UIConstraintBasedLayoutDebugging 类别中的方法也可能有帮助。 2022-08-24 17:16:40.478778+0300 DatePickerProblem[77364:483284] [LayoutConstraints] 无法同时满足约束条件。可能至少以下列表中的约束之一是您不想要的。尝试这个：（1）查看每个约束并尝试找出您不期望的； (2) 找到添加了不需要的约束或约束的代码并修复它。（注意：如果您看到不理解的 NSAutoresizingMaskLayoutConstraints，请参阅 UIView 属性 translatesAutoresizingMaskIntoConstraints 的文档） ( “<_UISystemBaselineConstraint:0x60000355c190 H:[UILabel:0x7fe15c324d00]-(>=NSLayoutAnchorConstraintSpace(8))-[_UIDatePickerCompactTimeLabel:0x7fe15c322bc0]（活动）>”, “<NSAutoresizingMaskLayoutConstraint:0x6000035590e0 h=--& v=--& _UIDatePickerCalendarTimeView:0x7fe15c322520.width == 0（活动）>”, “<NSLayoutConstraint:0x60000352bf20 UILabel:0x7fe15c324d00.leading == UILayoutGuide:0x600002f06760'UIViewLayoutMarginsGuide'.leading (active)>”, “<NSLayoutConstraint:0x60000355c230 _UIDatePickerCompactTimeLabel:0x7fe15c322bc0.trailing == UILayoutGuide:0x600002f06760'UIViewLayoutMarginsGuide'.trailing (active)>”, “<NSLayoutConstraint:0x60000352be30 'UIView-leftMargin-guide-constraint' H:|-(8)-UILayoutGuide:0x600002f06760'UIViewLayoutMarginsGuide'（活动，名称：'|':_UIDatePickerCalendarTimeView:0x7fe15c322520）>”, “<NSLayoutConstraint:0x60000352bed0 'UIView-rightMargin-guide-constraint' H:[UILayoutGuide:0x600002f06760'UIViewLayoutMarginsGuide']-(8)-|(LTR)（活动，名称：'|':_UIDatePickerCalendarTimeView:0x7fe15c322520）>” ) 将尝试通过打破约束来恢复 <_UISystemBaselineConstraint:0x60000355c190 H:[UILabel:0x7fe15c324d00]-(>=NSLayoutAnchorConstraintSpace(8))-[_UIDatePickerCompactTimeLabel:0x7fe15c322bc0]（活动）> 在 UIViewAlertForUnsatisfiableConstraints 创建一个符号断点以在调试器中捕获它。 <UIKitCore/UIView.h> 中列出的 UIView 的 UIConstraintBasedLayoutDebugging 类别中的方法也可能有帮助。 2022-08-24 17:16:40.512015+0300 DatePickerProblem[77364:483284] [UICalendarView] UICalendarView 的高度小于它可以呈现其内容的高度；默认为最小高度。 2022-08-24 17:16:40.548888+0300 DatePickerProblem[77364:483284] [UICalendarView] UICalendarView 的高度小于它可以呈现其内容的高度；默认为最小高度。

【问题讨论】：

标签： ios swift swiftui datepicker ios16

【解决方案1】：

似乎新的底层 UICalendarView 在被它的 SwiftUI DatePicker 包装器使用时有一些 AutoLayout 问题。当您也启用时间组件时，您可以更好地看到这一点：

struct ContentView: View {
    
    @State var date = Date()
    
    var body: some View {
        DatePicker(
            selection: $date, 
            displayedComponents: [.date, .hourAndMinute], 
            label: { EmptyView() }
        )
        .datePickerStyle(.graphical)
    }

}

这给出了一个关于时间标签约束被打破的很长的自动布局警告。

对我来说，这种情况尤其发生在使用推入导航堆栈的 UIHostingController 嵌入 SwiftUI 视图时。

在我的例子中，我能够通过将 DatePicker 的默认宽度作为其框架宽度来修复它：

struct ContentView: View {
    
    @State var date = Date()
    
    var body: some View {
        DatePicker(
            selection: $date, 
            displayedComponents: [.date, .hourAndMinute], 
            label: { EmptyView() }
        )
        .datePickerStyle(.graphical)
        .frame(width: 320) // Bugfix for AutoLayout-Issue
    }

}

【讨论】：