肘子的Swift记事本
·
用自定义 Layout 化解 SwiftUI List 的行高与间距跳变
💡
原文中文，约6600字，阅读约需16分钟。
📝
内容提要
本文探讨了SwiftUI中List行高变化时动画不流畅的问题，分析原因并提出解决方案。通过引入状态机和自定义布局，作者实现了动态高度的平滑过渡，避免了内容闪烁和高度跳变。最终，结合AnimatedPresence和CollapsibleSpacingVStack，提升了动画效果的连贯性。
🎯
关键要点
-
SwiftUI中的List行高变化时，动画不流畅，常出现高度跳变和闪烁现象。
-
List的实现与宿主平台的滚动机制紧密相关，导致动态高度变化时无法提供连续的过渡动画。
-
核心问题是List不会自动为动态高度的行提供高度变化的动画插值，需要手动接管高度的插值过程。
-
引入状态机和自定义布局，使用displayValue解耦数据生命周期与视图生命周期，从而实现平滑的高度变化动画。
-
构建CollapsibleSpacingVStack，解决了List行高折叠时的spacing问题，使得高度和spacing的变化同步，提升了动画的连贯性。
-
通过结合AnimatedPresence和CollapsibleSpacingVStack，最终实现了动态高度的平滑过渡，避免了内容闪烁和高度跳变。
➡️
