LibGDX中按钮缩放后单元格对齐失效问题求助

我在缩小「Forgot Password:(」TextButton后，发现它所在的Table单元格并未随之缩小，导致按钮内容偏移到单元格左下角，尝试设置单元格对齐也没有效果，想问问哪里操作有误或者遗漏了什么？

我的代码如下：

Table tableRoot = new Table(); 
tableRoot.setFillParent(true); 
tableRoot.padTop(40); 
tableRoot.align(Align.center); 

final Label hint = new Label("Wrong password", Utility.UI_SKIN, "default-text"); 
hint.setAlignment(Align.center); 
hint.setFontScale(1.3f); 

final Label question = new Label("Return to login screen?", Utility.UI_SKIN, "default-text"); 
question.setAlignment(Align.center); 

Table table = new Table(); 
final TextButton yesButton = new TextButton("Yes", Utility.UI_SKIN, "login-window-button"); 
final TextButton forgotButton = new TextButton("Forgot password:(", Utility.UI_SKIN, "login-window-button"); 

forgotButton.setTransform(true); 
forgotButton.setScale(0.7f); 

table.add(yesButton).pad(10).row(); 
table.add(forgotButton).pad(10).align(Align.center); // 这里的对齐没生效

tableRoot.add(hint).growX().row(); 
tableRoot.add().grow().row(); 
tableRoot.add(question).growX().padBottom(20).row(); 
tableRoot.add(table).growX().row(); 
tableRoot.add().grow().row(); 
tableRoot.add().grow().row(); 
tableRoot.pack(); 

问题根源 #

你遇到的核心问题是：LibGDX的Table布局系统是基于组件的原始尺寸计算的，而setScale()属于视觉变换，不会修改组件在布局逻辑里的实际大小。

也就是说，你给forgotButton设置了setScale(0.7f)后，按钮只是在视觉上变小了，但Table依然按照按钮未缩放前的原始尺寸来分配单元格空间。这就导致一个大单元格里放了一个缩小的按钮，即使你设置了单元格align(Align.center)，按钮也只会在大单元格的左上角（因为按钮的碰撞盒/布局尺寸还是原来的大小，缩放只是视觉层的变化），看起来就像偏移到了左下角。

两种解决方案 #

方案1：修改按钮的实际布局尺寸（推荐）

不要用视觉缩放，而是直接调整按钮的内容大小，让组件的实际尺寸和视觉尺寸一致，这样Table就能正确适配单元格大小：

// 直接调整按钮内部标签的字体缩放，这会改变按钮的实际布局尺寸
forgotButton.getLabel().setFontScale(0.7f);
// 不需要再设置setTransform和setScale了

如果你的项目用了皮肤文件，更规范的做法是在皮肤里定义一个小尺寸的按钮样式（比如login-window-button-small），直接用这个样式创建按钮，避免硬编码缩放值。

方案2：保留缩放，让按钮在单元格内真正居中

如果你一定要用setScale()的视觉缩放，需要手动让按钮在单元格内居中，同时修正单元格的尺寸匹配缩放后的按钮：

forgotButton.setTransform(true);
forgotButton.setScale(0.7f);
// 确保按钮内部的标签自身是居中的
forgotButton.getLabel().setAlignment(Align.center);
// 设置单元格对齐，并且手动指定单元格大小为缩放后的按钮尺寸
table.add(forgotButton).pad(10).center()
    .size(forgotButton.getWidth() * 0.7f, forgotButton.getHeight() * 0.7f);

不过这种方式比较死板，当按钮文本或皮肤样式变化时，手动计算的尺寸容易出错，所以还是方案1更稳妥。

补充说明 #

你之前写的align(Align.center)没生效，是因为这个方法是设置单元格内组件的对齐方式，但组件的布局尺寸还是原始大小——相当于一个大盒子里放了一个缩小的小盒子，即使大盒子设置了居中，小盒子本身的锚点还是左上角，所以看起来还是偏移。只有让组件的实际尺寸和视觉尺寸匹配，或者手动调整组件在单元格内的位置，才能解决这个问题。

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