用了这个 HarmonyOS 应用，我再也不用为水文章发愁了

前言朋友你是不是也遇到过这样的场景周末瘫在沙发上刷手机突然接到领导通知——“下周组会每人准备一篇800字的汇报材料”。脑子一片空白手指却不知道该敲什么。别慌今天咱们不聊那些高大上的架构设计就从一个最接地气的需求出发一边撸代码一边聊聊 HarmonyOS 应用开发里那些真正用得上的东西。通过做一个“废话生成器”你会发现声明式UI、状态管理、组件布局这些概念其实没那么玄乎。一、需求有了但到底要做个什么东西先说清楚我们要做什么。这个应用很简单输入一个标题点一下按钮自动给你水出一篇像模像样的文章。听起来有点不正经但做起来特别适合练手——它涉及到了文本输入、状态响应、列表渲染、随机算法基本上把一个基础应用该有的零件都凑齐了。这个“废话生成器”的界面大概长这样最上面是标题输入框中间显示当前标题下面有个大大的“开始生成”按钮再往下就是生成出来的文章内容。文章内容会随着标题变化每次点击按钮都会随机组合出一篇新的。别小看这个流程背后藏着 HarmonyOS 应用开发的几个核心机制我们一步一步拆开来看。二、一个 HarmonyOS 项目是怎么跑起来的在写代码之前先搞清楚 HarmonyOS 应用最基本的运行逻辑。一个鸿蒙应用启动时系统会先加载配置文件里指定的入口页面默认就是pages/Index.ets。这个页面文件里必须有一个用Entry装饰器标记的结构体表示“这就是整个应用的入口组件”。装饰器是 HarmonyOS 里特别重要的一个概念。Entry表示这是一个页面入口Component表示这是一个可以被复用的 UI 组件。而State就更关键了——它标记的变量一旦发生变化界面上用到这个变量的地方会自动刷新。这也就是 HarmonyOS 声明式 UI 的核心思想你不需要手动去更新界面只需要改变数据界面自己就跟着变了。这个机制在后面的文章生成功能里会被反复用到。三、把界面搭起来——Column 到底有多好用HarmonyOS 的布局体系和传统前端开发有些相似但又简化了不少。最常用的两个布局容器是Column和Row分别负责纵向排列和横向排列。我们这个应用的界面整体就是纵向的——标题在上面输入框在下面按钮再往下内容在最底部——所以最外层直接用一个Column包住所有内容。Column有几个非常实用的属性space控制子元素之间的间距padding设置内边距alignItems控制子元素在水平方向上的对齐方式。这些属性和我们熟悉的 CSS Flexbox 很像但写起来更简洁。具体到代码层面先搭一个最基础的结构import { promptAction } from kit.ArkUI Entry Component struct Index { build() { Column({ space: 16 }) { // 标题区域 Text(废话生成器) .fontSize(28) .fontWeight(FontWeight.Bold) .fontColor(#1a1a1a) .margin({ top: 32, bottom: 8 }) // 输入框区域 // 待实现 // 按钮区域 // 待实现 // 文章展示区域 // 待实现 } .width(100%) .height(100%) .padding({ left: 20, right: 20 }) .backgroundColor(#f5f7fa) } }这个骨架搭好之后在 DevEco Studio 的预览器里就能看到一个带背景色和标题的空白界面了。build()方法是每个组件的核心里面写的就是这个组件要渲染成什么样子。四、让用户输入标题——TextInput 和 State 的配合接下来要实现标题输入功能。HarmonyOS 提供了TextInput组件专门用于单行文本输入支持占位符、最大长度、输入类型等一系列配置。这里有个关键点输入框里的内容怎么存答案就是State。定义一个State title: string 然后通过TextInput的onChange回调来更新它。每当用户在输入框里打字title的值就会改变而界面上用到title的地方也会跟着更新。TextInput组件的用法非常直接State title: string TextInput({ placeholder: 输入一个标题比如数字化转型赋能高质量发展 }) .width(100%) .height(48) .backgroundColor(Color.White) .borderRadius(8) .padding({ left: 16, right: 16 }) .onChange((value: string) { this.title value })这里设置了一个占位符给用户一个提示。backgroundColor(Color.White)把输入框背景设成白色配合圆角和内边距看起来就是标准的输入框样式。onChange每次用户输入都会触发把最新的内容存到title变量里。五、按钮怎么玩——Button 组件的样式和事件输入框下面需要一个按钮来触发文章生成。HarmonyOS 的Button组件支持两种创建方式直接传文字或者作为一个容器包裹其他组件。我们这里用最简单的第一种Button( 开始生成) .width(100%) .height(48) .fontSize(18) .fontWeight(FontWeight.Medium) .backgroundColor(#007aff) .borderRadius(24) .onClick(() { this.generateArticle() })onClick是按钮最核心的事件点下去之后触发generateArticle方法来生成文章内容。按钮的样式也可以自由定制背景色、圆角、字体大小和粗细都能通过链式调用轻松设置。六、文章内容怎么存——Scroll 组件处理长文本文章内容可能会很长直接放一个Text组件不够用——内容太多会超出屏幕而且无法滚动。HarmonyOS 提供了Scroll组件来解决这个问题它就像一个可以滚动的容器里面的内容不管多长都能滑动查看。State articleContent: string 点击「开始生成」按钮看看会发生什么... Scroll() { Text(this.articleContent) .fontSize(16) .fontColor(#333333) .lineHeight(24) .width(100%) .padding(16) .textAlign(TextAlign.Start) } .width(100%) .height(300) .backgroundColor(Color.White) .borderRadius(12) .margin({ top: 16 })Scroll包住Text限制一个固定高度里面的文本就可以滚动了。lineHeight设成 24 让行间距更舒服textAlign设为Start保持左对齐整体看起来就像一篇正儿八经的文章。七、灵魂所在——随机生成算法的设计界面搭好了现在来实现最核心的“废话生成”逻辑。原理其实很简单准备一些“段落模板”和“填充词库”根据标题随机拼出一篇 800 字左右的文章。先用State定义两个关键变量State title: string State articleContent: string 点击「开始生成」按钮看看会发生什么...然后在generateArticle方法里实现随机生成逻辑。思路是这样的先准备一组句式模板每个模板里留出{标题}和{关键词}两个占位符。再准备一组常用的“申论关键词”比如“新质生产力”、“数字化转型”、“系统治理”、“长效机制”等等。生成文章时循环拼接不同模板每次随机选一个关键词填入。每句话之后加一个空行让文章看起来更有段落感。目标生成 800 字左右大概需要拼 30 到 40 个句子。核心代码如下generateArticle() { if (!this.title || this.title.trim() ) { promptAction.showToast({ message: 好歹写个标题吧..., duration: 2000 }) return } // 句式模板 const templates: string[] [ 在新时代背景下{标题}已经成为各行业关注的焦点问题。, 从战略层面来看{标题}的核心在于{关键词}的系统性构建。, 实践表明推动{标题}的关键在于坚持{关键词}的发展理念。, 深入分析{标题}的内在逻辑不难发现{关键词}发挥着决定性作用。, {标题}不仅是一个技术性问题更是一个涉及{关键词}的系统工程。, 要真正实现{标题}的突破必须牢牢把握{关键词}这一核心抓手。, {标题}的深入推进需要我们在{关键词}方面持续发力。, 从顶层设计到基层实践{标题}始终贯穿着{关键词}这条主线。, {标题}的时代价值体现在它对{关键词}的深刻重塑。, 立足当前、着眼长远{标题}要求我们以{关键词}为抓手久久为功。 ] // 关键词词库 const keywords: string[] [ 新质生产力, 高质量发展, 数字化转型, 系统治理, 长效机制, 创新驱动, 绿色发展, 协同推进, 精准施策, 战略定力, 制度优势, 内生动力, 深化改革, 科技自立自强, 人才引领, 共建共治共享, 问题导向, 底线思维, 顶层设计, 普惠共享 ] // 生成文章 let article let wordCount 0 const targetWordCount 800 while (wordCount targetWordCount) { // 随机选一个模板 const template templates[Math.floor(Math.random() * templates.length)] const keyword keywords[Math.floor(Math.random() * keywords.length)] // 替换占位符 let sentence template.replace(/\{标题\}/g, this.title) sentence sentence.replace(/\{关键词\}/g, keyword) article sentence \n\n wordCount sentence.length } this.articleContent article promptAction.showToast({ message: 已生成约 ${wordCount} 字, duration: 1500 }) }这段代码里用到了一个之前没提到的知识点——promptAction.showToast。它是 HarmonyOS 提供的轻提示组件可以在屏幕底部弹出一个短暂的消息提示非常适合用来反馈操作结果。八、完整代码——一个文件搞定一切把上面的各个模块组装起来就是完整的Index.ets文件。直接在 DevEco Studio 里创建项目把默认生成的Index.ets内容替换成下面的代码就行import { promptAction } from kit.ArkUI Entry Component struct Index { State title: string State articleContent: string 点击「开始生成」按钮看看会发生什么... generateArticle() { if (!this.title || this.title.trim() ) { promptAction.showToast({ message: 好歹写个标题吧..., duration: 2000 }) return } const templates: string[] [ 在新时代背景下{标题}已经成为各行业关注的焦点问题。, 从战略层面来看{标题}的核心在于{关键词}的系统性构建。, 实践表明推动{标题}的关键在于坚持{关键词}的发展理念。, 深入分析{标题}的内在逻辑不难发现{关键词}发挥着决定性作用。, {标题}不仅是一个技术性问题更是一个涉及{关键词}的系统工程。, 要真正实现{标题}的突破必须牢牢把握{关键词}这一核心抓手。, {标题}的深入推进需要我们在{关键词}方面持续发力。, 从顶层设计到基层实践{标题}始终贯穿着{关键词}这条主线。, {标题}的时代价值体现在它对{关键词}的深刻重塑。, 立足当前、着眼长远{标题}要求我们以{关键词}为抓手久久为功。, 从方法论的角度审视{标题}的本质是对{关键词}的系统性重构。, {标题}的难点不在于认知层面而在于如何将{关键词}落到实处。 ] const keywords: string[] [ 新质生产力, 高质量发展, 数字化转型, 系统治理, 长效机制, 创新驱动, 绿色发展, 协同推进, 精准施策, 战略定力, 制度优势, 内生动力, 深化改革, 科技自立自强, 人才引领, 共建共治共享, 问题导向, 底线思维, 顶层设计, 普惠共享 ] let article let wordCount 0 const targetWordCount 800 while (wordCount targetWordCount) { const template templates[Math.floor(Math.random() * templates.length)] const keyword keywords[Math.floor(Math.random() * keywords.length)] let sentence template.replace(/\{标题\}/g, this.title) sentence sentence.replace(/\{关键词\}/g, keyword) article sentence \n\n wordCount sentence.length } this.articleContent article promptAction.showToast({ message: 已生成约 ${wordCount} 字, duration: 1500 }) } build() { Column({ space: 16 }) { // 标题 Text( 废话生成器) .fontSize(28) .fontWeight(FontWeight.Bold) .fontColor(#1a1a1a) .margin({ top: 32, bottom: 8 }) // 输入框 TextInput({ placeholder: 输入一个标题比如数字化转型赋能高质量发展 }) .width(100%) .height(48) .backgroundColor(Color.White) .borderRadius(8) .padding({ left: 16, right: 16 }) .onChange((value: string) { this.title value }) // 生成按钮 Button( 开始生成) .width(100%) .height(48) .fontSize(18) .fontWeight(FontWeight.Medium) .backgroundColor(#007aff) .borderRadius(24) .onClick(() { this.generateArticle() }) // 分隔提示 Text(生成内容) .fontSize(14) .fontColor(#888888) .alignSelf(ItemAlign.Start) .margin({ top: 8, bottom: -8 }) // 文章展示区域 Scroll() { Text(this.articleContent) .fontSize(16) .fontColor(#333333) .lineHeight(24) .width(100%) .padding(16) .textAlign(TextAlign.Start) } .width(100%) .height(300) .backgroundColor(Color.White) .borderRadius(12) .margin({ top: 8 }) } .width(100%) .height(100%) .padding({ left: 20, right: 20 }) .backgroundColor(#f5f7fa) } }九、运行在 DevEco Studio 里创建项目选择 Empty Ability 模板然后把上面这段代码复制到entry/src/main/ets/pages/Index.ets里。接着打开模拟器在 Device Manager 里选一个手机设备启动点击运行按钮应用就会安装到模拟器上。运行效果是这样的应用打开后上方是一个输入框输入一个标题点击“开始生成”按钮下方的白色区域就会自动填充一篇看起来颇有章法的文章字数在 800 字左右。滑动可以查看全文每次点击按钮生成的内容都不一样。总结这篇文章通过一个“废话生成器”的案例把 HarmonyOS 应用开发中几个最核心的概念串了一遍Entry和Component定义了页面和组件State实现了数据驱动 UI 的响应式更新Column和Scroll负责布局和滚动TextInput和Button处理用户输入和交互promptAction给出操作反馈。这些组件和方法是 HarmonyOS 应用开发中最常用的“基础动作”掌握了它们再去看更复杂的项目就容易多了。下次再被要求写汇报材料不妨先用这个小工具生成一篇底稿剩下的交给 ChatGPT 润色就行。