iOS 15侧边栏列表Section同时渲染Text与DatePicker失效问题

问题结论 #

这是iOS 15系统级的SwiftUI Bug，不属于代码写法错误。该问题根因是iOS 15对sidebar样式列表的Section复用渲染逻辑存在缺陷，当Section内同时包含静态Text和绑定状态的DatePicker时，折叠后再展开的复用渲染流程会出现视图绘制失效的问题，该Bug在iOS 16及以上系统版本中已被官方修复。

可用解决方案 #

• 方案1：给Section内的容器VStack添加自适应高度约束，强制渲染时重新计算布局

struct ContentView: View {
  @State private var selectedDate = Date()
  var body: some View {
      List {
        Section(header: Text("TextView and DatePicker")) {
          VStack {
            Text("TextView")
            DatePicker(selection: $selectedDate, displayedComponents: .date) {
              Text("DatePicker")
            }
          }
          // 新增自适应高度修饰符，也可替换为固定高度.frame(height: xx)
          .fixedSize(horizontal: false, vertical: true)
        }
      }
      .listStyle(.sidebar)
  }
}

• 方案2：将Section内的内容拆分到单独的子视图中，触发独立的视图刷新逻辑

// 拆分出独立的子视图
struct DatePickerSectionContent: View {
  @Binding var selectedDate: Date
  var body: some View {
    VStack {
      Text("TextView")
      DatePicker(selection: $selectedDate, displayedComponents: .date) {
        Text("DatePicker")
      }
    }
  }
}

// 主视图调用逻辑
struct ContentView: View {
  @State private var selectedDate = Date()
  var body: some View {
      List {
        Section(header: Text("TextView and DatePicker")) {
          DatePickerSectionContent(selectedDate: $selectedDate)
        }
      }
      .listStyle(.sidebar)
  }
}

• 方案3：若业务允许放弃原生sidebar样式的自带交互，可通过.listStyle(.grouped)搭配列表行、Header自定义修饰符模拟sidebar样式，完全绕过系统原生sidebar的渲染缺陷。

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