【鸿蒙开发实战】HarmonyOS单词库应用

luxy20042025-12-26 15:44

核心功能：

  1. 添加单词：输入英文单词和中文释义

  2. 删除单词：每个单词项都有删除按钮

  3. 搜索功能：实时搜索单词或释义

  4. 统计信息：显示单词总数

界面特点：

  • 简洁的Material Design风格

  • 两种视图模式：列表视图和添加视图

  • 响应式布局，适配不同屏幕

  • 实时搜索过滤

  • 添加示例单词按钮

使用说明：

  1. 点击"添加新单词"切换到添加视图

  2. 输入英文单词和中文释义

  3. 点击"添加单词"保存

  4. 在列表视图中可以删除单词或搜索单词

完整代码

复制代码 
// WordsLibrary.ets
import { promptAction } from '@ohos.promptAction';
import { display } from '@ohos.display';

// 定义单词数据模型
class WordItem {
  id: number;
  word: string;
  meaning: string;
  date: string;

  constructor(id: number, word: string, meaning: string) {
    this.id = id;
    this.word = word;
    this.meaning = meaning;
    this.date = new Date().toLocaleString();
  }
}

@Entry
@Component
struct WordsLibrary {
  // 状态管理
  @State words: WordItem[] = [];
  @State inputWord: string = '';
  @State inputMeaning: string = '';
  @State searchText: string = '';
  @State currentView: string = 'list'; // 'list' 或 'add'

  // 添加单词
  addWord() {
    if (!this.inputWord.trim() || !this.inputMeaning.trim()) {
      promptAction.showToast({ message: '请输入完整的单词和释义' });
      return;
    }

    const newWord = new WordItem(
      Date.now(),
      this.inputWord.trim(),
      this.inputMeaning.trim()
    );

    this.words = [newWord, ...this.words];
    this.inputWord = '';
    this.inputMeaning = '';
    promptAction.showToast({ message: '添加成功' });
    this.currentView = 'list';
  }

  // 删除单词
  deleteWord(id: number) {
    this.words = this.words.filter(item => item.id !== id);
    promptAction.showToast({ message: '删除成功' });
  }

  // 获取显示的单词列表（支持搜索）
  getDisplayWords(): WordItem[] {
    if (!this.searchText.trim()) {
      return this.words;
    }
    const search = this.searchText.toLowerCase().trim();
    return this.words.filter(item =>
      item.word.toLowerCase().includes(search) ||
      item.meaning.toLowerCase().includes(search)
    );
  }

  // 获取统计信息
  getStats(): string {
    return `共 ${this.words.length} 个单词`;
  }

  build() {
    Column() {
      // 标题栏
      Row({ space: 10 }) {
        Text('单词库')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.Blue)

        Text(this.getStats())
          .fontSize(14)
          .fontColor(Color.Gray)
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .padding(15)

      // 顶部按钮
      Row({ space: 20 }) {
        Button(this.currentView === 'list' ? '单词列表' : '返回列表')
          .onClick(() => {
            this.currentView = 'list';
          })
          .backgroundColor(this.currentView === 'list' ? Color.Blue : Color.Gray)

        Button('添加新单词')
          .onClick(() => {
            this.currentView = 'add';
          })
          .backgroundColor(this.currentView === 'add' ? Color.Blue : Color.Gray)
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .padding(10)

      // 搜索栏（仅在列表视图显示）
      if (this.currentView === 'list') {
        Row() {
          TextInput({ placeholder: '搜索单词或释义...' })
            .width('80%')
            .height(40)
            .onChange((value: string) => {
              this.searchText = value;
            })

          if (this.searchText) {
            Button('✕')
              .width(40)
              .height(40)
              .fontSize(12)
              .onClick(() => {
                this.searchText = '';
              })
          }
        }
        .width('90%')
        .padding(10)
        .borderRadius(20)
        .backgroundColor(Color.White)
        .shadow({ radius: 2, color: Color.Gray, offsetX: 1, offsetY: 1 })
      }

      // 主要内容区域
      if (this.currentView === 'list') {
        this.buildWordList();
      } else {
        this.buildAddForm();
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.LightGray)
    .padding(10)
  }

  // 构建单词列表
  @Builder
  buildWordList() {
    const displayWords = this.getDisplayWords();

    if (displayWords.length === 0) {
      Column() {
        Image($r('app.media.icon'))
          .width(100)
          .height(100)
          .margin({ bottom: 20 })

        Text(this.searchText ? '未找到相关单词' : '暂无单词，点击"添加新单词"开始学习')
          .fontSize(16)
          .fontColor(Color.Gray)
          .textAlign(TextAlign.Center)
      }
      .width('100%')
      .height('60%')
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)
      return;
    }

    List({ space: 10 }) {
      ForEach(displayWords, (item: WordItem) => {
        ListItem() {
          Column({ space: 5 }) {
            // 单词和释义
            Row() {
              Text(item.word)
                .fontSize(18)
                .fontWeight(FontWeight.Bold)
                .fontColor(Color.Black)

              Text(`(${new Date(item.date).toLocaleDateString()})`)
                .fontSize(12)
                .fontColor(Color.Gray)
                .margin({ left: 10 })
            }
            .width('100%')
            .justifyContent(FlexAlign.Start)

            Text(item.meaning)
              .fontSize(16)
              .fontColor(Color.DarkGray)
              .width('100%')
              .textAlign(TextAlign.Start)

            // 操作按钮
            Row({ space: 20 }) {
              Button('删除')
                .width(60)
                .height(30)
                .fontSize(12)
                .backgroundColor(Color.Red)
                .fontColor(Color.White)
                .onClick(() => this.deleteWord(item.id))
            }
            .width('100%')
            .justifyContent(FlexAlign.End)
            .margin({ top: 10 })
          }
          .padding(15)
          .width('100%')
          .backgroundColor(Color.White)
          .borderRadius(10)
          .shadow({ radius: 2, color: Color.Gray, offsetX: 1, offsetY: 1 })
        }
      }, (item: WordItem) => item.id.toString())
    }
    .width('100%')
    .height('75%')
    .margin({ top: 10 })
  }

  // 构建添加表单
  @Builder
  buildAddForm() {
    Column({ space: 20 }) {
      // 单词输入
      Column({ space: 5 }) {
        Text('单词')
          .fontSize(16)
          .fontColor(Color.Black)
          .width('90%')
          .textAlign(TextAlign.Start)

        TextInput({ placeholder: '输入英文单词' })
          .width('90%')
          .height(50)
          .fontSize(18)
          .onChange((value: string) => {
            this.inputWord = value;
          })
          .backgroundColor(Color.White)
          .borderRadius(10)
          .padding(10)
      }

      // 释义输入
      Column({ space: 5 }) {
        Text('释义')
          .fontSize(16)
          .fontColor(Color.Black)
          .width('90%')
          .textAlign(TextAlign.Start)

        TextInput({ placeholder: '输入中文释义' })
          .width('90%')
          .height(50)
          .fontSize(18)
          .onChange((value: string) => {
            this.inputMeaning = value;
          })
          .backgroundColor(Color.White)
          .borderRadius(10)
          .padding(10)
      }

      // 添加按钮
      Button('添加单词')
        .width('90%')
        .height(50)
        .fontSize(18)
        .backgroundColor(Color.Blue)
        .fontColor(Color.White)
        .onClick(() => this.addWord())
        .margin({ top: 30 })

      // 示例单词
      Column({ space: 10 }) {
        Text('示例：')
          .fontSize(14)
          .fontColor(Color.Gray)

        Row({ space: 20 }) {
          Button('Apple')
            .onClick(() => {
              this.inputWord = 'Apple';
              this.inputMeaning = '苹果';
            })
          Button('Book')
            .onClick(() => {
              this.inputWord = 'Book';
              this.inputMeaning = '书';
            })
          Button('Computer')
            .onClick(() => {
              this.inputWord = 'Computer';
              this.inputMeaning = '计算机';
            })
        }
      }
      .margin({ top: 30 })
    }
    .width('100%')
    .padding(20)
    .backgroundColor(Color.White)
    .borderRadius(15)
    .shadow({ radius: 5, color: Color.Gray, offsetX: 2, offsetY: 2 })
    .margin({ top: 20 })
  }
}

入门鸿蒙开发又怕花冤枉钱?别错过!现在能免费系统学 -- 从 ArkTS 面向对象核心的类和对象、继承多态，到吃透鸿蒙开发关键技能，还能冲刺鸿蒙基础 +高级开发者证书，更惊喜的是考证成功还送好礼!快加入我的鸿蒙班，一起从入门到精通，班级链接:点击https://developer.huawei.com/consumer/cn/training/classDetail/b7365031334e4353a9a0fd6785bb0791?type=1?ha_source=hmosclass\&ha_sourceId=89000248免费进入

相关推荐
2501_946224312 小时前
旅行记录应用关于应用 - Cordova & OpenHarmony 混合开发实战
javascript·harmonyos·harvester
xianjixiance_3 小时前
Flutter Background Isolate Channels OpenHarmony 适配指南
华为·harmonyos
luxy20045 小时前
【鸿蒙开发实战】HarmonyOS网络请求简化示例
华为·harmonyos
音浪豆豆_Rachel6 小时前
Flutter鸿蒙化之深入解析Pigeon非空字段设计：non_null_fields.dart全解
flutter·harmonyos
wtrees_松阳7 小时前
【弦断处见真章】：鸿蒙UI三重境之《UIContext》心法探幽
ui·华为·harmonyos
子榆.7 小时前
Flutter 与开源鸿蒙（OpenHarmony）实时音视频通话实战：基于 AVSession 与 Native 音视频栈构建安全通信应用
flutter·开源·harmonyos
Darsunn7 小时前
鸿蒙ArkUI组件通信专家：@Param装饰器的奇幻漂流
harmonyos
xianjixiance_7 小时前
Flutter跨平台向量数学库vector_math鸿蒙化使用指南
flutter·华为·harmonyos
Archilect7 小时前
鸿蒙Tab实战03 - build方法200行怎么优化？AttributeModifier模式实战
harmonyos
热门推荐
01GitHub 镜像站点02从快手“12·22”直播攻击事件看：一次教科书式的业务层饱和攻击033D 圣诞树网页代码04UV安装并设置国内源05在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）06Linux下V2Ray安装配置指南07Gemini3 生成的基于手势控制3D粒子圣诞树08解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题09开源分享 | 超浪漫 3D 圣诞树立体动画（附零基础使用教程）10Claude Code Skills 实用使用手册