肘子的Swift记事本
·
用自定义 Layout 化解 SwiftUI List 的行高与间距跳变
内容提要
本文探讨了SwiftUI中List行高变化时动画不流畅的问题，分析原因并提出解决方案。通过引入状态机和自定义布局，作者实现了动态高度的平滑过渡，避免了内容闪烁和高度跳变。最终，结合AnimatedPresence和CollapsibleSpacingVStack，提升了动画效果的连贯性。
关键要点
-
SwiftUI中的List行高变化时，动画不流畅，常出现高度跳变和闪烁现象。
-
List的实现与宿主平台的滚动机制紧密相关，导致动态高度变化时无法提供连续的过渡动画。
-
核心问题是List不会自动为动态高度的行提供高度变化的动画插值，需要手动接管高度的插值过程。
-
引入状态机和自定义布局，使用displayValue解耦数据生命周期与视图生命周期，从而实现平滑的高度变化动画。
-
构建CollapsibleSpacingVStack，解决了List行高折叠时的spacing问题，使得高度和spacing的变化同步，提升了动画的连贯性。
-
通过结合AnimatedPresence和CollapsibleSpacingVStack，最终实现了动态高度的平滑过渡，避免了内容闪烁和高度跳变。
延伸解读
SwiftUI List 动画的局限性
在 SwiftUI 中，List 的行高变化常常导致动画不流畅，主要是因为 List 的实现与宿主平台的滚动机制紧密相关。这种设计使得动态高度变化时，无法提供连续的过渡动画，开发者需要手动接管高度的插值过程，以实现更平滑的动画效果。
自定义布局的优势
通过引入自定义布局和状态机，开发者可以有效解耦数据生命周期与视图生命周期，从而实现动态高度的平滑过渡。这种方法不仅提升了动画的连贯性，还避免了内容闪烁和高度跳变，展示了 SwiftUI 在处理复杂布局时的潜力。
折叠动画的挑战
在实现折叠动画时，常见的做法可能导致视觉不适，尤其是使用 .frame(height:) 的方式。为了解决这一问题，构建 CollapsibleSpacingVStack 可以确保在内容折叠时，间距的变化与高度变化同步，从而提升用户体验，避免突变现象。
