HarmonyOS TempUtil 气象应用实战：多温度单位显示与用户偏好设置开发指南

背景

近期发现一款很有意思的HarmonyOS 三方库, 地址 @pura/harmony-utils(V1.4.0) , 作者是"桃花镇童长老", 我这里也是直接通过该作者公布的源码进行案例编写进行,写了到目前写了一部分demo ,感觉确实很有帮助,这里呢也是开始写一个系列的演示demo 供大家参考。如有帮助可以在OpenHarmony中进行下载安装进行使用哦

案例demo导航展示

↓↓↓↓↓↓接下来言归正传 ↓↓↓↓

方法总览

TempUtil 六种转换方法速览

先整体看一下 TempUtil 提供的全部转换能力：

// 从摄氏度出发TempUtil.C2F(c)// 摄氏度 → 华氏度TempUtil.C2K(c)// 摄氏度 → 开尔文// 从华氏度出发TempUtil.F2C(f)// 华氏度 → 摄氏度TempUtil.F2K(f)// 华氏度 → 开尔文// 从开尔文出发TempUtil.K2C(k)// 开尔文 → 摄氏度TempUtil.K2F(k)// 开尔文 → 华氏度

六种转换，全覆盖三个单位之间的互转关系。

实战一：输入框 + 转换按钮

Demo 里展示了最基础的输入框+按钮模式：

// 摄氏度转华氏度@StateinputC:string='100';TextInput({text:this.inputC,placeholder:'摄氏度值'}).width('100%').height(40).fontSize(13).type(InputType.Number).onChange(v=>{this.inputC=v;})this.Btn(`C2F(${this.inputC}) → 华氏度`,'#E74C3C',()=>{constc=parseFloat(this.inputC);constf=TempUtil.C2F(c);this.addLog(`C2F(${c}°C) →${f.toFixed(4)}°F`);})this.Btn(`C2K(${this.inputC}) → 开尔文`,'#C0392B',()=>{constc=parseFloat(this.inputC);constk=TempUtil.C2K(c);this.addLog(`C2K(${c}°C) →${k.toFixed(4)}K`);})

用户在输入框里填摄氏度，点按钮看转换结果。

注意用了type(InputType.Number)限制输入为数字，避免非数字输入导致parseFloat返回 NaN。

实战二：华氏度转换

// 华氏度转摄氏度@StateinputF:string='212';TextInput({text:this.inputF,placeholder:'华氏度值'}).width('100%').height(40).fontSize(13).type(InputType.Number).onChange(v=>{this.inputF=v;})this.Btn(`F2C(${this.inputF}) → 摄氏度`,'#F39C12',()=>{constf=parseFloat(this.inputF);constc=TempUtil.F2C(f);this.addLog(`F2C(${f}°F) →${c.toFixed(4)}°C`);})this.Btn(`F2K(${this.inputF}) → 开尔文`,'#E67E22',()=>{constf=parseFloat(this.inputF);constk=TempUtil.F2K(f);this.addLog(`F2K(${f}°F) →${k.toFixed(4)}K`);})

实战三：开尔文转换

@StateinputK:string='373.15';TextInput({text:this.inputK,placeholder:'开尔文值'}).width('100%').height(40).fontSize(13).type(InputType.Number).onChange(v=>{this.inputK=v;})this.Btn(`K2C(${this.inputK}) → 摄氏度`,'#3498DB',()=>{constk=parseFloat(this.inputK);constc=TempUtil.K2C(k);this.addLog(`K2C(${k}K) →${c.toFixed(4)}°C`);})this.Btn(`K2F(${this.inputK}) → 华氏度`,'#2980B9',()=>{constk=parseFloat(this.inputK);constf=TempUtil.K2F(k);this.addLog(`K2F(${k}K) →${f.toFixed(4)}°F`);})

实战四：滑块实时联动（最直观的交互）

这是 Demo 里最精彩的部分——用滑块拖动摄氏度，实时同步显示华氏度和开尔文：

@StatesliderC:number=0;Column({space:6}){Text(`当前:${this.sliderC}°C =${TempUtil.C2F(this.sliderC).toFixed(2)}°F =${TempUtil.C2K(this.sliderC).toFixed(2)}K`).fontSize(14).fontColor('#1a1a1a').width('100%').textAlign(TextAlign.Center)Slider({value:this.sliderC,min:-100,max:200,step:1}).width('100%').showTips(true).onChange(v=>{this.sliderC=Math.round(v);})Row({space:12}){Column(){Text(`${TempUtil.C2F(this.sliderC).toFixed(1)}°F`).fontSize(18).fontColor('#F39C12').fontWeight(FontWeight.Bold)Text('华氏度').fontSize(11).fontColor('#888')}.layoutWeight(1).alignItems(HorizontalAlign.Center)Column(){Text(`${TempUtil.C2K(this.sliderC).toFixed(2)}K`).fontSize(18).fontColor('#3498DB').fontWeight(FontWeight.Bold)Text('开尔文').fontSize(11).fontColor('#888')}.layoutWeight(1).alignItems(HorizontalAlign.Center)}}.padding(14).backgroundColor('#FFFFFF').borderRadius(10).width('100%')

核心是：

• @State sliderC是响应式状态
• 滑块onChange时更新sliderC
• Text里直接调用TempUtil.C2F(this.sliderC)和TempUtil.C2K(this.sliderC)，状态变化时自动重新计算和渲染

这就是 ArkTS 响应式编程的精髓：数据驱动 UI，不需要手动更新文本。

批量转换：一键输出常见温度对照

// 摄氏度批量转换this.Btn('C2F 批量: -40/0/20/37/100°C','#E74C3C',()=>{[-40,0,20,37,100].forEach(c=>{this.addLog(`C2F(${c}°C) =${TempUtil.C2F(c).toFixed(2)}°F`);});})this.Btn('C2K 批量: -273.15/0/20/100°C','#C0392B',()=>{[-273.15,0,20,100].forEach(c=>{this.addLog(`C2K(${c}°C) =${TempUtil.C2K(c).toFixed(2)}K`);});})

批量转换的输出：

C2F(-40°C) = -40.00°F C2F(0°C) = 32.00°F C2F(20°C) = 68.00°F C2F(37°C) = 98.60°F C2F(100°C) = 212.00°F

设计建议：统一用摄氏度存储

对于多单位展示的应用，推荐：

• 存储：统一用摄氏度（°C）存储，作为"主单位"
• 展示：根据用户偏好设置转换后显示
• 转换：使用 TempUtil 在显示时做实时转换

这样无论用户选择哪种单位显示，数据只存一份，逻辑清晰。

写在最后

TempUtil 的六个方法非常轻量，但用好了能让温度相关功能的代码非常干净。

特别是配合 ArkTS 的响应式状态变量，做实时联动转换的 UI 代码量非常少。