SwiftUI如何实现ScrollView List内图标可变、文本可显隐的动态行

核心思路是把行的动态逻辑从视图层下沉到数据层，用通用行视图+懒加载容器替代逐行手写布局的实现，从根源解决多行动态场景下的代码冗余问题，同时保证滚动性能。

1. 抽象统一的行数据协议 #

不要在视图层堆叠if/else判断每一行的显示状态，先把所有行的动态配置抽象成统一协议，不管是带图片、文本还是图标的行，都遵循该协议规范：

protocol ListRowModel: Identifiable {
    var id: String { get }
    // 动态行高配置，传nil则用自适应高度
    var rowHeight: CGFloat? { get set }
    // 文本显示控制
    var isTextVisible: Bool { get set }
    // 动态资源配置
    var leadingIcon: Image? { get set }
    var coverImage: Image? { get set }
    var title: String { get set }
    var subtitle: String? { get set }
}

2. 实现一次通用行视图 #

只需要写一次行布局，所有显示逻辑完全依赖传入的模型动态渲染，不需要为每一行重复写HStack/VStack组合：

struct CommonListRow: View {
    let model: any ListRowModel
    
    var body: some View {
        HStack(spacing: 12) {
            // 头部资源动态渲染
            if let cover = model.coverImage {
                cover
                    .resizable()
                    .scaledToFill()
                    .frame(width: 44, height: 44)
                    .cornerRadius(8)
            } else if let icon = model.leadingIcon {
                icon
                    .frame(width: 22, height: 22)
                    .foregroundColor(.accentColor)
            }
            
            // 文本区域动态显示
            if model.isTextVisible {
                VStack(alignment: .leading, spacing: 4) {
                    Text(model.title)
                        .font(.system(size: 16, weight: .medium))
                    if let sub = model.subtitle {
                        Text(sub)
                            .font(.system(size: 13))
                            .foregroundColor(.secondary)
                    }
                }
            }
            
            Spacer()
        }
        .frame(height: model.rowHeight)
        .padding(.vertical, 8)
    }
}

3. 用懒加载容器承载列表 #

不要在ScrollView里直接嵌套VStack写死所有行，改用LazyVStack实现行视图的按需创建，配合ForEach遍历模型数组即可，哪怕上百行也不会提前创建所有视图实例造成性能浪费：

struct DynamicListContainer: View {
    @State private var listData: [any ListRowModel] = [] // 业务侧的数据源，支持动态修改
    
    var body: some View {
        ScrollView {
            LazyVStack(alignment: .leading, spacing: 0) {
                ForEach(listData) { item in
                    CommonListRow(model: item)
                        .padding(.horizontal, 16)
                    Divider()
                }
            }
        }
    }
}

动态能力调用方式 #

所有行的调整都直接操作数据源即可，不需要修改视图层代码：

• 调整行尺寸：修改对应条目的rowHeight属性，列表会自动刷新对应行的高度
• 控制文本显隐：切换对应条目的isTextVisible布尔值，行内容会自动重绘
• 切换行图标/图片：替换对应条目的leadingIcon或coverImage属性
• 增删行：直接对listData数组做增删操作，LazyVStack会自动处理视图的插入、删除动画

该方案和逐行手写布局相比，行布局代码只需要维护一份，代码冗余度能降低90%左右；因为LazyVStack的懒加载机制，50+行场景下的滚动流畅度和系统原生List基本一致。如果后续需要扩展带开关、带操作按钮的行类型，只需要扩展ListRowModel的属性，在CommonListRow里增加对应渲染分支即可，不需要改动现有列表逻辑。

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