NavigationSplitView侧边栏UICalendarView与DatePicker尺寸异常问题

你在使用UIViewRepresentable封装UICalendarView时，遇到了在NavigationSplitView侧边栏宽度显示异常的问题：水平空间不足时，自定义日历组件宽度溢出，而系统的图形化DatePicker却能正常适配布局，详情面板中两者表现一致。

你的原始代码如下：

struct CalendarUI: UIViewRepresentable {
    
    let interval: DateInterval
    
    func makeUIView(context: Context) -> UICalendarView {
        let view = UICalendarView()
        view.calendar = Calendar.current
        view.availableDateRange = interval
        return view
    }
    
    func updateUIView(_ uiView: UICalendarView, context: Context) {
        
    }
    
}

struct SidebarUI: View {
    
    @State private var date = Date()
    
    var body: some View {
        VStack {
            CalendarUI(interval: DateInterval(start: .distantPast, end: .distantFuture))
                .fixedSize(horizontal: true, vertical: true)
            DatePicker(
                "Start Date",
                selection: $date,
                displayedComponents: [.date]
            )
            .datePickerStyle(.graphical)
        }.padding()
    }
}

问题原因 #

fixedSize(horizontal: true)会强制UICalendarView保持其固有宽度，忽略SwiftUI的布局约束，导致空间不足时无法自适应压缩。而系统的DatePicker已经做了布局适配，能自动响应可用空间调整自身尺寸。另外，UIKit视图默认的translatesAutoresizingMaskIntoConstraints为true，会干扰SwiftUI的布局规则。

修复方案 #

通过以下两步调整，让自定义日历组件适配侧边栏布局：

1. 移除fixedSize(horizontal: true, vertical: true)，允许组件响应父容器的布局约束
2. 在UIViewRepresentable内部配置UICalendarView的布局属性，让它和SwiftUI布局系统协作

修改后的代码：

struct CalendarUI: UIViewRepresentable {
    
    let interval: DateInterval
    
    func makeUIView(context: Context) -> UICalendarView {
        let view = UICalendarView()
        view.calendar = Calendar.current
        view.availableDateRange = interval
        
        // 禁用自动转换约束，让SwiftUI控制布局
        view.translatesAutoresizingMaskIntoConstraints = false
        // 设置水平方向压缩优先级，允许空间不足时压缩
        view.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
        
        return view
    }
    
    func updateUIView(_ uiView: UICalendarView, context: Context) {
        
    }
    
}

struct SidebarUI: View {
    
    @State private var date = Date()
    
    var body: some View {
        VStack {
            CalendarUI(interval: DateInterval(start: .distantPast, end: .distantFuture))
            // 可选：设置最小宽度，避免日历过度压缩
            // .frame(minWidth: 280)
            
            DatePicker(
                "Start Date",
                selection: $date,
                displayedComponents: [.date]
            )
            .datePickerStyle(.graphical)
        }.padding()
    }
}

说明 #

• translatesAutoresizingMaskIntoConstraints = false是UIKit和SwiftUI布局协作的关键，确保SwiftUI的约束能正确作用到UIKit视图上
• 降低水平方向的压缩阻力优先级，让UICalendarView在空间不足时可以被压缩，和DatePicker的表现保持一致
• 若需要避免日历过度压缩，可添加frame(minWidth: ...)设置最小宽度，平衡适配性和显示效果

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