SwiftUI视图内可选值解包：消除厄运金字塔的最优方案

1. 核心思路：拆分状态+视图分解 #

将复合状态拆分为独立变量，把不同功能模块的视图拆成单独的辅助函数，彻底摆脱多层if/let的嵌套结构；同时通过绑定状态依赖确保异步任务正确触发，实现已加载内容先展示、未加载部分显示加载状态的效果。

2. 具体实现步骤 #

状态变量拆分 #

把原来的复合状态拆成独立的@State变量，每个变量对应一项功能的结果：

• singleRandomNumber: Int?：存储单个随机数
• largeRandomNumbers: [Int]?：存储1000万随机数数组
• averageValue: Double?：存储平均值

视图分解为独立辅助函数 #

用@ViewBuilder定义单独的视图函数，每个函数只负责对应模块的状态判断与展示：

• 单个随机数的展示/加载视图
• 大量随机数的生成状态视图
• 平均值的计算结果/加载视图

确保异步任务触发 #

使用task(id:)修饰符绑定状态依赖，当largeRandomNumbers生成完成后自动触发平均值计算任务，避免拆分视图后任务不执行的问题。

完整示例代码 #

import SwiftUI

struct RandomNumberView: View {
    // 拆分独立状态
    @State private var singleRandomNumber: Int?
    @State private var largeRandomNumbers: [Int]?
    @State private var averageValue: Double?
    
    // 普通函数：生成单个-10~10的随机整数
    private func generateSingleRandom() -> Int {
        Int.random(in: -10...10)
    }
    
    // 异步生成1000万个随机数
    private func generateLargeRandomNumbers() async -> [Int] {
        (0..<10_000_000).map { _ in Int.random(in: -10...10) }
    }
    
    // 异步计算平均值
    private func calculateAverage(_ numbers: [Int]) async -> Double {
        guard !numbers.isEmpty else { return 0 }
        let sum = numbers.reduce(0, +)
        return Double(sum) / Double(numbers.count)
    }
    
    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                singleRandomNumberView()
                largeRandomNumbersView()
                averageValueView()
            }
            .padding()
        }
        .onAppear {
            singleRandomNumber = generateSingleRandom()
        }
        // 触发大量随机数生成任务
        .task {
            largeRandomNumbers = await generateLargeRandomNumbers()
        }
        // 绑定状态依赖，触发平均值计算
        .task(id: largeRandomNumbers) {
            guard let numbers = largeRandomNumbers else { return }
            averageValue = await calculateAverage(numbers)
        }
    }
    
    // 单个随机数辅助视图
    @ViewBuilder
    private func singleRandomNumberView() -> some View {
        VStack(alignment: .leading) {
            Text("单个随机数")
                .font(.headline)
            if let number = singleRandomNumber {
                Text("\(number)")
                    .font(.title)
            } else {
                LoadingView()
            }
        }
        .padding()
        .background(Color.gray.opacity(0.1))
        .cornerRadius(8)
    }
    
    // 大量随机数状态视图
    @ViewBuilder
    private func largeRandomNumbersView() -> some View {
        VStack(alignment: .leading) {
            Text("1000万随机数生成状态")
                .font(.headline)
            if let numbers = largeRandomNumbers {
                Text("已完成，共\(numbers.count)个随机数")
                    .font(.subheadline)
            } else {
                LoadingView()
            }
        }
        .padding()
        .background(Color.gray.opacity(0.1))
        .cornerRadius(8)
    }
    
    // 平均值结果视图
    @ViewBuilder
    private func averageValueView() -> some View {
        VStack(alignment: .leading) {
            Text("平均值计算结果")
                .font(.headline)
            if let avg = averageValue {
                Text(String(format: "%.2f", avg))
                    .font(.title)
            } else {
                LoadingView()
            }
        }
        .padding()
        .background(Color.gray.opacity(0.1))
        .cornerRadius(8)
    }
}

// 通用加载视图
struct LoadingView: View {
    var body: some View {
        HStack {
            ProgressView()
            Text("加载中...")
                .font(.subheadline)
        }
    }
}

#Preview {
    RandomNumberView()
}

关键细节说明 #

• 消除嵌套：每个视图只处理自身对应的状态，彻底避免三层if/let的厄运金字塔结构。
• 渐进式展示：每个模块独立判断加载状态，已完成的内容立即显示，未完成的部分展示LoadingView。
• 任务触发保障：通过task(id:)绑定largeRandomNumbers状态，确保随机数生成完成后自动启动平均值计算，解决拆分视图后任务不触发的问题。

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