结构是这样的,一个显示任务进度的UI。
需求:红色文本是未完成,白色文本是需要的总量,如果完成了就显示白色(例如:(1/1)就是纯白色,(0/1)的话就0是红色,其余是白色)。
处理:一共用了4个label,前后括号写死白色(edge1、edge2),cur是红色label,need是白色文本,父节点上加一个layout组件,自动排列(能使用自动组件我一般都不会自己写x(大写的懒人)。
代码:
//正在进行
const cur = this.getCur(); // 当前进度
const need = this.getNeed(); // 需要的总量
if (cur >= need) {
// 已完成
this.labCur.string = '';
this.labNeed.string = `${need}/${need}`;
}
else {
// 未完成
this.labCur.string = `${cur}`;
this.labNeed.string = `/${need}`;
}
问题:因为这个UI是始终显示的,有的时候刷新了会不显示红色文本,但中间有空,belike:
改善:
//正在进行
const cur = this.getCur(); // 当前进度
const need = this.getNeed(); // 需要的总量
if (cur >= need) {
// 已完成
this.labCur.node.active = false;
this.labNeed.string = `${need}/${need}`;
}
else {
// 未完成
this.labCur.node.active = true;
this.labCur.string = `${cur}`;
this.labNeed.string = `/${need}`;
结论:可能是刷新的时候layout组件取不到空字符串label的宽度,刷新不正确,将文本string置空操作改为节点active置false解决