文章目录背景方法总览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:string100;TextInput({text:this.inputC,placeholder:摄氏度值}).width(100%).height(40).fontSize(13).type(InputType.Number).onChange(v{this.inputCv;})this.Btn(C2F(${this.inputC}) → 华氏度,#E74C3C,(){constcparseFloat(this.inputC);constfTempUtil.C2F(c);this.addLog(C2F(${c}°C) →${f.toFixed(4)}°F);})this.Btn(C2K(${this.inputC}) → 开尔文,#C0392B,(){constcparseFloat(this.inputC);constkTempUtil.C2K(c);this.addLog(C2K(${c}°C) →${k.toFixed(4)}K);})用户在输入框里填摄氏度点按钮看转换结果。注意用了type(InputType.Number)限制输入为数字避免非数字输入导致parseFloat返回 NaN。实战二华氏度转换// 华氏度转摄氏度StateinputF:string212;TextInput({text:this.inputF,placeholder:华氏度值}).width(100%).height(40).fontSize(13).type(InputType.Number).onChange(v{this.inputFv;})this.Btn(F2C(${this.inputF}) → 摄氏度,#F39C12,(){constfparseFloat(this.inputF);constcTempUtil.F2C(f);this.addLog(F2C(${f}°F) →${c.toFixed(4)}°C);})this.Btn(F2K(${this.inputF}) → 开尔文,#E67E22,(){constfparseFloat(this.inputF);constkTempUtil.F2K(f);this.addLog(F2K(${f}°F) →${k.toFixed(4)}K);})实战三开尔文转换StateinputK:string373.15;TextInput({text:this.inputK,placeholder:开尔文值}).width(100%).height(40).fontSize(13).type(InputType.Number).onChange(v{this.inputKv;})this.Btn(K2C(${this.inputK}) → 摄氏度,#3498DB,(){constkparseFloat(this.inputK);constcTempUtil.K2C(k);this.addLog(K2C(${k}K) →${c.toFixed(4)}°C);})this.Btn(K2F(${this.inputK}) → 华氏度,#2980B9,(){constkparseFloat(this.inputK);constfTempUtil.K2F(k);this.addLog(K2F(${k}K) →${f.toFixed(4)}°F);})实战四滑块实时联动最直观的交互这是 Demo 里最精彩的部分——用滑块拖动摄氏度实时同步显示华氏度和开尔文StatesliderC:number0;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.sliderCMath.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时更新sliderCText里直接调用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 代码量非常少。