SwiftUI DatePicker约束冲突求助：添加后出现布局警告

问题描述 #

在SwiftUI应用中添加DatePicker组件后，控制台出现布局约束冲突警告，即使仅在WindowGroup中单独添加DatePicker也会触发相同警告。

警告信息 #

2023-02-28 13:46:35.521600+0200 Warranty Safe[14957:3417410] [LayoutConstraints] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want.
Try this:
(1) look at each constraint and try to figure out which you don't expect;
(2) find the code that added the unwanted constraint or constraints and fix it.
(
"<NSLayoutConstraint:0x282795090 H:|-(>=0)-[UILabel:0x129e5a180] (active, names: '|':_UIDatePickerLinkedLabel:0x129e59d70 )>",
"<NSLayoutConstraint:0x282795220 UILayoutGuide:0x283dc33a0''.trailing == UILabel:0x129e5a180.trailing (active)>",
"<NSLayoutConstraint:0x2827952c0 _UIDatePickerCompactDateLabel:0x129e59990.leading == _UIDatePickerLinkedLabel:0x129e59d70.leading - 12 (active)>",
"<NSLayoutConstraint:0x282795450 UIView:0x129e5abf0.trailing == UILayoutGuide:0x283dc33a0''.trailing + 12 (active)>",
"<NSLayoutConstraint:0x2827959a0 H:|-(12)-[UILabel:0x129e616f0] (active, names: '|':_UIDatePickerCompactTimeLabel:0x129e5b170 )>",
"<NSLayoutConstraint:0x282795a40 H:[UILabel:0x129e616f0]-(12)-| (active, names: '|':_UIDatePickerCompactTimeLabel:0x129e5b170 )>",
"<NSLayoutConstraint:0x2827968a0 H:[UIView:0x129e5abf0]-(4)-[_UIDatePickerCompactTimeLabel:0x129e5b170] (active)>",
"<NSLayoutConstraint:0x2827968f0 _UIDatePickerCompactDateLabel:0x129e59990.leading == UILayoutGuide:0x283dc3720''.leading (active)>",
"<NSLayoutConstraint:0x282796940 _UIDatePickerCompactTimeLabel:0x129e5b170.trailing <= UILayoutGuide:0x283dc3720''.trailing (active)>",
"<NSLayoutConstraint:0x282796ad0 H:|-(>=0)-UILayoutGuide:0x283dc3720'' (active, names: '|':_UIDatePickerIOSCompactView:0x129e59530 )>",
"<NSLayoutConstraint:0x282796b20 UILayoutGuide:0x283dc3720''.right == _UIDatePickerIOSCompactView:0x129e59530.right (active)>",
"<NSLayoutConstraint:0x2827961c0 H:|-(0)-[_UIDatePickerIOSCompactView:0x129e59530] (active, names: '|':UIDatePicker:0x129e59300 )>",
"<NSLayoutConstraint:0x282796440 _UIDatePickerIOSCompactView:0x129e59530.trailing == UIDatePicker:0x129e59300.trailing (active)>",
"<NSLayoutConstraint:0x2827978e0 '_UITemporaryLayoutWidth' UIDatePicker:0x129e59300.width == 0 (active)>"
)Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x282795220 UILayoutGuide:0x283dc33a0''.trailing == UILabel:0x129e5a180.trailing (active)>

相关代码 #

Section {
    VStack(alignment: .leading){
        DatePicker("Select purchase date", selection: $handler.purchaseDate, displayedComponents: .date)
            .frame(width: 100, height: 50)
            .labelsHidden()
        Divider()
            .frame(height: 1)
            .background(Color("Acent"))
    }
} header: {
    Text("Date of purchase:")
}
.listRowBackground(Color.clear)
.foregroundColor(.gray)

问题原因 #

这是SwiftUI底层UIDatePicker实现的已知布局bug，当DatePicker处于紧凑模式（iOS默认样式）且被设置固定宽度时，内部布局约束会出现冲突，系统会自动打破其中一个约束恢复布局，但警告会持续输出。

解决办法 #

1. 移除固定宽度约束 #

删除DatePicker上的.frame(width: 100, height: 50)固定宽度设置，让组件自适应布局：

DatePicker("Select purchase date", selection: $handler.purchaseDate, displayedComponents: .date)
    .labelsHidden()

2. 指定非紧凑样式 #

通过datePickerStyle设置非紧凑样式，避免触发紧凑模式下的约束冲突，比如使用滚轮样式或图形化样式：

DatePicker("Select purchase date", selection: $handler.purchaseDate, displayedComponents: .date)
    .datePickerStyle(WheelDatePickerStyle())
    .labelsHidden()

3. 自定义UIViewRepresentable包装（保留固定宽度） #

如果必须使用固定宽度，可自定义UIViewRepresentable包装原生UIDatePicker，手动管理布局约束：

struct FixedWidthDatePicker: UIViewRepresentable {
    @Binding var date: Date
    let width: CGFloat
    
    func makeUIView(context: Context) -> UIDatePicker {
        let picker = UIDatePicker()
        picker.datePickerMode = .date
        picker.addTarget(context.coordinator, action: #selector(Coordinator.dateChanged), for: .valueChanged)
        return picker
    }
    
    func updateUIView(_ uiView: UIDatePicker, context: Context) {
        uiView.date = date
        uiView.widthAnchor.constraint(equalToConstant: width).isActive = true
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject {
        let parent: FixedWidthDatePicker
        
        init(_ parent: FixedWidthDatePicker) {
            self.parent = parent
        }
        
        @objc func dateChanged(_ sender: UIDatePicker) {
            parent.date = sender.date
        }
    }
}

// 使用方式
FixedWidthDatePicker(date: $handler.purchaseDate, width: 100)

4. 临时隐藏警告 #

如果不影响功能，可通过Xcode控制台过滤隐藏约束警告：

• 打开Xcode控制台，点击右上角过滤按钮
• 添加过滤规则：排除包含LayoutConstraints的日志

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