SwiftUI中实现文本切换与按钮位置同步动画的问题

问题分析 #

点击Expand/Less按钮时，文本行数变化会导致按钮直接跳到最终位置，无平滑过渡效果。使用.transition(.scale)属于临时hack手段，并非针对布局位置变化的合理解决方案。

合理解决方案 #

SwiftUI中，布局元素的位置变化属于布局驱动的动画，只需明确将动画与状态变化绑定，就能让系统捕获布局调整并生成平滑过渡。以下是两种可靠实现方式：

方式一：为整个视图绑定状态动画 #

给外层容器添加.animation修饰符并绑定到isExpanded状态，所有因状态变化引发的布局调整（包括按钮位置）都会自动应用动画：

struct TextView: View {
    @State var isExpanded = false

    var body: some View {
        VStack(spacing: 10) {
            Text("This is the most recent test comment with a picture. Lörem ipsum berölogi kjolprotest. Trist gigade. Sms-livräddare grönt elcertifikat.")
                .lineLimit(isExpanded ? nil : 2)

            HStack {
                Button {
                    isExpanded.toggle()
                } label: {
                    Spacer()
                    Text(isExpanded ? "Less" : "Expand")
                }
            }
        }
        .padding(.all)
        .background(Color.yellow)
        .cornerRadius(13)
        .padding(.horizontal)
        .animation(.easeInOut(duration: 0.3), value: isExpanded) // 绑定状态动画
    }
}

方式二：用withAnimation包裹状态切换 #

保留withAnimation包裹状态修改逻辑，动画会自动作用于所有关联的视图变化，包括按钮位置的调整：

struct TextView: View {
    @State var isExpanded = false

    var body: some View {
        VStack(spacing: 10) {
            Text("This is the most recent test comment with a picture. Lörem ipsum berölogi kjolprotest. Trist gigade. Sms-livräddare grönt elcertifikat.")
                .lineLimit(isExpanded ? nil : 2)

            HStack {
                Button {
                    withAnimation(.easeInOut(duration: 0.3)) {
                        isExpanded.toggle()
                    }
                } label: {
                    Spacer()
                    Text(isExpanded ? "Less" : "Expand")
                }
            }
        }
        .padding(.all)
        .background(Color.yellow)
        .cornerRadius(13)
        .padding(.horizontal)
    }
}

效果说明 #

两种方式都会让按钮随着文本高度的变化平滑移动，替代生硬的跳转效果。相比.transition(.scale)的hack方案，这两种实现都是针对布局变化的原生动画逻辑，更符合SwiftUI的设计规范。

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