SwiftUI实现无按钮触发的实时计算结果展示需求

核心修改思路 #

利用SwiftUI的状态监听机制，让wakeUpTime、sleepAmount、coffeeAmount任一变量变更时自动触发计算，同时确保初始默认状态下也能展示结果，彻底移除手动触发按钮。

具体实现步骤 #

1. 确保状态变量可被监听
   保证三个核心变量使用@State（本地组件）或@Binding（父组件传递）修饰，SwiftUI会自动追踪这些变量的变化：

   @State private var wakeUpTime = Date()
   @State private var sleepAmount = 8.0
   @State private var coffeeAmount = 1
   

2. 选择实时计算的实现方式
   根据计算复杂度选下面两种方案之一：

   方案一：计算属性（轻量计算首选）

   直接用计算属性返回实时结果，默认值会自动计算并展示：

   // 实时计算理想就寝时间
   private var idealBedtime: Date {
       // 正式环境：启用Create ML模型计算
       let model = SleepCalculator()
       do {
           let prediction = try model.prediction(wake: wakeUpTime, estimatedSleep: sleepAmount, coffee: coffeeAmount)
           return wakeUpTime - prediction.actualSleep
       } catch {
           // 计算出错时返回默认值（按6小时睡眠计算）
           return wakeUpTime - 6 * 3600
       }
   
       // 测试模式：注释上面代码，启用下面模拟计算
       // return wakeUpTime - sleepAmount * 3600
   }
   

   方案二：onChange监听（重计算场景）

   适合计算逻辑较重的情况，通过监听变量变化触发计算，同时在视图初始化时执行一次默认计算：

   @State private var idealBedtime = Date()
   
   var body: some View {
       VStack {
           // 原有输入控件区域（保持布局不变）
           DatePicker("起床时间", selection: $wakeUpTime, displayedComponents: .hourAndMinute)
           Slider(value: $sleepAmount, in: 4...12, step: 0.5) {
               Text("预计睡眠时长: \(sleepAmount, specifier: "%.1f")小时")
           }
           Stepper("咖啡杯数: \(coffeeAmount)", value: $coffeeAmount, in: 0...10)
   
           // 固定展示结果的区域
           Text("理想就寝时间: \(idealBedtime.formatted(date: .omitted, time: .shortened))")
               .font(.title)
               .padding()
       }
       // 监听三个变量的变化，触发计算
       .onChange(of: [wakeUpTime, sleepAmount, coffeeAmount]) { _ in
           calculateBedtime()
       }
       // 视图初始化时计算默认值
       .onAppear {
           calculateBedtime()
       }
   }
   
   private func calculateBedtime() {
       // Create ML模型计算逻辑
       let model = SleepCalculator()
       do {
           let prediction = try model.prediction(wake: wakeUpTime, estimatedSleep: sleepAmount, coffee: coffeeAmount)
           idealBedtime = wakeUpTime - prediction.actualSleep
       } catch {
           idealBedtime = wakeUpTime - 6 * 3600
       }
   
       // 测试模式：替换上面代码
       // idealBedtime = wakeUpTime - sleepAmount * 3600
   }
   

3. 移除触发按钮
   直接删除原代码中用于触发计算的Button组件，结果区域会自动展示实时计算值。

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