HarmonyOS 鸿蒙Next 如何在Grid中的循环生成的GridItem中的Button点击后只更新该按钮背景颜色
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 回复
将按钮封装成一个组件,内置一个布尔值控制颜色,这样最简单,耦合也低
谢谢,昨天已经处理完了,和你说的思路一致,谢谢!