SwiftUI：如何在不影响指定视图的情况下为视图局部添加动画

你当前的代码中，点击Toggle按钮展开Lorem/ipsum/dolor文本时，列表行的高度变化会导致行内Title位置受影响，同时可能带动上方列表元素布局变动。需求是让Title固定在原有位置，下方内容向下动画展开，且垂直方向上方的视图保持不动。

下面提供两种可行方案，无需依赖复杂的GeometryReader（方案2仅用它测量高度，属于常规用法）：

方案1：固定容器+动画化maxHeight #

这种方式利用容器的maxHeight属性动画，让展开内容在Title下方平滑滑入，代码简洁，适合内容高度固定的场景：

import SwiftUI

struct ContentView: View {
  @State var display = false

  var body: some View {
    List {
      Button("Toggle") {
        display.toggle()
      }
      Text("Text")
      row
      Text("Text")
    }
    .listStyle(.plain)
  }

  var row: some View {
    VStack(spacing: 0) {
      Text("Title").bold()
      // 包裹展开内容的容器，通过maxHeight控制显示/隐藏
      VStack {
        Text("Lorem")
        Text("ipsum")
        Text("dolor")
      }
      .frame(maxHeight: display ? .infinity : 0)
      .clipped()
      .animation(.linear(duration: 0.3), value: display)
    }
  }
}

方案2：offset+opacity动画 #

通过GeometryReader测量展开内容的高度，结合offset和opacity实现精准的向下滑入效果，适合内容高度动态变化的场景：

import SwiftUI

struct ContentView: View {
  @State var display = false
  @State private var contentHeight: CGFloat = 0

  var body: some View {
    List {
      Button("Toggle") {
        display.toggle()
      }
      Text("Text")
      row
      Text("Text")
    }
    .listStyle(.plain)
  }

  var row: some View {
    VStack(spacing: 0) {
      Text("Title").bold()
      VStack {
        Text("Lorem")
        Text("ipsum")
        Text("dolor")
      }
      // 测量内容高度
      .background(
        GeometryReader { proxy in
          Color.clear.onAppear {
            contentHeight = proxy.size.height
          }
        }
      )
      // 动画控制偏移和透明度
      .offset(y: display ? 0 : -contentHeight)
      .opacity(display ? 1 : 0)
      .animation(.linear(duration: 0.3), value: display)
    }
  }
}

方案说明 #

• 两种方案都能确保Title固定在初始位置，上方的列表元素（Button、Text）不会因为行展开而位移；
• 方案1无需额外测量高度，实现成本低；方案2动画更精准，适配动态内容高度。

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