Harmony OS Next应用“丁斗口算”开发记录(11)

第十一节 题目的显示

生成题目后，需要将题目显示在屏幕上。根据屏幕尺寸（手机/平板）不同，显示的题目数量也不同。采用Grid组件盛放题目，每个题目使用@Builder装饰的自定义组件实现。以加减法为例：生成的题目已存储于Data_Add数组中，采用ForEach遍历，代码如下： ForEach(this.arrDataAdd, (item: Data_Add, index: number) => { GridItem() { this.ComAdd(index) } }, (item: Data_Add, index: number) => index.toString()) ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。 在ForEach循环渲染过程中，系统会为每个数组元素生成一个唯一且持久的键值，用于标识对应的组件。当这个键值变化时，ArkUI框架将视为该数组元素已被替换或修改，并会基于新的键值创建一个新的组件。ForEach的的接口有三个参数： 第一个参数：即数据源，为Array类型的数组，这里对应数组Data_Add； 第二个参数为组件生成函数。

• 为数组中的每个元素创建对应的组件。
• item参数：arr数组中的数据项。
• index参数（可选）：arr数组中的数据项索引。 第三个参数：键值生成函数。
• 为数据源arr的每个数组项生成唯一且持久的键值。函数返回值为开发者自定义的键值生成规则。
• item参数：arr数组中的数据项。
• index参数（可选）：arr数组中的数据项索引。 因为是在Grid组件中，因此创建组件时使用了GridItem组件，GridItem组件中装入了自定义的组件ComAdd。 自定义的ComAdd组件如下：

设计思路采用Column组件，具有边框和背景色，内容分为上下两部分。上部是题目，下面是用户输入的数值。多个题目同时显示在屏幕上，选中的题目和非选中的题目，背景色不同，尺寸也不同，代码如下： Column(){ Text(this.arrDataAdd[index].getDataString(this.bDispRlt[index])) .fontSize(this.inputSelect[index]?this.fontSize-4:this.fontSize-6) .width('100%').height('45%') this.ComTextInput(index) } 用户点击该组件，即为选中该题目用于输入答案，其中this.selectedInput用于标记当前选中的题目，用户点击数字键时，更新显示。代码如下： .onClick(()=>{ this.selectedInput = index; for( let i=0;i<this.arrDataAdd.length;i++ ){ this.inputSelect[i] = false; } this.inputSelect[index] = true; }) 点击数字键（含C，<-）两个键时，判断如果是数字键，则更新输入；如果是C/<-键，也做相应处理，代码如下： if (index < 10) { this.textInput[this.selectedInput] += item; } else if (index == 10) { this.textInput[this.selectedInput] = ''; } else if (index == 11) { let str: string = this.textInput[this.selectedInput].substring(0, this.textInput[this.selectedInput].length - 1); this.textInput[this.selectedInput] = str; } 至此，完成了页面题目显示。