pan/pixelheros
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): 修复卡片放大缩小时布局错位问题

Browse Source 
调整卡片预制件中名字节点的位置偏移量，并在CardComp中为所有相关UI节点添加Widget组件的updateAlignment调用，确保尺寸变化后子元素能正确对齐。
This commit is contained in:
walkpan
2026-04-21 08:36:47 +08:00
parent 0829b0bc9d
commit 6ff01c9bb2
2 changed files with 107 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/resources/gui/element/card.prefab
View File

@@ -3044,7 +3044,7 @@
"_lpos": {
"__type__": "cc.Vec3",
"x": 0,
"y": 70,
"y": -66.482,
"z": 0
},
"_lrot": {
@@ -3182,7 +3182,7 @@
"_target": null,
"_left": 0,
"_right": 0,
"_top": 30,
"_top": 166.482,
"_bottom": 0,
"_horizontalCenter": 0,
"_verticalCenter": 0,

120
assets/script/game/map/CardComp.ts
View File

@@ -20,7 +20,7 @@
* - smc.vmdata.mission_data —— 读写局内金币
*/
import { mLogger } from "../common/Logger";
import { _decorator, Animation, AnimationClip, EventTouch, Label, Node, NodeEventType, Sprite, SpriteAtlas, Tween, tween, UIOpacity, Vec3, resources, Light, UITransform } from "cc";
import { _decorator, Animation, AnimationClip, EventTouch, Label, Node, NodeEventType, Sprite, SpriteAtlas, Tween, tween, UIOpacity, Vec3, resources, Light, UITransform, Widget } from "cc";
import { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
import { CardConfig, CardType, SpecialRefreshCardList, SpecialUpgradeCardList, CKind, CardPoolList } from "../common/config/CardSet";
@@ -695,42 +695,82 @@ export class CardComp extends CCComp {
const uiTrans = this.node.getComponent(UITransform);
if (uiTrans) {
uiTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
const widget = this.node.getComponent(Widget);
if (widget) widget.updateAlignment();
}
// 同时修改背景节点和边框节点的尺寸
if (this.BG_node) {
const bgTrans = this.BG_node.getComponent(UITransform);
if (bgTrans) bgTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
if (bgTrans) {
bgTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
const widget = this.BG_node.getComponent(Widget);
if (widget) widget.updateAlignment();
}
this.BG_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform);
if (childTrans) childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
if (childTrans) {
childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
const widget = child.getComponent(Widget);
if (widget) widget.updateAlignment();
}
});
}
if (this.HF_node) {
const hfTrans = this.HF_node.getComponent(UITransform);
if (hfTrans) hfTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
if (hfTrans) {
hfTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
const widget = this.HF_node.getComponent(Widget);
if (widget) widget.updateAlignment();
}
this.HF_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform);
if (childTrans) childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
if (childTrans) {
childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
const widget = child.getComponent(Widget);
if (widget) widget.updateAlignment();
}
});
}
if (this.NF_node) {
const nfTrans = this.NF_node.getComponent(UITransform);
if (nfTrans) nfTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
if (nfTrans) {
nfTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
const widget = this.NF_node.getComponent(Widget);
if (widget) widget.updateAlignment();
}
this.NF_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform);
if (childTrans) childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
if (childTrans) {
childTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
const widget = child.getComponent(Widget);
if (widget) widget.updateAlignment();
}
});
}
const hbNode = this.node.getChildByName("HB");
if (hbNode) {
const hbTrans = hbNode.getComponent(UITransform);
if (hbTrans) hbTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
if (hbTrans) {
hbTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
const widget = hbNode.getComponent(Widget);
if (widget) widget.updateAlignment();
}
}
// 触发布局刷新，确保其所有子节点（比如右上角的cost、名字等）依赖 Widget 的节点重新对齐
this.node.children.forEach(child => {
const widget = child.getComponent(Widget);
if (widget) widget.updateAlignment();
child.children.forEach(subChild => {
const subWidget = subChild.getComponent(Widget);
if (subWidget) subWidget.updateAlignment();
});
});
if(this.card_type===CardType.Hero){
// 英雄卡：显示英雄名 + 星级 + AP/HP
const hero = HeroInfo[this.card_uuid];
@@ -789,6 +829,12 @@ export class CardComp extends CCComp {
// ---- 费用标签 ----
this.setLabel(this.cost_node, `${this.card_cost}`);
// ---- 名字节点位置调整 ----
if (this.name_node) {
const currentPos = this.name_node.position;
this.name_node.setPosition(currentPos.x, this.isEnlarged ? 8 : -70, currentPos.z);
}
// ---- 图标 ----
const iconNode = this.icon_node as Node;
if (this.card_type === CardType.Hero) {
@@ -877,35 +923,79 @@ export class CardComp extends CCComp {
const uiTrans = this.node.getComponent(UITransform);
if (uiTrans) {
uiTrans.setContentSize(170, 230);
const widget = this.node.getComponent(Widget);
if (widget) widget.updateAlignment();
}
if (this.BG_node) {
const bgTrans = this.BG_node.getComponent(UITransform);
if (bgTrans) bgTrans.setContentSize(170, 230);
if (bgTrans) {
bgTrans.setContentSize(170, 230);
const widget = this.BG_node.getComponent(Widget);
if (widget) widget.updateAlignment();
}
this.BG_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform);
if (childTrans) childTrans.setContentSize(170, 230);
if (childTrans) {
childTrans.setContentSize(170, 230);
const widget = child.getComponent(Widget);
if (widget) widget.updateAlignment();
}
});
}
if (this.HF_node) {
const hfTrans = this.HF_node.getComponent(UITransform);
if (hfTrans) hfTrans.setContentSize(170, 230);
if (hfTrans) {
hfTrans.setContentSize(170, 230);
const widget = this.HF_node.getComponent(Widget);
if (widget) widget.updateAlignment();
}
this.HF_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform);
if (childTrans) childTrans.setContentSize(170, 230);
if (childTrans) {
childTrans.setContentSize(170, 230);
const widget = child.getComponent(Widget);
if (widget) widget.updateAlignment();
}
});
}
if (this.NF_node) {
const nfTrans = this.NF_node.getComponent(UITransform);
if (nfTrans) nfTrans.setContentSize(170, 230);
if (nfTrans) {
nfTrans.setContentSize(170, 230);
const widget = this.NF_node.getComponent(Widget);
if (widget) widget.updateAlignment();
}
this.NF_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform);
if (childTrans) childTrans.setContentSize(170, 230);
if (childTrans) {
childTrans.setContentSize(170, 230);
const widget = child.getComponent(Widget);
if (widget) widget.updateAlignment();
}
});
}
const hbNode = this.node.getChildByName("HB");
if (hbNode) {
const hbTrans = hbNode.getComponent(UITransform);
if (hbTrans) hbTrans.setContentSize(170, 230);
if (hbTrans) {
hbTrans.setContentSize(170, 230);
const widget = hbNode.getComponent(Widget);
if (widget) widget.updateAlignment();
}
}
this.node.children.forEach(child => {
const widget = child.getComponent(Widget);
if (widget) widget.updateAlignment();
child.children.forEach(subChild => {
const subWidget = subChild.getComponent(Widget);
if (subWidget) subWidget.updateAlignment();
});
});
if (this.name_node) {
const currentPos = this.name_node.position;
this.name_node.setPosition(currentPos.x, -70, currentPos.z);
}
this.iconVisualToken += 1;
this.setLabel(this.name_node, "");