HarmonyOS Next——ArkUI 开发案例

ArkUI 是华为为 HarmonyOS 应用开发提供的一套 UI 开发框架，支持声明式编程和组件化开发。本文将通过一个简单的猜数字游戏，资助初学者快速上手 ArkUI 开发。我们将从零开始构建一个完备的应用，涵盖状态管理、变乱处理、组件布局等核心概念。
游戏概述

猜数字游戏的规则如下：

• 程序随机天生一个 1 到 100 之间的数字作为目的数字。
  
• 用户输入一个数字举行猜测。
  
• 程序会根据用户的输入提示“猜的数字太小了”、“猜的数字太大了”或“恭喜你，猜对了！”。
  
• 用户可以点击“重新开始”按钮，重新天生目的数字并重置游戏状态。
  

开发步调

1. 环境准备

确保你已经安装了 DevEco Studio 并配置好了开发环境。如果还没有安装，可以从华为开发者官网下载并安装。
2. 创建新项目

• 打开 DevEco Studio，点击“Create New Project”。
  
• 选择“Empty Ability”模板，点击“Next”。
  
• 输入项目名称，比方“GuessNumberGame”，选择生存路径，点击“Finish”。
  

3. 编写代码

在 entry/src/main/ets/pages/Index.ets 文件中编写以下代码：

1. @Entry
2. @Component
3. struct GuessNumberGame {
4.     @State private targetNumber: number = Math.floor(Math.random() * 100) + 1; // 目标数字
5.     @State private userGuess: string = ''; // 用户输入
6.     @State private message: string = '请输入 1 到 100 之间的数字进行猜测。'; // 提示信息
8.     // 重置游戏
9.     private resetGame() {
10.         this.targetNumber = Math.floor(Math.random() * 100) + 1;
11.         this.userGuess = '';
12.         this.message = '请输入 1 到 100 之间的数字进行猜测。';
13.     }
15.     // 处理用户猜测
16.     private handleGuess() {
17.         const guess = parseInt(this.userGuess);
18.         if (isNaN(guess)) {
19.             this.message = '请输入一个有效的数字。';
20.         } else if (guess < 1 || guess > 100) {
21.             this.message = '请输入 1 到 100 之间的数字。';
22.         } else if (guess < this.targetNumber) {
23.             this.message = '猜的数字太小了，再试试。';
24.         } else if (guess > this.targetNumber) {
25.             this.message = '猜的数字太大了，再试试。';
26.         } else {
27.             this.message = '恭喜你，猜对了！';
28.         }
29.     }
31.     build() {
32.         Column({ space: 20 }) {
33.             Text(this.message)
34.               .fontSize(18)
35.               .fontColor(this.message.includes('恭喜') ? '#00FF00' : '#000000') // 猜对时改变文字颜色
37.             TextInput({
38.                 placeholder: '输入你的猜测',
39.                 text: this.userGuess
40.             })
41.               .onChange((value: string) => {
42.                   // 只允许输入数字
43.                   if (/^\d*$/.test(value)) {
44.                       this.userGuess = value;
45.                   }
46.               })
47.               .width('80%')
48.               .padding(10)
49.               .borderRadius(5)
50.               .borderWidth(1)
51.               .borderColor('#CCCCCC')
53.             Button('提交猜测')
54.               .onClick(() => {
55.                     this.handleGuess();
56.                 })
57.               .width('50%')
58.               .padding(10)
59.               .backgroundColor('#007BFF')
60.               .fontColor('#FFFFFF')
62.             Button('重新开始')
63.               .onClick(() => {
64.                     this.resetGame();
65.                 })
66.               .width('50%')
67.               .padding(10)
68.               .backgroundColor('#6C757D')
69.               .fontColor('#FFFFFF')
70.         }
71.         .width('100%')
72.         .height('100%')
73.         .justifyContent(FlexAlign.Center) // 垂直居中
74.     }
75. }

复制代码

4. 代码剖析

1. 状态管理

• 使用 @State 装饰器声明状态变量：
  
  
  
  • targetNumber：目的数字，随机天生。
    
  • userGuess：用户输入的数字。
    
  • message：提示信息。
    
  
  
• @State 的作用是让 ArkUI 监听这些变量的变化，并在变化时自动更新界面。
  

2. 组件布局

• 使用 Column 组件实现垂直布局。
  
• Text 组件用于体现提示信息。
  
• TextInput 组件用于接收用户输入。
  
• Button 组件用于提交猜测和重置游戏。
  

3. 变乱处理

• TextInput 的 onChange 变乱：监听用户输入，并限定输入内容为数字。
  
• Button 的 onClick 变乱：处理用户提交的猜测或重置游戏。
  

4. 游戏逻辑

• handleGuess 方法：根据用户输入判定猜测结果，并更新提示信息。
  
• resetGame 方法：重置目的数字和游戏状态。
  

---

5. 运行项目

• 点击 DevEco Studio 工具栏上的“Run”按钮，选择一个模仿器或真机设备运行项目。
  
• 你将看到一个简单的猜数字游戏界面：
  
  
  
  
  
  • 输入框中输入数字并点击“提交猜测”按钮，程序会提示猜测结果。                                  

    
    
    
  • 点击“重新开始”按钮，可以重新天生目的数字并重置游戏状态。 
    
  
  

关键知识点

1. ArkUI 组件

• Text：用于体现文本。
  
• TextInput：用于接收用户输入。
  
• Button：用于触发点击变乱。
  
• Column：用于垂直布局。
  

2. 状态管理

• 使用 @State 装饰器声明状态变量，ArkUI 会自动监听这些变量的变化并更新界面。
  

3. 变乱处理

• onChange：监听输入内容的变化。
  
• onClick：监听按钮的点击变乱。
  

4. 布局与样式

• 使用 width、height、padding 等属性设置组件的大小和间距。
  
• 使用 fontSize、fontColor 等属性设置文本样式。
  

总结

通过这个猜数字游戏项目，信赖你已经掌握了 ArkUI 的根本开发流程，包括状态管理、变乱处理、组件布局等核心概念。盼望本文对你学习 ArkUI 开发有所资助！





免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。