SwiftUI GraphicalDatePickerStyle类型DatePicker iOS15显示后星期名称缺失

根因说明 #

这是iOS 15 中SwiftUI GraphicalDatePickerStyle 的已知系统Bug，当DatePicker采用条件渲染（首次加载时不在视图树中，后续触发才插入）时，星期几的表头文本会无法正常绘制，iOS 14 不受影响，该问题在iOS 16及以上系统版本中已被官方修复。

可用修复方案 #

• 方案1：使用透明度替代条件渲染，避免组件从视图树移除
  不通过if判断控制组件是否插入视图树，改为用opacity控制显隐，组件在页面初始化时就完成加载，就不会出现表头丢失的问题。如果需要同时隐藏占位空间，可以配合frame高度控制：

  struct ContentView: View {
      @State var isDatePickerVisible: Bool = false
      @State var selectedDate = Date()
      
      var body: some View {
          VStack {
              Button(action: {
                  isDatePickerVisible.toggle()
              }, label: {
                  Text("Show")
              })
              
              DatePicker("Enter your birthday",
                        selection: $selectedDate,
                        displayedComponents: .date)
                    .datePickerStyle(GraphicalDatePickerStyle())
                    .opacity(isDatePickerVisible ? 1 : 0)
                    // 不需要占位时添加下方代码隐藏多余空间
                    .frame(height: isDatePickerVisible ? nil : 0)
          }
      }
  }
  

• 方案2：添加id属性强制重绘
  如果需要保留条件渲染的逻辑，只需给DatePicker添加id修饰符，绑定到显隐状态的值，每次组件显示时会触发完整重绘，自动补全星期表头：

  struct ContentView: View {
      @State var isDatePickerVisible: Bool = false
      @State var selectedDate = Date()
      
      var body: some View {
          VStack {
              Button(action: {
                  isDatePickerVisible.toggle()
              }, label: {
                  Text("Show")
              })
              
              if isDatePickerVisible {
                  DatePicker("Enter your birthday",
                            selection: $selectedDate,
                            displayedComponents: .date)
                      .datePickerStyle(GraphicalDatePickerStyle())
                      .id(isDatePickerVisible) // 新增id修饰符触发重绘
              }
          }
      }
  }
  

• 方案3：升级最低支持版本到iOS 16+
  该Bug在iOS 16 及更高版本中已被官方修复，如果你的App适配范围允许，直接升级最低支持版本即可无需额外兼容处理。

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