SwiftUI添加新视图后出现沙滩球卡顿问题排查求助

可能的原因及对应修复方案 #

1. ForEach数据源未提供稳定身份标识
   你当前使用0..<8这个Range作为ForEach的数据源，SwiftUI无法为每个子视图建立稳定的身份追踪，布局更新时可能会重建所有LightControlView，增加不必要的计算开销。
   修复：将Range转为带身份标识的数组：

   var manualOverrideView: some View {
     ScrollView(.horizontal) {
       HStack {
         ForEach(Array(0..<8), id: \.self) { _ in
           LightControlView()
         }
       }
     }
   }
   

2. 子视图缺少明确尺寸约束
   LightControlView没有固定宽度，导致水平ScrollView和HStack在布局时需要反复计算元素尺寸，触发多次重绘。
   修复：给LightControlView添加固定宽度约束：

   struct LightControlView: View {
     let buttonWidth: CGFloat = 50.0
   
     var body: some View {
       VStack {
         Text("deviceID")
         RoundedRectangle(cornerRadius: 10)
           .fill(.blue)
           .frame(width: 50, height: 20)
         HStack {
           Button { /* 空实现 */ } label: {
             Text("1st Button").frame(width: buttonWidth)
           }
           Button { /* 空实现 */ } label: {
             Text("2nd Button").frame(width: buttonWidth)
           }
         }
       }
       .frame(width: 120) // 固定整个视图宽度
     }
   }
   

3. 计算属性light的重复创建
   light作为计算属性，每次LightControlView的body刷新时都会重新创建这个RoundedRectangle视图，累积下来增加了视图创建开销。
   修复：将light改为静态属性或直接内联到body中：

   struct LightControlView: View {
     static let light: some View = {
       RoundedRectangle(cornerRadius: 10)
         .fill(.blue)
         .frame(width: 50, height: 20)
     }()
     let buttonWidth: CGFloat = 50.0
   
     var body: some View {
       VStack {
         Text("deviceID")
         Self.light
         HStack { /* 按钮代码 */ }
       }
       .frame(width: 120)
     }
   }
   

4. 布局优先级冲突
   主视图中的VSplitView与上方的manualOverrideView可能存在布局优先级竞争，导致系统反复调整布局。
   修复：给manualOverrideView设置更高的布局优先级：

   manualOverrideView
     .frame(height: 160)
     .layoutPriority(1)
   

原理说明 #

SwiftUI的布局系统依赖明确的尺寸约束和稳定的视图身份来优化渲染性能。当这些条件不满足时，即使是少量视图也会触发多次布局计算和视图重建，最终导致应用卡顿。

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