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

丁斗科技
发布于 2025-1-15 17:10
浏览
0收藏

第十一节 题目的显示

生成题目后,需要将题目显示在屏幕上。根据屏幕尺寸(手机/平板)不同,显示的题目数量也不同。采用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组件如下:
    Harmony OS Next应用“丁斗口算”开发记录 (11)-鸿蒙开发者社区
    设计思路采用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;
    }
    至此,完成了页面题目显示。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
收藏
回复
举报
回复
    相关推荐