鸿蒙NEXT开发案例：字数统计

【引言】

本文将通过一个具体的案例——“字数统计”组件，来探讨如何在鸿蒙NEXT框架下实现这一功能。此组件不仅能够统计用户输入文本中的汉字、中文标点、数字、以及英文字符的数量，还具有良好的用户界面设计，使用户能够直观地了解输入文本的各种统计数据。

【环境准备】

• 操作系统：Windows 10

• 开发工具：DevEco Studio NEXT Beta1 Build Version: 5.0.3.806

• 目标设备：华为Mate60 Pro

• 开发语言：ArkTS

• 框架：ArkUI

• API版本：API 12

【组件概述】

“字数统计”组件基于鸿蒙NEXT框架构建，旨在提供一个简洁而强大的文本统计工具。组件的主要功能包括：

• 文本输入：用户可以在提供的文本区域内输入或粘贴任何文本。

• 实时统计：当用户输入或修改文本时，组件会实时更新并显示文本中汉字、中文标点、数字、英文字符等的具体数量。

• 示例与清空：提供了“示例”按钮，点击后会自动填充预设的文本内容；“清空”按钮则用于清空当前的输入内容。

【技术实现】

1. 状态管理：使用@State装饰器来管理组件的状态，如输入文本、各种字符的数量统计等。通过@Watch装饰器监听输入文本的变化，触发相应的计算逻辑。

2. 文本解析：当检测到输入文本发生变化时，组件会遍历文本中的每一个字符，根据正则表达式判断字符类型，并分别统计汉字、中文标点、数字、英文字符的数量。特别地，对于汉字和中文标点，每个字符被视为两个单位进行统计。

3. 用户界面：组件的UI设计遵循了鸿蒙NEXT的设计规范，使用了Column、Row、Text、TextArea等基础组件来构建布局。通过设置字体颜色、大小、背景色、边距等属性，实现了美观且易于使用的界面。此外，组件还利用了阴影效果和圆角设计来提升视觉体验。

4. 交互设计：为了增强用户体验，组件中加入了“示例”和“清空”按钮，用户可以通过简单的点击操作快速测试组件的功能或清空输入框。同时，组件支持文本输入区域的实时更新，保证了用户操作的即时反馈。

【完整代码】

// 定义一个组件，用于数字和文本统计
@Entry
@Component
struct NumberToChineseConverter {// 定义一个状态变量，存储示例数字字符串@State private exampleNumber: string = '自从盘古破鸿蒙,开辟从兹清浊辨。\nare you ok?\n1234\n+-*/';// 定义文本颜色的状态变量@State private textColor: string = "#2e2e2e";// 定义阴影边框颜色的状态变量@State private shadowColor: string = "#d5d5d5";// 定义基础内边距的状态变量@State private basePadding: number = 30;// 定义汉字数量的状态变量@State private chineseCharCount: string = "0";// 定义中文标点数量的状态变量@State private chinesePunctuationCount: string = "0";// 定义汉字加中文标点总数的状态变量@State private totalChineseCount: string = "0";// 定义英文字符数量的状态变量@State private englishCharCount: string = "0";// 定义数字数量的状态变量@State private digitCount: string = "0";// 定义总字符数的状态变量@State private charTotalCount: string = "0";// 定义监听输入文本变化的状态变量@State @Watch('inputChanged') private inputText: string = "";// 当输入文本发生变化时调用的方法inputChanged() {// 初始化计数器let chineseChars = 0; // 汉字数量let chinesePunctuation = 0; // 中文标点数量let englishChars = 0; // 英文字符数量let digits = 0; // 数字数量let count = 0; // 总字符数// 遍历输入文本的每个字符for (let i = 0; i < this.inputText.length; i++) {let char = this.inputText.charAt(i); // 获取当前字符count++; // 计数器加一// 如果字符是数字，则数字计数器加一if (/\d/.test(char)) {digits++;}// 如果字符是汉字，则汉字计数器加一，同时总字符数加二if (/[\u4e00-\u9fa5]/.test(char)) {chineseChars++;count++; // 汉字和中文标点算两个字符，所以这里多+1}// 如果字符是中文标点，则中文标点计数器加一，同时总字符数加二if (/[\u3001-\u3002\uff01-\uff1a]/.test(char)) {chinesePunctuation++;count++; // 汉字和中文标点算两个字符，所以这里多+1}// 如果字符是英文字符或英文标点，则英文字符计数器加一if (/[a-zA-Z0-9\s!-/:-@[-`{-~]/.test(char)) {englishChars++;}}// 更新状态变量this.chineseCharCount = `${chineseChars}`;this.chinesePunctuationCount = `${chinesePunctuation}`;this.totalChineseCount = `${chineseChars + chinesePunctuation}`;this.englishCharCount = `${englishChars}`;this.digitCount = `${digits}`;this.charTotalCount = `${count}`;}// 构建UI界面的方法build() {// 创建一个列布局容器Column() {// 添加标题Text('字数统计').fontColor(this.textColor) // 设置字体颜色.fontSize(18) // 设置字体大小.width('100%') // 设置宽度为100%.height(50) // 设置高度为50.textAlign(TextAlign.Center) // 设置文本居中对齐.backgroundColor(Color.White) // 设置背景色为白色.shadow({ // 设置阴影效果radius: 2, // 阴影半径color: this.shadowColor, // 阴影颜色offsetX: 0, // X轴偏移量offsetY: 5 // Y轴偏移量});// 创建可滚动的容器Scroll() {// 在可滚动容器内部创建列布局Column() {// 添加工具介绍Column() {Text('工具介绍').fontSize(18).fontWeight(600).fontColor(this.textColor);Text('本工具能够快速统计输入文本中的汉字、中文标点、数字、英文字符等的数量。具体规则如下：\n•汉字和中文标点各算作两个字符。\n•数字、空格、英文字母及英文标点各算作一个字符。').textAlign(TextAlign.JUSTIFY) // 设置文本两端对齐.fontSize(13) // 设置字体大小.fontColor(this.textColor) // 设置字体颜色.margin({ top: `${this.basePadding / 2}lpx` }); // 设置上边距}// 设置样式.alignItems(HorizontalAlign.Start) // 设置水平对齐方式.width('650lpx') // 设置宽度.padding(`${this.basePadding}lpx`) // 设置内边距.margin({ top: `${this.basePadding}lpx` }) // 设置外边距.borderRadius(10) // 设置圆角.backgroundColor(Color.White) // 设置背景色.shadow({ // 设置阴影效果radius: 10, // 阴影半径color: this.shadowColor, // 阴影颜色offsetX: 0, // X轴偏移量offsetY: 0 // Y轴偏移量});// 添加示例和清空按钮Column() {Row() {Text('示例').fontColor("#5871ce") // 设置字体颜色.fontSize(16) // 设置字体大小.padding(`${this.basePadding / 2}lpx`) // 设置内边距.backgroundColor("#f2f1fd") // 设置背景色.borderRadius(5) // 设置圆角.clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 }) // 设置点击效果.onClick(() => { // 设置点击事件this.inputText = this.exampleNumber; // 将示例文本赋值给输入框});Blank(); // 添加空白间隔Text('清空').fontColor("#e48742") // 设置字体颜色.fontSize(16) // 设置字体大小.padding(`${this.basePadding / 2}lpx`) // 设置内边距.clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 }) // 设置点击效果.backgroundColor("#ffefe6") // 设置背景色.borderRadius(5) // 设置圆角.onClick(() => { // 设置点击事件this.inputText = ""; // 清空输入框});}.height(45) // 设置高度.justifyContent(FlexAlign.SpaceBetween) // 设置子项之间间距均匀分布.width('100%'); // 设置宽度Divider(); // 添加分割线// 添加文本输入区域TextArea({ text: $$this.inputText, placeholder: `请输入内容` }).width(`${650 - this.basePadding * 2}lpx`) // 设置宽度.height(100) // 设置高度.fontSize(16) // 设置字体大小.caretColor(this.textColor) // 设置光标颜色.fontColor(this.textColor) // 设置字体颜色.margin({ top: `${this.basePadding}lpx` }) // 设置上边距.padding(0) // 设置内边距.backgroundColor(Color.Transparent) // 设置背景色.borderRadius(0) // 设置圆角.textAlign(TextAlign.JUSTIFY); // 设置文本两端对齐}// 设置样式.alignItems(HorizontalAlign.Start) // 设置水平对齐方式.width('650lpx') // 设置宽度.padding(`${this.basePadding}lpx`) // 设置内边距.margin({ top: `${this.basePadding}lpx` }) // 设置外边距.borderRadius(10) // 设置圆角.backgroundColor(Color.White) // 设置背景色.shadow({ // 设置阴影效果radius: 10, // 阴影半径color: this.shadowColor, // 阴影颜色offsetX: 0, // X轴偏移量offsetY: 0 // Y轴偏移量});// 添加统计结果展示Column() {// 汉字数量Row() {Text() {Span(`汉字：`)Span(`${this.chineseCharCount} `).fontColor(Color.Red) // 汉字数量以红色显示Span('个')}.fontColor(this.textColor) // 设置字体颜色.fontSize(16) // 设置字体大小.layoutWeight(1); // 设置布局权重}.constraintSize({ minHeight: 45 }) // 设置最小高度.justifyContent(FlexAlign.SpaceBetween) // 设置子项之间间距均匀分布.width('100%'); // 设置宽度Divider(); // 添加分割线// 中文标点数量Row() {Text() {Span(`中文标点：`)Span(`${this.chinesePunctuationCount} `).fontColor(Color.Red) // 中文标点数量以红色显示Span('个')}.fontColor(this.textColor) // 设置字体颜色.fontSize(16) // 设置字体大小.layoutWeight(1); // 设置布局权重}.constraintSize({ minHeight: 45 }) // 设置最小高度.justifyContent(FlexAlign.SpaceBetween) // 设置子项之间间距均匀分布.width('100%'); // 设置宽度Divider(); // 添加分割线// 汉字加中文标点总数Row() {Text() {Span(`汉字+中文标点：`)Span(`${this.totalChineseCount} `).fontColor(Color.Red) // 汉字加中文标点总数以红色显示Span('个')}.fontColor(this.textColor) // 设置字体颜色.fontSize(16) // 设置字体大小.layoutWeight(1); // 设置布局权重}.constraintSize({ minHeight: 45 }) // 设置最小高度.justifyContent(FlexAlign.SpaceBetween) // 设置子项之间间距均匀分布.width('100%'); // 设置宽度Divider(); // 添加分割线// 英文字符数量Row() {Text() {Span(`英文：`)Span(`${this.englishCharCount} `).fontColor(Color.Red) // 英文字符数量以红色显示Span('个')Span('（含英文状态下的数字、符号、标点）').fontSize(13) // 附加说明}.fontColor(this.textColor) // 设置字体颜色.fontSize(16) // 设置字体大小.layoutWeight(1); // 设置布局权重}.constraintSize({ minHeight: 45 }) // 设置最小高度.justifyContent(FlexAlign.SpaceBetween) // 设置子项之间间距均匀分布.width('100%'); // 设置宽度Divider(); // 添加分割线// 数字数量Row() {Text() {Span(`数字：`)Span(`${this.digitCount} `).fontColor(Color.Red) // 数字数量以红色显示Span('个')}.fontColor(this.textColor) // 设置字体颜色.fontSize(16) // 设置字体大小.layoutWeight(1); // 设置布局权重}.constraintSize({ minHeight: 45 }) // 设置最小高度.justifyContent(FlexAlign.SpaceBetween) // 设置子项之间间距均匀分布.width('100%'); // 设置宽度Divider(); // 添加分割线// 总字符数Row() {Text() {Span(`字符总数：`)Span(`${this.charTotalCount} `).fontColor(Color.Red) // 总字符数以红色显示Span('个字符')}.fontColor(this.textColor) // 设置字体颜色.fontSize(16) // 设置字体大小.layoutWeight(1); // 设置布局权重}.constraintSize({ minHeight: 45 }) // 设置最小高度.justifyContent(FlexAlign.SpaceBetween) // 设置子项之间间距均匀分布.width('100%'); // 设置宽度}// 设置样式.alignItems(HorizontalAlign.Start) // 设置水平对齐方式.width('650lpx') // 设置宽度.padding(`${this.basePadding}lpx`) // 设置内边距.margin({ top: `${this.basePadding}lpx` }) // 设置外边距.borderRadius(10) // 设置圆角.backgroundColor(Color.White) // 设置背景色.shadow({ // 设置阴影效果radius: 10, // 阴影半径color: this.shadowColor, // 阴影颜色offsetX: 0, // X轴偏移量offsetY: 0 // Y轴偏移量});}}.scrollBar(BarState.Off) // 关闭滚动条.clip(false); // 不裁剪超出部分，这里是允许内部组件阴影可以向父布局外扩散}.height('100%') // 设置高度为100%.width('100%') // 设置宽度为100%.backgroundColor("#f4f8fb"); // 设置背景色}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/61622.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

贪心算法（1）

贪心算法（1）

目录 柠檬水找零 题解&#xff1a; 代码&#xff1a; 将数组和减半的最少操作次数&#xff08;大根堆&#xff09; 题解&#xff1a; 代码&#xff1a; 最大数&#xff08;注意 sort 中 cmp 的写法&#xff09; 题解&#xff1a; 代码&#xff1a; 摆动序列&#xff0…
阅读更多...
数据结构(一)链表

数据结构(一)链表

目录 链表 单向链表 单向链表结构与基本操作 插入节点 删除节点 搜索节点 遍历链表 反转链表 双向链表 双向链表结构与基本操作 节点定义和创建 插入节点 删除节点 搜索节点 遍历链表 转链表反 在开始讲线性表之前&#xff0c;先给各位读者重新回顾一下链表 链…
阅读更多...
linux从0到1——shell编程7

linux从0到1——shell编程7

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…
阅读更多...
微软发布Win11 24H2系统11月可选更新KB5046740！

微软发布Win11 24H2系统11月可选更新KB5046740！

系统之家11月22日报道&#xff0c;微软针对Win11 24H2系统推出2024年11月最新可选更新补丁KB5046740&#xff0c;更新后系统版本后升至26100.2454&#xff0c;此次更新后修复当应用程序以PDF和XLSX格式导出图表对象时停止响应、无法使用API查找旋转信息等问题。以下小编将给大家…
阅读更多...
五天SpringCloud计划——DAY2之使用Docker完成项目的部署

五天SpringCloud计划——DAY2之使用Docker完成项目的部署

一、引言 刚刚学完了Docker的使用&#xff0c;现在知识在脑子里面还是热乎的&#xff0c;是时候把它总结一下了。 现在的我认为Docker时一个部署项目的工具(不知道是不是真的),相比于我以前使用宝塔面板部署项目&#xff0c;使用Docker更能让我看到代码之美&#xff0c;怎么一…
阅读更多...
.net6 使用 FreeSpire.XLS 实现 excel 转 pdf - docker 部署

.net6 使用 FreeSpire.XLS 实现 excel 转 pdf - docker 部署

FreeSpire.XLS && Aspose.Cells包都可以实现。实现过程中发现如下问题&#xff1a; 本地测试通过&#xff0c; docker部署服务器后报错&#xff1a; The type initializer for Spire.Xls.Core.Spreadsheet.XlsPageSetupBase threw an exception. 由于缺少依赖&#xf…
阅读更多...
sed使用扩展正则表达式时, -i 要写在 -r 或 -E 的后面

sed使用扩展正则表达式时, -i 要写在 -r 或 -E 的后面

sed使用扩展正则表达式时, -i 要写在 -r 或 -E 的后面 前言 -r 等效 -E , 启用扩展正则表达式 -E是新叫法,更统一,能增强可移植性 , 但老系统,比如 CentOS-7 的 sed 只能用 -r ### Ubuntu24.04-E, -r, --regexp-extendeduse extended regular expressions in the script(fo…
阅读更多...
学习ASP.NET Core的身份认证（基于Cookie的身份认证2）

学习ASP.NET Core的身份认证（基于Cookie的身份认证2）

采用基于Cookie的身份认证&#xff0c;在调用services.AddAuthentication注册服务时&#xff0c;可以通过CookieAuthenticationOptions对象按需设置Cookie属性&#xff0c;常用的包括以下属性&#xff08;更详细的介绍见参考文献2&#xff0c;微软的帮助文档中的介绍看的头大&a…
阅读更多...
设计模式之 模板方法模式

设计模式之 模板方法模式

模板方法模式是行为型设计模式的一种。它定义了一个算法的骨架&#xff0c;并将某些步骤的实现延迟到子类中。模板方法模式允许子类在不改变算法结构的情况下重新定义算法的某些特定步骤。 模板方法模式的核心在于&#xff1a; 封装算法的骨架&#xff1a;通过父类中的模板方…
阅读更多...
Softing线上研讨会 | Ethernet-APL：推动数字时代的过程自动化

Softing线上研讨会 | Ethernet-APL：推动数字时代的过程自动化

| &#xff08;免费&#xff09;线上研讨会时间&#xff1a;2024年11月19日 16:00~16:30 / 23:00~23:30 Ethernet-APL以10Mb/s的传输速率为过程工业中的现场设备带来了无缝以太网连接和本质安全电源&#xff0c;这不仅革新了新建工厂&#xff0c;也适用于改造现有工厂。 与现…
阅读更多...
Idea修改Commit Changes模式、idea使用git缺少部分Commit Changes

Idea修改Commit Changes模式、idea使用git缺少部分Commit Changes

文章目录 一、模式一1、页面效果如下2、如何打开为这种样式&#xff1f; 二、模式二1、页面效果如下2、如何打开为这种样式&#xff1f; 三、总结 前言&#xff1a;Idea中代码提交到git库时的commit Change有两种模式&#xff0c;每种模式的界面及功能都不太一样。 Commit Cha…
阅读更多...
Getx：GetxController依赖管理02，Binding绑定全局控制器（懒加载Controller）

Getx：GetxController依赖管理02，Binding绑定全局控制器（懒加载Controller）

在使用GetX 状态管理器的时候&#xff0c;如果每个页面都手动实例化一个控制器就太麻烦了&#xff0c; Binding 的作用就是所有需要进行状态管理的控制器进行统一初始化 创建全局控制器Binding import package:get/get.dart; import ../controllers/counter.dart; // 同上一篇内…
阅读更多...
东土科技孵化的“网联汽车高速通信技术”前沿产品亮相2024WICV大会

东土科技孵化的“网联汽车高速通信技术”前沿产品亮相2024WICV大会

2024世界智能网联汽车大会&#xff08;WICV&#xff09;于近日在北京召开。本次大会发布了由中国汽车工程学会组织全球200余位专家&#xff0c;联合评审遴选出未来十年对于智能网联汽车发展具有重要影响的十大技术趋势&#xff0c;包括“面向高级别自动驾驶的超级人工智能”“网…
阅读更多...
torch.__version__的torch版本和conda list的torch版本不一致

torch.__version__的torch版本和conda list的torch版本不一致

conda list是1.9.0的torch&#xff0c;但是torch.__version__是1.6的&#xff0c;很奇怪 后来发现这个1.6的torch是base的版本 但是使用“python -m site”查看当前环境的包搜索路径&#xff0c;也是对的&#xff0c;先从我自己的虚拟环境搜索 最后从我自己的虚拟环境里pip uni…
阅读更多...
nginx 配置lua执行shell脚本

nginx 配置lua执行shell脚本

1.需要nginx安装lua_nginx_module模块,这一步安装时&#xff0c;遇到一个坑&#xff0c;nginx执行configure时&#xff0c;一直提示./configure: error: unsupported LuaJIT version&#xff1b; ngx_http_lua_module requires LuaJIT 2.x。 网上一堆方法都试了&#xff0c;都…
阅读更多...
【linux】插入新硬盘如何配置：格式化、分区、自动挂载（Ubuntu）

【linux】插入新硬盘如何配置：格式化、分区、自动挂载（Ubuntu）

文章目录 具体方法GPT分区表&#xff08;GUID Partition Table&#xff09;&#xff08;建议都用这种分区方法&#xff09;MBR分区表方法&#xff08;最大支持2TB分区&#xff09;&#xff08;Master Boot Record&#xff09; 附加&#xff1a;如何查看硬盘的型号另外&#xff…
阅读更多...
使用itextpdf进行pdf模版填充中文文本时部分字不显示问题

使用itextpdf进行pdf模版填充中文文本时部分字不显示问题

在网上找了很多种办法 都解决不了; 最后发现是文本域字体设置出了问题; 在这不展示其他的代码 只展示重要代码; 1 引入扩展包 <dependency><groupId>com.itextpdf</groupId><artifactId>itext-asian</artifactId><version>5.2.0</v…
阅读更多...
【Ubuntu】如何在Ubuntu系统中查看端口是否可用

【Ubuntu】如何在Ubuntu系统中查看端口是否可用

文章目录 前言一、使用netstat命令二、使用ss命令三、使用lsof命令四、使用nc&#xff08;netcat&#xff09;命令总结 前言 本文介绍了如何在Ubuntu系统中查看端口是否可用的方法&#xff0c;并给出了具体的命令示例&#xff0c;帮助用户通过命令行工具检测端口的开放状态。 …
阅读更多...
长短时记忆网络（SLTM）：理解与实践

长短时记忆网络（SLTM）：理解与实践

长短时记忆网络&#xff08;SLTM&#xff09;&#xff0c;即短期长期记忆网络&#xff0c;是一种特殊的循环神经网络&#xff08;RNN&#xff09;&#xff0c;它能够学习到数据中的长期依赖关系。在这篇文章中&#xff0c;我们将详细介绍SLTM的工作原理&#xff0c;并提供一个简…
阅读更多...
HTML5实现剪刀石头布小游戏(附源码)

HTML5实现剪刀石头布小游戏(附源码)

文章目录 1.设计来源1.1 主界面1.2 皮肤风格1.2 游戏中界面 2.效果和源码源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/143798520 HTM…
阅读更多...
最新文章

Copyright @ 2022~2023