SwiftUI中Lottie动画无法左对齐的解决方法咨询

问题核心是LottieView默认会将动画在自身布局范围内居中显示，即便外层VStack设置了.leading对齐，也仅能让LottieView容器本身靠左，内部动画仍保持居中状态。以下是几种可行的解决方法：

方法一：通过Frame指定对齐方向 #

给LottieView设置占满父容器宽度，并明确对齐方向为左：

VStack(alignment: .leading, spacing: .zero) {
    LottieView(animation: .named("loading-animation"))
        .playing(loopMode: .loop)
        .frame(maxWidth: .infinity, height: 40, alignment: .leading)
}

这种方式让LottieView铺满父容器宽度，同时强制内部动画靠左对齐。

方法二：设置Lottie内容模式 #

直接通过LottieView的contentMode修饰符指定内容靠左：

VStack(alignment: .leading, spacing: .zero) {
    LottieView(animation: .named("loading-animation"))
        .playing(loopMode: .loop)
        .contentMode(.left)
        .frame(height: 40)
}

该方式无需改变视图宽度，直接让Lottie动画内容紧贴左边缘显示，适合动画本身宽度小于父容器的场景。

方法三：固定LottieView宽度自适应 #

让LottieView仅占用动画实际需要的宽度，再结合外层对齐：

VStack(alignment: .leading, spacing: .zero) {
    LottieView(animation: .named("loading-animation"))
        .playing(loopMode: .loop)
        .frame(height: 40)
        .fixedSize(horizontal: true, vertical: false)
}

fixedSize会限制LottieView的宽度为动画实际宽度，此时外层VStack的.leading对齐就能让整个动画容器靠左。

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