SwiftUI中Text的Matched Geometry Transition为何存在不对称行为？

问题描述 #

在以下代码中，使用matchedGeometryEffect切换Text字体大小时，会出现轻微的左右、上下晃动，动画并非沿直线平滑过渡：

import SwiftUI

struct MatchedGeometryExample: View {
    @Namespace private var animationNamespace
    @State private var isExpanded = false

    var body: some View {
        VStack {
            Spacer()

            HStack{
                Text("Example Text")
                    .font(isExpanded ? .largeTitle : .body)
                    .matchedGeometryEffect(id: "exampleText", in: animationNamespace)
                    .padding()
                    .background(.pink)
            }

            Spacer()

            Button("Toggle") {
                withAnimation(.easeInOut(duration: 0.5)) {
                    isExpanded.toggle()
                }
            }
        }
    }
}

struct MatchedGeometryExample_Previews: PreviewProvider {
    static var previews: some View {
        MatchedGeometryExample()
    }
}

原因分析 #

1. HStack自适应布局的干扰：HStack默认是包裹内容的宽度，当Text字体变大时，HStack的宽度会随之增加。由于HStack在VStack中是水平居中的，HStack自身的屏幕位置会发生偏移（从较窄时的居中位置，变为较宽时的居中位置，左右间距缩小），导致Text的绝对位置出现额外移动，和matchedGeometryEffect的动画叠加后产生晃动。
2. 修饰符顺序错误：matchedGeometryEffect的应用位置在padding之前，它计算的是仅带font样式的Text尺寸和位置，而padding和background是后续添加的，这会导致实际渲染的视图框架和matchedGeometryEffect跟踪的框架不一致，动画时出现偏移。

解决方法 #

方案1：固定HStack宽度，消除布局偏移

给HStack添加frame(maxWidth: .infinity)，让它始终占满屏幕宽度，Text在HStack中的leading位置保持固定，避免HStack整体偏移：

import SwiftUI

struct MatchedGeometryExample: View {
    @Namespace private var animationNamespace
    @State private var isExpanded = false

    var body: some View {
        VStack {
            Spacer()

            HStack{
                Text("Example Text")
                    .font(isExpanded ? .largeTitle : .body)
                    .padding()
                    .background(.pink)
                    .matchedGeometryEffect(id: "exampleText", in: animationNamespace)
            }
            .frame(maxWidth: .infinity) // 固定HStack宽度

            Spacer()

            Button("Toggle") {
                withAnimation(.easeInOut(duration: 0.5)) {
                    isExpanded.toggle()
                }
            }
        }
    }
}

方案2：调整修饰符顺序，让matchedGeometryEffect跟踪最终视图

将matchedGeometryEffect移到padding和background之后，确保它跟踪的是包含所有布局修饰符的完整视图框架，同时让Text固定在屏幕左侧：

import SwiftUI

struct MatchedGeometryExample: View {
    @Namespace private var animationNamespace
    @State private var isExpanded = false

    var body: some View {
        VStack {
            Spacer()

            HStack(alignment: .center, spacing: 0) {
                Text("Example Text")
                    .font(isExpanded ? .largeTitle : .body)
                    .padding()
                    .background(.pink)
                    .matchedGeometryEffect(id: "exampleText", in: animationNamespace)
            }
            .frame(maxWidth: .infinity, alignment: .leading) // 固定Text在左侧

            Spacer()

            Button("Toggle") {
                withAnimation(.easeInOut(duration: 0.5)) {
                    isExpanded.toggle()
                }
            }
        }
    }
}

关键总结 #

• matchedGeometryEffect需要作用在视图的最终渲染状态上，所以要放在所有影响尺寸、位置的修饰符（如padding、background、frame）之后。
• 确保动画前后的父视图布局稳定，避免父视图的尺寸变化导致子视图的绝对位置偏移。

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