问题背景

在一个 ScrollView 组件中，当滑动页面时，能感受到轻微但明显的掉帧。

系统信息

• iPhone 15 Pro
• iOS 18.3

代码结构如下：

• 在父组件中，使用 ScrollView 创建可滚动页面。
• 在父组件中，使用 .clipShape() 进行裁切。
• 在子组件中，使用 .background(Material.thin) 添加背景。

原因分析

通过控制变量实验，结果如下：

• 删除子组件中 .background() 修饰器，或者将 Material 修改为使用 Color，保留付组件中的 .clipShape() 组件，卡顿消失。
• 保留子组件中的 .background(Material.thin)，删除父组件中的 .clipShape()，卡顿消失。
• 只有同时使用上述修饰器，才会导致卡顿。

即使 .clipShape() 并未作用于子组件的 .background(Material)，也会导致卡顿。

因此，结论是由于 clipShape 和 Material 结合使用导致的问题，具体原因我还没搞明白。

小心使用 Material 组件

目前确认 Material 和 ClipShape 使用会导致掉帧，但不确定 Material 和其他组件使用是否也会有这个问题。

在测底弄明白原因之前，建议小心使用 Material，尽量使用简单的 Color。