SwiftUI中List内及无List场景下DisclosureGroup动画卡顿的优化方案咨询

嘿，我完全懂你说的这个糟心问题！List里的DisclosureGroup默认动画确实太生硬了——折叠时行突然消失，圆角还提前冒出来，观感特别差。我之前做项目时也踩过这个坑，给你几个亲测有效的优化思路：

1. 自定义行样式，修复List内的圆角动画冲突 #

List默认的行样式和DisclosureGroup的动画会“打架”，导致圆角提前显示。我们可以手动接管行的背景和圆角，让动画同步：

首先定义一个状态变量控制展开状态：

@State private var isExpanded = false

然后修改你的List代码：

List {
    Section {
        DisclosureGroup(isExpanded: $isExpanded) {
            // 展开内容：手动控制内边距和背景，让圆角随展开状态变化
            VStack(alignment: .leading) {
                Text("Test text")
                Text("Test text")
                Text("Test text")
            }
            .padding()
            .background(Color(.systemBackground))
            .cornerRadius(isExpanded ? 0 : 16)
            .animation(.easeInOut(duration: 0.3), value: isExpanded)
        } label: {
            // 标题行：同样自定义背景和圆角，保持样式统一
            HStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("Hello, world!")
            }
            .padding()
        }
        // 禁用List默认的行内边距和背景，避免样式冲突
        .listRowInsets(EdgeInsets())
        .listRowBackground(Color.clear)
    }
}

这个方法既能保留List的原生功能（比如滑动删除、下拉刷新），又能让圆角动画和折叠动作完全同步。

2. 用ScrollView替代List，完全自定义动画 #

如果不需要List的原生特性，直接用ScrollView+VStack模拟List布局，就能彻底摆脱List的样式限制，自由控制动画效果：

@State private var isExpanded = false

ScrollView {
    VStack(spacing: 8) {
        DisclosureGroup(isExpanded: $isExpanded) {
            VStack(alignment: .leading) {
                Text("Test text")
                Text("Test text")
                Text("Test text")
            }
            .padding()
            .background(Color(.systemGray6))
            .cornerRadius(16)
            // 添加更自然的过渡动画
            .transition(.asymmetric(
                insertion: .slide.combined(with: .opacity),
                removal: .opacity.combined(with: .scale)
            ))
        } label: {
            HStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("Hello, world!")
            }
            .padding()
            .background(Color(.systemGray6))
            .cornerRadius(16)
        }
        .animation(.easeInOut(duration: 0.3), value: isExpanded)
    }
    .padding()
}

这种方式的动画自由度极高，你可以根据需求调整过渡效果、动画时长甚至曲线。

3. 轻量优化：给DisclosureGroup添加显式动画 #

如果不想大改布局，也可以给DisclosureGroup直接绑定显式动画，覆盖默认的生硬动画：

@State private var isExpanded = false

DisclosureGroup(isExpanded: $isExpanded, content: {
    VStack(alignment: .leading) {
        Text("Test text")
        Text("Test text")
        Text("Test text")
    }
    .transition(.slide) // 给内容添加过渡效果
}) {
    Image(systemName: "globe")
        .imageScale(.large)
        .foregroundStyle(.tint)
    Text("Hello, world!")
}
.animation(.easeInOut(duration: 0.3), value: isExpanded)

注意要把展开状态抽成@State变量，才能让动画正确触发。

内容来源于stack exchange