核心功能：
添加单词：输入英文单词和中文释义
删除单词：每个单词项都有删除按钮
搜索功能：实时搜索单词或释义
统计信息：显示单词总数
界面特点：
简洁的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免费进入
