第十一节 题目的显示
生成题目后,需要将题目显示在屏幕上。根据屏幕尺寸(手机/平板)不同,显示的题目数量也不同。采用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;
}
至此,完成了页面题目显示。