HarmonyOS 鸿蒙Next 如何在Grid中的循环生成的GridItem中的Button点击后只更新该按钮背景颜色

发布于 1周前 作者 nodeper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 如何在Grid中的循环生成的GridItem中的Button点击后只更新该按钮背景颜色

build() {
Column({ space: 20 }) {
Row({ space: 10 }) {
Toggle({ type: ToggleType.Button, isOn: false }) {
Text(this.studyMode)
.fontColor(’#182431’)
.fontSize(12)
}.width(75)
.onChange((isOn: boolean) => {
if (isOn) {
this.studyMode = “学习模式”;
this.isStudyMode = true;
this.promptStr = “点按汉字以显示详细信息”;
} else {
this.studyMode = “测字模式”;
this.isStudyMode = false;
this.promptStr = “点按不认识的汉字以记录”;
}
})


Button(“下一组”)
.type(ButtonType.Capsule)
.onClick(() => {
this.pageNo += 1;
this.dispArray = this.allCC.slice(this.pageNo * this.pageSize, (this.pageNo + 1) * this.pageSize)
})
.fontSize(12)
.height(30)
.width(75)
Button(“上一组”)
.type(ButtonType.Capsule)
.onClick(() => {
if (this.pageNo > 0) {
this.pageNo -= 1;
this.dispArray = this.allCC.slice(this.pageNo * this.pageSize, (this.pageNo + 1) * this.pageSize)
}
})
.fontSize(12)
.height(30)
.width(75)

}.align(Alignment.Center)

Text(this.promptStr)
Grid() {
ForEach(this.dispArray, (item: EduCC, index: number) => {
GridItem() {
Button(item.smp_cc).id(item.pk_cc).backgroundColor(this.btnBackgroundColor)
.onClick((e) => {
console.info(item.smp_cc,e.target)
if (this.isStudyMode) {
this.getUIContext().getRouter().pushUrl({ url: “pages/Index”, params: { “cc”: item.smp_cc } })
} else {
//todo 按当前登录用户记录不认识的汉字到后台保存
this.saveNotRcgnzd(item);
//todo 改变当前按钮显示状态,标示出是认识还是不认识的汉字
  this.btnBackgroundColor= Color.Green;
// 定义一个eventId为1的事件,事件优先级为Low
let event: emitter.InnerEvent = {
eventId: 1,
priority: emitter.EventPriority.LOW
};

let eventData: emitter.EventData = {
data: {
content: item,
id: 1,
isEmpty: false
}
};

// 发送eventId为1的事件,事件内容为eventData
emitter.emit(event, eventData);

}
})
}
})
}.columnsGap(10).rowsGap(15).padding(10).onClick((e)=>{
console.log(“Grid”,e.target)
})
}

}

3 回复
将按钮封装成一个组件,内置一个布尔值控制颜色,这样最简单,耦合也低

谢谢,昨天已经处理完了,和你说的思路一致,谢谢!

在HarmonyOS鸿蒙系统中,若要在Grid布局中循环生成的GridItem的Button点击后仅更新该按钮的背景颜色,可以通过以下方式实现:

  1. 设置按钮点击事件监听器:为每个Button设置点击事件监听器,在监听器中处理背景颜色的更新。

  2. 使用局部变量或标识符:在循环生成GridItem时,为每个Button分配一个唯一的标识符或引用,以便在点击事件中准确识别被点击的Button。

  3. 更新按钮背景颜色:在点击事件监听器中,通过标识符或引用来定位被点击的Button,并调用相应的方法更新其背景颜色。

示例代码片段(伪代码):

for (int i = 0; i < itemCount; i++) {
    GridItem gridItem = new GridItem();
    Button button = new Button();
    button.setId(i); // 设置唯一标识符
    button.setClickedListener(new ClickedListener() {
        @Override
        public void onClick(Component component) {
            Button clickedButton = (Button) component;
            clickedButton.setBackgroundColor(new Color(/*指定颜色值*/));
        }
    });
    gridItem.addComponent(button);
    gridContainer.addComponent(gridItem);
}

注意:上述代码为简化示例,实际开发中需根据具体情况调整。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部