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

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

@@ -20,7 +20,7 @@
* - smc.vmdata.mission_data —— 读写局内金币 * - smc.vmdata.mission_data —— 读写局内金币
*/ */
import { mLogger } from "../common/Logger"; 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 { ecs } from "../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp"; import { CCComp } from "../../../../extensions/oops-plugin-framework/assets/module/common/CCComp";
import { CardConfig, CardType, SpecialRefreshCardList, SpecialUpgradeCardList, CKind, CardPoolList } from "../common/config/CardSet"; 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); const uiTrans = this.node.getComponent(UITransform);
if (uiTrans) { if (uiTrans) {
uiTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230); uiTrans.setContentSize(this.isEnlarged ? 230 : 170, this.isEnlarged ? 300 : 230);
const widget = this.node.getComponent(Widget);
if (widget) widget.updateAlignment();
} }
// 同时修改背景节点和边框节点的尺寸 // 同时修改背景节点和边框节点的尺寸
if (this.BG_node) { if (this.BG_node) {
const bgTrans = this.BG_node.getComponent(UITransform); 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 => { this.BG_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform); 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) { if (this.HF_node) {
const hfTrans = this.HF_node.getComponent(UITransform); 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 => { this.HF_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform); 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) { if (this.NF_node) {
const nfTrans = this.NF_node.getComponent(UITransform); 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 => { this.NF_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform); 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"); const hbNode = this.node.getChildByName("HB");
if (hbNode) { if (hbNode) {
const hbTrans = hbNode.getComponent(UITransform); 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){ if(this.card_type===CardType.Hero){
// 英雄卡：显示英雄名 + 星级 + AP/HP // 英雄卡：显示英雄名 + 星级 + AP/HP
const hero = HeroInfo[this.card_uuid]; const hero = HeroInfo[this.card_uuid];
@@ -789,6 +829,12 @@ export class CardComp extends CCComp {
// ---- 费用标签 ---- // ---- 费用标签 ----
this.setLabel(this.cost_node, `${this.card_cost}`); 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; const iconNode = this.icon_node as Node;
if (this.card_type === CardType.Hero) { if (this.card_type === CardType.Hero) {
@@ -877,35 +923,79 @@ export class CardComp extends CCComp {
const uiTrans = this.node.getComponent(UITransform); const uiTrans = this.node.getComponent(UITransform);
if (uiTrans) { if (uiTrans) {
uiTrans.setContentSize(170, 230); uiTrans.setContentSize(170, 230);
const widget = this.node.getComponent(Widget);
if (widget) widget.updateAlignment();
} }
if (this.BG_node) { if (this.BG_node) {
const bgTrans = this.BG_node.getComponent(UITransform); 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 => { this.BG_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform); 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) { if (this.HF_node) {
const hfTrans = this.HF_node.getComponent(UITransform); 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 => { this.HF_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform); 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) { if (this.NF_node) {
const nfTrans = this.NF_node.getComponent(UITransform); 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 => { this.NF_node.children.forEach(child => {
const childTrans = child.getComponent(UITransform); 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"); const hbNode = this.node.getChildByName("HB");
if (hbNode) { if (hbNode) {
const hbTrans = hbNode.getComponent(UITransform); 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.iconVisualToken += 1;
this.setLabel(this.name_node, ""); this.setLabel(this.name_node, "");