Scene2d框架下Stack组件定位及内部UI元素布局调整问题

实现方案 #

核心修改点 #

• 移除table.center()调用：原代码中占满全屏的Table设置了全局居中对齐，会覆盖子组件的左上对齐配置，删除该行后即可让Stack正常固定在屏幕左上角
• 重构overlay Table布局：将overlay拆分为上下两个等分区域，上半区嵌套子Table放置2个Label，下半区嵌套子Table放置2~3个TextButton，解决原有代码所有控件均分 parchment 高度的问题

修改后完整代码 #

Table table = new Table();
// 移除原有的table.center()，避免覆盖对齐配置
table.setFillParent(true);
table.top().left(); // 全局配置Table内部子组件左上对齐

Stack stack = new Stack();

titleLabel.setFontScale(0.5f);
label1.setFontScale(0.5f);
textButton.getLabel().setFontScale(0.5f);
textButton2.getLabel().setFontScale(0.5f);

parchment.setScaling(Scaling.fill);
stack.add(parchment);

Table overlay = new Table();
// 上半区：放置2个Label
Table labelArea = new Table();
labelArea.add(titleLabel).expand().row();
labelArea.add(label1).expand();
overlay.add(labelArea).grow().row(); // grow()让当前行占满一半可用高度

// 下半区：放置按钮，需要加第三个按钮只要追加row()和add逻辑即可
Table buttonArea = new Table();
buttonArea.add(textButton).expand().row();
buttonArea.add(textButton2).expand();
overlay.add(buttonArea).grow();

stack.add(overlay);

table.add(stack);

stage.addActor(table);

如果需要调整上下区域的高度占比，可在add对应区域时指定高度参数，例如overlay.add(labelArea).height(Value.percentHeight(0.6f, overlay))即可让上半区占60%高度。

内容的提问来源于stack exchange，提问作者Hikoyo