「Mac畅玩鸿蒙与硬件51」UI互动应用篇28

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

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

在这里插入图片描述

关键词

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

一、功能说明

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

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

二、所需组件

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

三、项目结构

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

四、代码实现

1. 定义账单接口

// 文件名：BillInterface.ets

export interface Bill {
  name: string; // 账单名称
  amount: number; // 账单金额
}

2. 模拟记账页面代码

// 文件名：AccountingPage.ets

import { Bill } from './BillInterface';

@Component
export struct AccountingPage {
  @State billName: string = ''; // 当前账单名称
  @State billAmount: number | null = null; // 当前账单金额
  @State bills: Bill[] = []; // 账单列表
  @State totalAmount: number = 0; // 总金额

  // 添加账单
  addBill(): void {
    if (this.billName && this.billAmount !== null && this.billAmount > 0) {
      this.bills.push({ name: this.billName, amount: this.billAmount });
      this.updateTotalAmount();
      this.clearInput();
    }
  }

  // 删除账单
  removeBill(index: number): void {
    this.bills.splice(index, 1);
    this.updateTotalAmount();
  }

  // 更新总金额
  updateTotalAmount(): void {
    this.totalAmount = this.bills.reduce((sum, bill) => sum + bill.amount, 0);
  }

  // 清空输入框
  clearInput(): void {
    this.billName = '';
    this.billAmount = null;
  }

  build(): void {
    Column({ space: 20 }) {
      Text('模拟记账应用')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .alignSelf(ItemAlign.Center);

      // 输入账单
      Row({ space: 10 }) {
        TextInput({
          placeholder: '账单名称',
          text: this.billName
        })
          .width(200)
          .onChange((value: string) => (this.billName = value));

        TextInput({
          placeholder: '账单金额',
          text: this.billAmount?.toString() || ''
        })
          .width(150)
          .type(InputType.Number)
          .onChange((value: string) => (this.billAmount = parseFloat(value)));

        Button('添加')
          .onClick(() => this.addBill())
          .width(80)
          .height(40);
      }
      .alignSelf(ItemAlign.Center);

      // 账单列表
      Text('账单列表')
        .fontSize(20)
        .margin({ top: 20 });

      List({ space: 10 }) {
        ForEach(this.bills, (bill: Bill, index: number) => {
          ListItem() {
            Row({ space: 10 }) {
              Text(`${bill.name} - ¥${bill.amount}`)
                .fontSize(18);
              Button('删除')
                .onClick(() => this.removeBill(index))
                .width(80);
            }
          }
        });
      }
      .width('100%');

      // 显示总金额
      Text(`总金额: ¥${this.totalAmount}`)
        .fontSize(20)
        .margin({ top: 20 })
      Image($r('app.media.cat')) // 添加一张图片
        .width(305)
        .height(360);
    }
    .padding(20)
    .width('100%')
    .height('100%');
  }
}

3. 主入口文件

// 文件名：Index.ets

import { AccountingPage } from './AccountingPage';

@Entry
@Component
struct Index {
  build() {
    Column() {
      AccountingPage() // 调用记账页面
    }
    .padding(20);
  }
}