SwiftUI中DayView的List无法显示预约内容求助

问题背景 #

SwiftUI应用里，CalendarView向DayView传递预约数组，已确认数据传递正常且视图代码执行，但DayView中遍历appointments渲染DayCellView的List组件始终无内容，清理构建文件夹后问题依旧。

核心问题代码 #

List {
    ForEach(appointments) { appointment in
        DayCellView(appointment: appointment)
    }
}

可能的原因及解决方法 #

1. Appointment未遵循Identifiable协议 #

SwiftUI的ForEach默认要求数组元素遵循Identifiable协议（需提供唯一id属性），如果Appointment没实现该协议，ForEach无法正确识别元素，导致List不渲染。

解决方式：

• 给Appointment添加Identifiable协议：

  struct Appointment: Identifiable {
      let id = UUID() // 或使用业务场景中的唯一ID
      // 其他属性...
  }
  

• 或者在ForEach中显式指定唯一标识：

  ForEach(appointments, id: \.yourUniqueProperty) { appointment in
      DayCellView(appointment: appointment)
  }
  

2. List嵌套在ScrollView引发布局冲突 #

DayView的body中，List被直接包裹在ScrollView内。List本身自带滚动功能，嵌套后会触发SwiftUI布局冲突，导致List被压缩或无法正常渲染。

解决方式：
移除外层ScrollView，改用VStack组合List和下方内容：

var body: some View {
    VStack(spacing: 0) {
        List {
            ForEach(appointments) { appointment in
                DayCellView(appointment: appointment)
            }
        }
        .listStyle(.plain) // 可选，消除List默认间距

        VStack {
            // 原VStack中的日期选择等内容
        }
    }
    .navigationTitle(currentDate.dayOfWeek())
    .navigationBarTitleDisplayMode(.inline)
    .onAppear {
        dates = timesWith30MinuteIncrements(for: currentDate)
    }
}

3. DayCellView的NavigationLink导致布局异常 #

DayCellView以NavigationLink作为根视图，在ScrollView嵌套List的场景下，NavigationLink的布局可能被挤压，导致单元格不可见。

解决方式：
给DayCellView设置最小高度，强制布局空间：

DayCellView(appointment: appointment)
    .frame(minHeight: 120) // 根据实际内容调整高度

4. 二次验证appointments数据有效性 #

尽管你确认数据传递正常，仍可在DayView的onAppear中打印数组长度，再次验证数据是否真的传入：

.onAppear {
    dates = timesWith30MinuteIncrements(for: currentDate)
    print("当前预约数量: \(appointments.count)")
}

同时检查CalendarView中dateHasAppointment方法是否正确返回了包含有效预约的value.appointments。

相关代码参考 #

DayView完整代码

import SwiftUI

struct DayView: View {
    var appointments: [Appointment] = []
    
    @State var dates = [
            Date(),
            Calendar.current.date(byAdding: .minute, value: 30, to: Date()),
            Calendar.current.date(byAdding: .hour, value: 60, to: Date()),
            Calendar.current.date(byAdding: .hour, value: 90, to: Date()),
            Calendar.current.date(byAdding: .hour, value: 120, to: Date())
        ]
        .compactMap { $0 }
    
    @State var selectedDate: Date?
    
    @State var currentDate: Date
    
    var body: some View {
        ScrollView {
            
            List {
                ForEach(appointments) { appointment in
                    DayCellView(appointment: appointment)
                }
            }
            
            VStack {
                Text(currentDate.fullMonthDayYearFormat())
                
                Divider()
                    .padding(.vertical)
                
                Text("Select a Time")
                    .font(.largeTitle)
                    .bold()
                
                Text("Duration: 15 minutes")
                
                ForEach(dates, id: \.self) { date in
                    HStack {
                        Button {
                            withAnimation {
                                selectedDate = date
                            }
                        } label: {
                           
                            Text( (date.timeFromDate()))
                                .bold()
                                .padding()
                                .frame(maxWidth: .infinity)
                                .foregroundColor(selectedDate == date ? .white : .blue)
                                .background(ZStack {
                                    if selectedDate == date {
                                        RoundedRectangle(cornerRadius: 10).foregroundColor(.gray)
                                    } else {
                                        RoundedRectangle(cornerRadius: 10).stroke()
                                    }
                                }
                                )
                    }
                        if selectedDate == date {
                            NavigationLink {
                                if let resident = NetworkViewModel.resident {
                                    BookingView( appointment: Appointment(residentID: resident.id!, firstName: "", lastName: "", phoneNumber: "", date: selectedDate!, time: selectedDate!.timeFromDate(), description: "", house: "", residentAddress: "", addressOfAppt: "", hasRideScheduled: false))
                                }
                                
                            } label: {
                               Text("Next")
                                    .bold()
                                    .padding()
                                    .frame(maxWidth: .infinity)
                                    .foregroundColor(.white)
                                    .background(
                                    RoundedRectangle(cornerRadius: 10)
                                        .foregroundColor(.blue)
                                    )
                            }
                        }
                    }
                }
                .padding(.horizontal)
            }
        }
        .navigationTitle(currentDate.dayOfWeek())
        .navigationBarTitleDisplayMode(.inline)
        .onAppear {
            dates = timesWith30MinuteIncrements(for: currentDate)
        }
    }
    
    func timesWith30MinuteIncrements(for date: Date) -> [Date] {
        let calendar = Calendar.current
        let startDate = calendar.date(bySettingHour: 8, minute: 0, second: 0, of: date)!
        let endDate = calendar.date(bySettingHour: 18, minute: 0, second: 0, of: date)!
        
        var times: [Date] = []
        var currentDate = startDate
        while currentDate <= endDate {
            times.append(currentDate)
            guard let newDate = calendar.date(byAdding: .minute, value: 15, to: currentDate) else { break }
            currentDate = newDate
        }
        
        return times
    }
}

DayCellView代码

import SwiftUI

struct DayCellView: View {
    var appointment: Appointment
    
    var body: some View {
        NavigationLink(destination: AppointmentDetailView(appointment: appointment)
        ) {
            var dateString = appointment.date.formatted(date: .complete, time: .omitted)
            
            VStack(alignment: .leading) {
                
                HStack() {
                    Text("Resident Name:")
                    Text(appointment.firstName + " " + appointment.lastName)
                }
                .font(.headline)
                
                HStack {
                    Text("Appointment Date:")
                    Text(dateString)
                }
                
                HStack {
                    Text("Appointment Time:")
                    Text(appointment.time)
                }
                
                HStack {
                    Text("Description: ")
                    Text(appointment.description)
                }
                
                HStack {
                    Text("Is Appointment Confirmed? ")
                    
                    if appointment.hasRideScheduled {
                        Text("Confirmed")
                    } else {
                        Text("Not Confirmed Yet")
                    }
                }
            }
            .frame(maxWidth: .infinity)
            .background(
                RoundedRectangle(cornerRadius: 20)
                    .foregroundStyle(appointment.hasRideScheduled ? Color.green : Color.red)
                    .opacity(0.5)
                    
            )
        }
    }
}

CalendarView调用DayView的代码片段

LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: 7), spacing: 20) {
    ForEach($selectedDates) { $value in
        
        ZStack(alignment: .bottom) {
            if value.day != -1 {
                NavigationLink{
                    if let index = dateHasAppointment(date: value.date) {
                        DayView( appointments: value.appointments, currentDate: value.date)
                    } else {
                        DayView(currentDate: value.date)
                    }
                } label: {
                    Text("\(value.day)")
                        .background() {
                            ZStack(alignment: .bottom) {

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