[技术贴]HarmonyOS 鸿蒙Next开发一个背单词软件

[技术贴]HarmonyOS 鸿蒙Next开发一个背单词软件 先创建一个空白应用.选择fa,语言为arkts

删除helloword,添加一个多行文本框

添加一个按钮并绑定事件

更改state值为:

@State word_text:string='Hello 你好\nWorld 世界'

定义两个全局变量数组

let Chinese_words:string[]=[]
let English_words:string[]=[]

设置当前页面的显示隐藏state

@State start_layout:Visibility=Visibility.Visible

在按钮事件里绑定分割文本事件

Button('保存单词')
  .onClick(()=>{
    let words:string[]=[]
    let temp_word:string[]
words=this.word_text.split("\n")
    for (let index = 0; index < words.length; index++) {
      const element = words[index];
   temp_word=  element.split(" ")
      Chinese_words[index]=temp_word[1]
      English_words[index]=temp_word[0]
      console.log(Chinese_words[index])
      console.log(English_words[index])
    }
    this.start_layout=Visibility.Hidden
this.record_words_layout=Visibility.Visible
    console.log(words[0])
    console.log(words[1])
  })

隐藏当前页面,显示一个新的页面

this.start_layout=Visibility.Hidden
this.record_words_layout=Visibility.Visible

新页面的主要元素

Column({
space:20}){
  Text(this.chinese_word)
  TextInput()
.onChange((value:string)=>{
    this.user_word=value
  })
  Row({
space:20}){
    Button('提交')

    Button('刷新')

  }


}

设置内边距

.padding(20)

开始页面设置绝对定位放置被新页面挤出去

.position({x:0,y:0})

设置一个全局变量,用于保存随机显示的单词在数组中的位置

let tips_id:number=0

添加提交按钮事件

Button('提交')
  .onClick(()=>{

    if (English_words[tips_id]==this.user_word) {
      this.chinese_word='恭喜,答对了!'
    }else {
      this.chinese_word='正确答案是:'+English_words[tips_id]
    }
  })

添加刷新按钮事件:

  Button('刷新')
    .onClick(()=>{
      tips_id=Math.floor(Math.random() * Chinese_words.length)
      //console.log(console);
      this.chinese_word=Chinese_words[tips_id]
    })

此处tips_id=Math.floor(Math.random() * Chinese_words.length)是用来生成一个从0到单词数组成员数之间的随机数

至此,一个背单词软件就开发好了,你们可以根据自己的需求逐步添加新的功能.

软件的大致流程时,启动,用户输入或粘贴要背的单词,一行一个,每行格式为英文+空格+中文

输入或粘贴好后,点击完成按钮,即可进入背单词页面.

显示中文,输入框输入对应英文单词,点击提交即可显示对错.

点击刷新即可随机切换下一个单词.