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

核心功能：

添加单词：输入英文单词和中文释义
删除单词：每个单词项都有删除按钮
搜索功能：实时搜索单词或释义
统计信息：显示单词总数

界面特点：

简洁的Material Design风格
两种视图模式：列表视图和添加视图
响应式布局，适配不同屏幕
实时搜索过滤
添加示例单词按钮

使用说明：

点击"添加新单词"切换到添加视图
输入英文单词和中文释义
点击"添加单词"保存
在列表视图中可以删除单词或搜索单词

完整代码

复制代码

// 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免费进入