HarmonyOS ArkTS 实战：实现一个进制转换器

HarmonyOS ArkTS 实战实现一个进制转换器项目效果本文实现的是一个基于 HarmonyOS 和 ArkTS 的进制转换器。项目中使用 ArkUI 组件完成页面布局通过State管理状态数据实现二进制、八进制、十进制、十六进制之间的实时互相转换输入任意进制其他进制自动更新支持复制功能。最终运行效果如下页面主要包含以下内容顶部应用标题四个输入区域二进制、八进制、十进制、十六进制当前输入的进制高亮显示每个进制对应一个复制按钮输入键盘提示十六进制显示A-F页面整体采用 ArkUI 声明式布局。本文重点是演示如何在 HarmonyOS 项目中使用 ArkTS 和 ArkUI 实现一个程序员工具类单页面应用。项目代码主要写在entry/src/main/ets/pages/Index.ets文件中适合作为 HarmonyOS ArkTS 入门到进阶之间的练习案例。前言在编程和计算机学习中我们经常需要在不同进制之间转换数字。二进制、八进制、十进制、十六进制是最常用的四种进制手动转换很麻烦一个好用的进制转换器可以大大提高效率。从应用开发角度来看这个项目不依赖后端接口也不需要数据库但能练习 ArkTS 中的状态管理、多输入框联动、输入验证、数字进制转换和剪贴板操作等内容。本文基于 HarmonyOS 和 ArkTS 实现一个进制转换器。用户在任意进制输入框输入数字其他三个进制会自动实时转换显示每个结果都可以一键复制。这个项目的核心不是简单的进制转换API而是多输入框的联动和输入验证。在一个输入框输入时其他输入框自动更新这正是 ArkUI 声明式开发的基本思想。一、项目目标本次实践主要实现以下目标创建 HarmonyOS ArkTS 页面使用Entry和Component定义页面组件使用State管理页面状态支持二进制BIN输入和转换支持八进制OCT输入和转换支持十进制DEC输入和转换支持十六进制HEX输入和转换输入时实时转换其他进制输入验证只允许合法字符每个结果一键复制当前编辑的输入框高亮大数字支持使用Builder封装进制输入项完成一个可以运行的进制转换器页面。这个项目虽然是单页面应用但它实现了四种进制的实时互相转换是程序员常用的工具比普通静态页面更适合练习 ArkTS。二、技术栈类型内容开发方向HarmonyOS 应用开发开发语言ArkTSUI 框架ArkUISDK 版本HarmonyOS API 23 及以上工程模型Stage 模型核心组件Text / TextInput / Button / Column / Row状态管理State数据处理进制转换 / 输入验证 / 实时联动项目入口entry/src/main/ets/pages/Index.ets运行平台模拟器或真机本项目是 HarmonyOS 原生 ArkTS 项目。页面主体由 ArkUI 组件构建核心逻辑写在Index.ets文件中不依赖后端接口也不需要额外配置数据库。三、为什么选择进制转换器项目进制转换器适合作为 ArkTS 练习项目主要有以下几个原因。第一实用性强。程序员和计算机相关专业学生经常需要进制转换。第二业务场景真实。调试、看内存地址、网络编程等场景都需要进制转换。第三适合练习状态管理。四个输入框联动一个变化其他都要更新。第四适合练习输入验证。不同进制允许的字符不同需要过滤非法输入。第五适合练习数字处理。JavaScript/TypeScript的parseInt和toString支持进制转换。第六扩展空间比较大。基础功能完成后可以继续增加ASCII转换、字节序转换、IP地址转换、Unicode转换和浮点数转换。在本项目中当前输入的十进制数值是核心数据。所有进制的显示都基于这个数值转换而来。四、功能规则说明支持的进制进制基数允许字符二进制(BIN)20, 1八进制(OCT)80-7十进制(DEC)100-9十六进制(HEX)160-9, A-F, a-f转换规则在任意输入框输入合法字符其他输入框自动更新输入非法字符自动过滤空输入时所有输入框显示空或0支持大数字在JavaScript安全整数范围内十六进制自动转大写显示复制功能点击复制按钮复制对应进制的字符串到剪贴板。五、项目结构本项目主要修改首页文件entry └── src └── main └── ets └── pages └── Index.ets其中文件作用Index.ets编写页面结构、状态数据和进制转换逻辑本文不涉及复杂路由也不需要额外创建多个页面。对于练习项目来说把主要逻辑集中在一个Index.ets文件中更方便理解。六、核心实现思路本项目的核心流程如下使用State保存当前十进制数值和四个进制的显示字符串用户在某个输入框输入过滤非法字符只保留该进制允许的字符将输入的字符串解析为十进制数值将十进制数值转换为其他三个进制的字符串更新所有输入框的显示高亮当前正在编辑的输入框点击复制按钮复制对应内容处理空输入和非法输入。项目中最重要的状态变量如下State binValue: string State octValue: string State decValue: string State hexValue: string State activeRadix: number 10其中状态变量作用binValue二进制字符串octValue八进制字符串decValue十进制字符串hexValue十六进制字符串activeRadix当前激活的进制内部以十进制数值为中间值所有转换都经过十进制中转这样逻辑最简单。七、Index.ets 完整代码打开文件entry/src/main/ets/pages/Index.ets将其中内容替换为下面代码EntryComponentstruct Index{StatebinValue:string0StateoctValue:string0StatedecValue:string0StatehexValue:string0StateactiveRadix:number10privateupdateFromRadix(value:string,radix:number):void{letfilteredthis.filterInput(value,radix)if(filtered){this.binValuethis.octValuethis.decValuethis.hexValuereturn}letnumparseInt(filtered,radix)if(isNaN(num)){num0}this.binValuenum.toString(2)this.octValuenum.toString(8)this.decValuenum.toString(10)this.hexValuenum.toString(16).toUpperCase()}privatefilterInput(value:string,radix:number):string{letpattern:RegExpswitch(radix){case2:pattern/[^01]/gbreakcase8:pattern/[^0-7]/gbreakcase10:pattern/[^0-9]/gbreakcase16:pattern/[^0-9a-fA-F]/gbreakdefault:returnvalue}returnvalue.replace(pattern,)}privatecopyValue(value:string):void{if(!value)returnletcontextgetContext(this)try{context.clipboard.setContent(value)}catch(e){console.error(复制失败)}}BuilderRadixInput(label:string,sublabel:string,value:string,radix:number,color:string){Column(){Row(){Column(){Text(label).fontSize(18).fontWeight(FontWeight.Bold).fontColor(color)Text(sublabel).fontSize(12).fontColor(#9CA3AF)}.alignItems(HorizontalAlign.Start)Blank()Button(复制).height(32).fontSize(13).padding({left:12,right:12}).fontColor(color).backgroundColor(color15).borderRadius(16).onClick((){this.copyValue(value)})}.width(100%).margin({bottom:12})TextInput({text:value,placeholder:0}).width(100%).height(56).fontSize(20).fontFamily(monospace).fontColor(#182431).backgroundColor(this.activeRadixradix?color08:#F9FAFB).borderRadius(12).border({width:this.activeRadixradix?2:1,color:this.activeRadixradix?color:#E5E7EB}).padding({left:16,right:16}).type(InputType.Number).onFocus((){this.activeRadixradix}).onChange((newValue:string){this.activeRadixradixthis.updateFromRadix(newValue,radix)})}.width(100%).padding(16).backgroundColor(Color.White).borderRadius(16).margin({bottom:12}).shadow({radius:6,color:#06000000,offsetX:0,offsetY:2})}build(){Scroll(){Column(){Text(进制转换器).fontSize(28).fontWeight(FontWeight.Bold).fontColor(#182431).margin({top:22})Text(基于 HarmonyOS ArkTS 的程序员工具).fontSize(14).fontColor(#6B7280).margin({top:8,bottom:20})this.RadixInput(二进制,BIN (Base 2),this.binValue,2,#3B82F6)this.RadixInput(八进制,OCT (Base 8),this.octValue,8,#8B5CF6)this.RadixInput(十进制,DEC (Base 10),this.decValue,10,#10B981)this.RadixInput(十六进制,HEX (Base 16),this.hexValue,16,#F59E0B)Column(){Text( 提示).fontSize(14).fontWeight(FontWeight.Medium).fontColor(#6B7280).width(100%).margin({bottom:8})Text(在任意输入框输入数字其他进制会自动转换。二进制只允许0和1八进制0-7十进制0-9十六进制0-9和A-F。).fontSize(13).fontColor(#9CA3AF).lineHeight(20)}.width(100%).padding(16).backgroundColor(#F9FAFB).borderRadius(12).margin({top:8})}.width(100%).padding({left:18,right:18,bottom:30})}.width(100%).height(100%).backgroundColor(#F5F7FA).scrollBar(BarState.Off)}}八、代码实现说明1. 输入过滤每个进制只允许特定字符用正则表达式过滤非法输入二进制只保留0和1八进制只保留0-7十进制只保留0-9十六进制只保留0-9和a-f/A-F2. 进制转换使用JavaScript内置的parseInt和toString方法parseInt(str, radix)将指定进制的字符串转为十进制数字num.toString(radix)将十进制数字转为指定进制的字符串以十进制为中间值实现任意进制之间的转换。3. 实时联动输入变化时立即更新所有进制不需要点击转换按钮体验流畅。4. 焦点高亮当前输入框获得焦点时边框和背景变为对应进制的主题色直观显示当前在编辑哪个。5. 一键复制每个进制都有独立的复制按钮点击复制对应的值到剪贴板。6. 等宽字体数字使用等宽字体显示对齐整齐阅读更舒服。九、运行项目代码编写完成后在DevEco Studio中运行项目。在不同输入框输入数字检查其他进制是否正确转换测试非法字符是否被过滤测试复制功能是否正常。十、开发中遇到的问题输入过滤必须过滤掉非法字符否则parseInt会出错空输入处理输入为空时所有框都清空不显示0焦点状态输入和聚焦都要更新activeRadix十六进制大写统一转大写显示更规范十一、总结本文基于HarmonyOS和ArkTS实现了一个进制转换器。项目通过parseInt和toString实现四种进制的实时互相转换支持输入验证、焦点高亮和一键复制。这个项目展示了ArkTS中多输入框联动、输入验证和数字处理的基本方法适合作为入门练习项目。