「Mac畅玩鸿蒙与硬件51」UI互动应用篇28 - 模拟记账应用 ...

本篇教程将先容如何创建一个模拟记账应用，通过账单输入、动态列表展示和实时统计功能，学习接口定义和组件间的数据交互。

---

关键词

• UI互动应用
  
• 接口定义
  
• 动态列表
  
• 实时统计
  
• 数据交互
  

---

一、功能说明

模拟记账应用包含以下功能：

• 账单输入：用户可以输入账单名称和金额。
  
• 账单列表展示：动态展示输入的账单内容。
  
• 账单移除：支持删除指定账单。
  
• 总金额统计：实时统计账单总金额并动态展示。
  

---

二、所需组件

• @Entry 和 @Component 装饰器
  
• TextInput 和 Button 组件完成账单输入与操作
  
• List 和 ListItem 组件用于账单展示
  
• Text 和 Image 组件用于展示账单内容、总金额及图片装饰
  
• @State 修饰符用于状态管理
  

---

三、项目结构

• 项目名称：AccountingApp
  
• 自定义组件名称：AccountingPage
  
• 代码文件：BillInterface.ets、AccountingPage.ets、Index.ets
  

---

四、代码实现

1. 定义账单接口

1. // 文件名：BillInterface.ets
3. export interface Bill {
4.   name: string; // 账单名称
5.   amount: number; // 账单金额
6. }

复制代码

---

2. 模拟记账页面代码

1. // 文件名：AccountingPage.ets
3. import { Bill } from './BillInterface';
5. @Component
6. export struct AccountingPage {
7.   @State billName: string = ''; // 当前账单名称
8.   @State billAmount: number | null = null; // 当前账单金额
9.   @State bills: Bill[] = []; // 账单列表
10.   @State totalAmount: number = 0; // 总金额
12.   // 添加账单
13.   addBill(): void {
14.     if (this.billName && this.billAmount !== null && this.billAmount > 0) {
15.       this.bills.push({ name: this.billName, amount: this.billAmount });
16.       this.updateTotalAmount();
17.       this.clearInput();
18.     }
19.   }
21.   // 删除账单
22.   removeBill(index: number): void {
23.     this.bills.splice(index, 1);
24.     this.updateTotalAmount();
25.   }
27.   // 更新总金额
28.   updateTotalAmount(): void {
29.     this.totalAmount = this.bills.reduce((sum, bill) => sum + bill.amount, 0);
30.   }
32.   // 清空输入框
33.   clearInput(): void {
34.     this.billName = '';
35.     this.billAmount = null;
36.   }
38.   build(): void {
39.     Column({ space: 20 }) {
40.       Text('模拟记账应用')
41.         .fontSize(24)
42.         .fontWeight(FontWeight.Bold)
43.         .alignSelf(ItemAlign.Center);
45.       // 输入账单
46.       Row({ space: 10 }) {
47.         TextInput({
48.           placeholder: '账单名称',
49.           text: this.billName
50.         })
51.           .width(200)
52.           .onChange((value: string) => (this.billName = value));
54.         TextInput({
55.           placeholder: '账单金额',
56.           text: this.billAmount?.toString() || ''
57.         })
58.           .width(150)
59.           .type(InputType.Number)
60.           .onChange((value: string) => (this.billAmount = parseFloat(value)));
62.         Button('添加')
63.           .onClick(() => this.addBill())
64.           .width(80)
65.           .height(40);
66.       }
67.       .alignSelf(ItemAlign.Center);
69.       // 账单列表
70.       Text('账单列表')
71.         .fontSize(20)
72.         .margin({ top: 20 });
74.       List({ space: 10 }) {
75.         ForEach(this.bills, (bill: Bill, index: number) => {
76.           ListItem() {
77.             Row({ space: 10 }) {
78.               Text(`${bill.name} - ¥${bill.amount}`)
79.                 .fontSize(18);
80.               Button('删除')
81.                 .onClick(() => this.removeBill(index))
82.                 .width(80);
83.             }
84.           }
85.         });
86.       }
87.       .width('100%');
89.       // 显示总金额
90.       Text(`总金额: ¥${this.totalAmount}`)
91.         .fontSize(20)
92.         .margin({ top: 20 })
93.       Image($r('app.media.cat')) // 添加一张图片
94.         .width(305)
95.         .height(360);
96.     }
97.     .padding(20)
98.     .width('100%')
99.     .height('100%');
100.   }
101. }

复制代码

---

3. 主入口文件

1. // 文件名：Index.ets
3. import { AccountingPage } from './AccountingPage';
5. @Entry
6. @Component
7. struct Index {
8.   build() {
9.     Column() {
10.       AccountingPage() // 调用记账页面
11.     }
12.     .padding(20);
13.   }
14. }

复制代码

---

   结果示例：通过输入账单名称与金额，并添加到列表中，实时查看账单总金额。
  结果展示：
  

  

---

五、代码解读

• 接口定义
  
  
  
  • 使用 Bill 接口统一账单数据结构，包含 name 和 amount 属性，确保账单管理的范例安全性。
    
  
  
• 账单输入与校验
  
  
  
  • 使用 TextInput 获取账单名称与金额，校验金额是否有用（大于零）。
    
  
  
• 动态列表展示
  
  
  
  • 使用 List 和 ListItem 动态展示账单内容，支持实时添加与移除。
    
  
  
• 实时总金额统计
  
  
  
  • 使用 reduce 函数统计账单总金额，并在界面实时更新展示。
    
  
  
• 图片装饰
  
  
  
  • 添加 Image 组件作为装饰，提拔界面的趣味性。
    
  
  

---

六、优化发起

• 增长账单分类功能，支持按类别查看账单记载。
  
• 实现总金额折扣盘算，增强功能实用性。
  
• 提供数据导出功能，便于账单记载保存。
  

---

七、结果展示

• 账单输入与展示：实时操作账单内容，界面动态更新。
  
• 总金额统计：账单金额实时统计并显示在界面顶部。
  
• 界面装饰：图片增强视觉吸引力。
  

---

八、相关知识点

• 「Mac畅玩鸿蒙与硬件13」鸿蒙UI组件篇3 - TextInput组件获取用户输入
  
• 「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List和Grid组件展示数据列表
  

---

小结

通过本篇教程，学习了如何使用接口定义账单结构，并连合鸿蒙组件实现动态记账功能。用户可以掌握列表操作、实时统计与界面装饰等开发本领。

---

下一篇预告

在下一篇「UI互动应用篇29 - 模拟火车票查询体系」中，将实现一个模拟火车票查询体系，通过条件筛选展示符合条件的车次信息。

---

上一篇： 「Mac畅玩鸿蒙与硬件50」UI互动应用篇27 - 水果掉落小游戏

下一篇： 「Mac畅玩鸿蒙与硬件52」UI互动应用篇29 - 模拟火车票查询体系

---

作者：SoraLuna
链接：https://www.nutpi.net/thread?topicId=659
來源：坚果派
著作权归作者全部。商业转载请联系作者获得授权，非商业转载请注明出处。

---

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