SwiftUI tvOS按钮X轴偏移动画出现Y轴移动，如何解决？

问题原因 #

tvOS 14.7版本的SwiftUI中，Button控件自带默认的布局适配逻辑和隐式动画效果，你当前使用的未限定范围的隐式动画会触发所有可动画属性的变更，包括文本垂直方向的布局重算偏移，最终出现非预期的Y轴移动。

修复方案 #

按如下步骤调整代码即可解决问题：

• 给animation修饰符指定value参数，限定动画仅在scrollText属性变更时触发，避免其他无关属性变更触发意外动画
• 给Text添加fixedSize()修饰符，固定文本自身尺寸，避免动画过程中文本重排导致的垂直偏移
• 可选：给Button添加transaction修改，禁用Button自带的默认动画干扰

修复后代码示例：

struct Animate: View {
    @State var scrollText: Bool = false
    
    var body: some View {
        Button(action: {}, label: {
            Text("This is My Text !")
                .fixedSize()
                .offset(x: scrollText ? 0 : 200, y: 0)
                .animation(.linear(duration: 1).repeatForever(autoreverses: true), value: scrollText)
                .onAppear {
                    scrollText.toggle()
                }
        })
        .transaction { $0.animation = nil }
    }
}

如果上述方案仍有异常，你还可以选择将文本视图移到Button之外通过ZStack叠加，或是使用UIViewRepresentable封装UILabel实现跑马灯效果，绕开SwiftUI早期版本的动画兼容bug。

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