如何解决带DatePicker的View在底部安全区设备上的过渡跳变问题

问题现象 #

• 无底部安全区设备（如iPhone SE、iPhone 7 Plus）上，底部滑入面板动画流畅
• 带底部安全区设备（如iPhone 12、iPhone 14）上，面板包含wheel样式DatePicker时，滑入/滑出动画出现跳变、卡顿
• 移除DatePicker后动画恢复正常；改用offset替代条件渲染保留PanelView生命周期后，问题仍存在

解决方法 #

1. 忽略底部安全区干扰 #

给PanelView的外层容器添加ignoresSafeArea(.container, edges: .bottom)，避免系统安全区布局逻辑在动画期间干扰面板高度计算：

struct PanelView: View {
    // 原有属性不变
    
    var body: some View {
        VStack(alignment: .center) {
            Spacer()
            // 原有面板内容不变
        }
        .ignoresSafeArea(.container, edges: .bottom) // 添加此行
        .background(GeometryReader { geometry in
            Color.clear
                .preference(key: PanelHeightPreferenceKey.self, value: geometry.size.height)
        })
        // 后续修饰符、手势逻辑不变
    }
}

2. 固定DatePicker高度 #

wheel样式的DatePicker默认高度为216pt，提前固定高度可避免动画期间动态布局重计算：

DatePicker("Pick date", selection: $selectedDate)
    .datePickerStyle(.wheel)
    .labelsHidden()
    .frame(height: 216) // 固定高度

3. 精准控制动画依赖 #

明确动画的触发依赖值，避免不必要的布局刷新：

.offset(y: isPresented ? (panelVerticalOffset + dragOffset) : panelHeight)
.animation(.easeInOut, value: [isPresented, panelVerticalOffset, dragOffset]) // 明确依赖数组

问题原因 #

带底部安全区的设备上，SwiftUI的wheel样式DatePicker底层依赖UIDatePicker，它会自动适配安全区并在动画过程中动态调整布局。这种动态布局计算会和SwiftUI的动画系统冲突，导致面板高度在动画中突变，出现跳变卡顿。通过忽略安全区、固定高度，能消除这种动态布局干扰，让动画保持流畅。

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