SwiftUI滚动千行文本视图时性能劣化问题排查

核心卡顿原因 #

你当前用单个Text视图渲染数千行文本，SwiftUI会将整个文本视为一个巨型视图元素。滚动时，系统需要反复计算整个文本的布局、渲染全部内容，导致CPU占用飙升、滚动卡顿。

修复方案 #

核心思路是懒加载+分块渲染，只渲染当前可见区域的文本行，而非一次性处理全部内容。

1. 修改数据模型，拆分文本为行

将LoggingModel中存储的完整字符串改为按行拆分的数组，避免后续重复拆分：

class LoggingModel: ObservableObject {
    @Published var lines: [String] = [] // 替换原有的data属性
    
    func addFilePath() {
        let dialog = NSOpenPanel()
        dialog.title = "Choose a .txt file"
        dialog.allowedContentTypes = [.text]
        
        guard dialog.runModal() == .OK, let result = dialog.url else {
            return
        }
        
        load(file: result.path)
    }
    
    func load(file: String) {
        do {
            let contents = try String(contentsOfFile: file)
            // 按换行符拆分文本，同时过滤空行（可选）
            let splitLines = contents.components(separatedBy: .newlines).filter { !$0.isEmpty }
            DispatchQueue.main.async {
                self.lines = splitLines
            }
        } catch let error as NSError {
            print(error.localizedDescription)
        }
    }
}

2. 使用懒加载容器渲染文本

将ScrollView中的单个Text替换为LazyVStack（或List），只渲染当前可见的行：

struct LoggingView: View {
    @StateObject private var model = LoggingModel()
    
    var body: some View {
        ScrollView {
            if model.lines.isEmpty {
                Text("Add a file to begin.")
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
            } else {
                LazyVStack(spacing: 0) {
                    ForEach(model.lines, id: \.self) { line in
                        Text(line)
                            .frame(maxWidth: .infinity, alignment: .leading)
                    }
                }
                .padding()
            }
        }
        .toolbar {
            ToolbarItem(placement: .principal) {
                Button(action: model.addFilePath) {
                    Text("New File")
                    Label("Import", systemImage: "square.and.arrow.down")
                }
            }
        }
    }
}

可选优化

• 如果文本中有大量重复样式，可统一设置字体、颜色等属性，减少SwiftUI的样式计算开销：

  LazyVStack(spacing: 0) {
      ForEach(model.lines, id: \.self) { line in
          Text(line)
              .frame(maxWidth: .infinity, alignment: .leading)
              .font(.system(.body, design: .monospaced)) // 固定字体
      }
  }
  

• 使用List替代LazyVStack，List本身内置了懒加载和滚动优化，适合大量列表项：

  List(model.lines, id: \.self) { line in
      Text(line)
  }
  

额外注意点 #

原ContentView中直接将LoggingView作为存储属性是可行的，但如果后续需要复用视图，建议直接在body中创建：

struct ContentView: View {
    var body: some View {
        LoggingView()
    }
}

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