SwiftUI可复用NavigationStack视图：动态单元格与全屏展示问题

核心问题修复与优化方案 #

针对你提出的三个核心需求，以下是具体的代码修改和实现思路：

1. 实现 NavigationStack 背景透明

默认 NavigationStack 自带导航栏和背景色，通过以下步骤清除背景并保留圆角效果：

• 隐藏默认导航栏，消除自带背景
• 给 NavigationStack 和内部滚动容器设置透明背景
• 调整 padding 层级，避免影响背景渲染

2. 可见单元格动态尺寸 + 懒加载

用 ScrollView + LazyVStack 替代原 VStack，既实现懒加载（仅渲染可见单元格），又让单元格高度由内容自动撑开：

• LazyVStack 只加载当前屏幕可见的单元格，提升性能
• 移除固定高度设置，让 HolidayCell 自适应内容高度

3. 点击单元格全屏展示详情

在详情页中强制撑满屏幕并隐藏导航栏，实现纯全屏效果：

• 给详情页设置 maxWidth/maxHeight: .infinity
• 隐藏详情页导航栏，消除顶部留白

修改后的完整代码 #

可复用列表视图

import SwiftUI

struct TodaysHolidaysView: View {
    let holidays: [HolidaysModel]
    
    // 初始化方法，支持外部传入数据源，提升复用性
    init(holidays: [HolidaysModel] = HolidayList.mockData) {
        self.holidays = holidays
    }
    
    var body: some View {
        NavigationStack {
            ScrollView {
                LazyVStack(spacing: 7.5) {
                    ForEach(holidays, id: \.id) { holiday in
                        NavigationLink {
                            HolidayDetailView(holiday: holiday)
                        } label: {
                            HolidayCell(holiday: holiday)
                                .frame(maxWidth: .infinity)
                        }
                    }
                }
                .padding(.all, 10)
            }
            .background(.clear)
            .toolbar(.hidden) // 隐藏导航栏，清除默认背景
        }
        .background(.clear)
        .cornerRadius(15)
        .padding(.all, 10)
    }
}

struct TodaysHolidaysView_Previews: PreviewProvider {
    static var previews: some View {
        TodaysHolidaysView()
    }
}

自适应高度单元格示例

struct HolidayCell: View {
    let holiday: HolidaysModel
    
    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            Text(holiday.name)
                .font(.headline)
            Text(holiday.date)
                .font(.caption)
                .foregroundColor(.secondary)
            // 可添加更多内容，高度自动适配
        }
        .padding(.vertical, 8)
        .padding(.horizontal, 12)
        .background(Color.gray.opacity(0.1))
        .cornerRadius(8)
    }
}

全屏详情页示例

struct HolidayDetailView: View {
    let holiday: HolidaysModel
    
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            Text(holiday.name)
                .font(.largeTitle)
            Text(holiday.description)
                .font(.body)
            // 其他详情内容
        }
        .padding(.all, 20)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.white) // 自定义详情页背景色
        .toolbar(.hidden) // 隐藏导航栏，实现纯全屏
    }
}

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