SwiftUI List异常及可展开列表实现问题求助

1. .listRowSeparator(.hidden) 失效原因 #

你在条件分支的视图内部添加 .listRowSeparator(.hidden)，但SwiftUI的List在使用层级结构（通过children参数）时，行的容器由List内部管理，直接给分支内的子视图添加该修饰符无法正确作用于整个行容器，导致分隔线隐藏失效。

2. 展开/收起动画异常原因 #

核心问题是行ID重复：

• RowItem的id直接复用item.id，而SecondaryItem的id是自身的index，所有PrimaryRowItem的子项SecondaryItem的id都是1、2、3、4，导致整个List中存在大量重复的id。
• SwiftUI的List依赖唯一id追踪行的身份，当ID重复时，List的差异算法无法正确识别行的增删，从而出现混乱的动画效果。

1. 修复ID重复问题 #

修改RowItem，使用全局唯一的id（比如UUID），确保每个行在List中都有唯一标识：

struct RowItem: Identifiable {
    let id = UUID() // 全局唯一ID
    let item: Item
    let children: [RowItem]?
}

如果需要保留和业务数据的关联，也可以通过组合父级ID和子项ID生成唯一标识：

struct RowItem: Identifiable {
    let item: Item
    let children: [RowItem]?
    let parentId: Int?
    
    var id: String {
        if let parentId = parentId {
            return "\(parentId)_\(item.id)"
        } else {
            return "\(item.id)"
        }
    }
}

// 生成数据时传递parentId
var models: [RowItem] = PrimaryRowItem.mockedData.map {
    RowItem(item: $0, children: $0.secondaries.map{ 
        RowItem(item: $0, children: nil, parentId: $0.id) 
    }, parentId: nil)
}

2. 修复分隔线隐藏问题 #

将.listRowSeparator(.hidden)应用到整个行的根视图，或者直接给List全局设置：

方式一：全局设置List分隔线 #

List(models, children: \.children) { model in
    // 行内容
}
.listStyle(.plain)
.listRowSeparator(.hidden) // 全局隐藏所有分隔线

方式二：给每个行视图添加 #

List(models, children: \.children) { model in
    Group {
        if let primaryRow = model.item as? PrimaryRowItem {
            VStack {
                Text(primaryRow.firstProperty)
                    .font(.system(size: 17))
                Text(primaryRow.secondProperty)
                    .font(.system(size: 12))
            }
        } else if let secondaryRow = model.item as? SecondaryItem {
            Text(secondaryRow.firstProperty)
        }
    }
    .listRowSeparator(.hidden) // 统一给行根视图添加
}
.listStyle(.plain)

如果需要更灵活的样式和动画控制，可以使用DisclosureGroup手动实现层级展开，避免依赖List的children参数：

struct TestList: View {
    // 用@State管理每个父项的展开状态
    @State private var expandedIds: Set<Int> = []
    
    var body: some View {
        List(PrimaryRowItem.mockedData) { primary in
            DisclosureGroup(isExpanded: Binding(
                get: { expandedIds.contains(primary.id) },
                set: { isExpanded in
                    isExpanded ? expandedIds.insert(primary.id) : expandedIds.remove(primary.id)
                }
            )) {
                // 子项行
                ForEach(primary.secondaries) { secondary in
                    Text(secondary.firstProperty)
                        .listRowSeparator(.hidden)
                }
            } label: {
                // 父项行
                VStack {
                    Text(primary.firstProperty)
                        .font(.system(size: 17))
                    Text(primary.secondProperty)
                        .font(.system(size: 12))
                }
            }
            .listRowSeparator(.hidden)
        }
        .listStyle(.plain)
    }
}

这种方式可以完全自定义展开状态的管理，动画更稳定，同时样式控制更灵活。

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