SwiftUI List行内VStack添加元素时动画卡顿问题求解

以下是几个实用方案，针对你遇到的List行内动态内容动画卡顿、标题跳动问题，同时保留List的滑动、行移动等特性：

方案1：固定行高范围，避免动态行高计算 #

List默认会根据内容自动计算行高，动画时行高的重新计算是导致跳动和卡顿的核心原因之一。给行内VStack设置明确的最小/最大高度，让List提前确定行的布局范围：

struct ListAnimation: View {
    
    @State var showSecondText = false
    
    var body: some View {
        List {
            VStack(alignment: .center) {
                Text("First Text Title")
                if showSecondText {
                    Text("Second Text Title")
                }
            }
            .frame(maxWidth: .infinity, minHeight: 80, maxHeight: .infinity) // 显式设置最小高度
            .listRowInsets(EdgeInsets()) // 移除默认行内边距，避免额外布局干扰
            Button {
                withAnimation {
                    showSecondText.toggle()
                }
            } label: {
                Text("Show Second Text")
            }
        }
    }
}

方案2：自定义内容动画，避免行结构突变 #

不要直接通过if语句添加/移除视图，而是通过透明度、偏移量等动画属性控制内容的显示状态，让行的整体布局结构保持稳定：

struct ListAnimation: View {
    
    @State var showSecondText = false
    
    var body: some View {
        List {
            VStack(alignment: .center) {
                Text("First Text Title")
                Text("Second Text Title")
                    .opacity(showSecondText ? 1 : 0)
                    .offset(y: showSecondText ? 0 : 20) // 从下方滑入，避免行高突变
                    .animation(.easeInOut(duration: 0.3), value: showSecondText)
            }
            .frame(maxWidth: .infinity)
            Button {
                showSecondText.toggle()
            } label: {
                Text("Show Second Text")
            }
        }
    }
}

这里不需要用withAnimation包裹，而是给动态视图单独设置动画，让行的结构始终保持不变，List无需重新计算行高。

方案3：用ZStack固定容器大小 #

将动态内容放在ZStack中，让容器的大小始终包含所有可能的内容，这样List的行高不会随内容变化而改变：

struct ListAnimation: View {
    
    @State var showSecondText = false
    
    var body: some View {
        List {
            ZStack(alignment: .center) {
                // 占位视图，固定容器高度
                VStack {
                    Text("First Text Title")
                    Text("Second Text Title")
                }
                .opacity(0)
                
                // 实际显示的内容
                VStack(alignment: .center) {
                    Text("First Text Title")
                    if showSecondText {
                        Text("Second Text Title")
                    }
                }
            }
            .frame(maxWidth: .infinity)
            Button {
                withAnimation {
                    showSecondText.toggle()
                }
            } label: {
                Text("Show Second Text")
            }
        }
    }
}

占位视图让ZStack保持固定大小，List的行高不会变化，动画只会作用于实际内容的显示/隐藏。

方案4：禁用List的自动行高调整 #

通过UITableView的外观设置（针对UIKit-backed的List）强制固定行高，适合需要统一行高的场景：

struct ListAnimation: View {
    
    @State var showSecondText = false
    
    init() {
        UITableView.appearance().rowHeight = UITableView.automaticDimension
        UITableView.appearance().estimatedRowHeight = 80 // 提前设置预估行高
    }
    
    var body: some View {
        List {
            VStack(alignment: .center) {
                Text("First Text Title")
                if showSecondText {
                    Text("Second Text Title")
                }
            }
            .frame(maxWidth: .infinity)
            Button {
                withAnimation {
                    showSecondText.toggle()
                }
            } label: {
                Text("Show Second Text")
            }
        }
    }
}

设置estimatedRowHeight可以让List提前分配行高，减少动画时的布局计算开销。

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