JavaFX按钮点击/获焦后轻微缩小问题求助

嘿，我刚好遇到过类似的问题！你观察得没错，这个按钮缩小的现象确实和按钮获得焦点有关——JavaFX的按钮默认在获取焦点时会显示一个焦点边框，这个边框会占用按钮内部的空间，看起来就像是按钮“缩小”了。

下面给你几个彻底解决的方案，比用分隔符掩盖要靠谱得多：

方案1：通过CSS移除焦点边框 #

直接在你的按钮样式里添加焦点状态的配置，把焦点相关的样式去掉就行：

.button {
    -fx-border-color: null;
    -fx-border-width: 0;
    -fx-background-color: #2c3cff;
    -fx-fill: true;
    -fx-pref-height: 100;
    -fx-pref-width: 320;
    -fx-text-fill: #b9b9b9;
    -fx-border-radius: 0;
    -fx-min-width: 320;
    -fx-min-height: 100;
    -fx-background-radius: 0;
    -fx-animated: false;
}

/* 新增这段，消除焦点状态的视觉变化 */
.button:focused {
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
    -fx-padding: 0; /* 保证内边距和正常状态完全一致 */
}

原理很简单：-fx-focus-color和-fx-faint-focus-color是控制焦点边框的颜色，设为透明就看不到了；同时锁定内边距，避免焦点状态下内边距变化导致的尺寸偏移。

方案2：禁用按钮的焦点遍历 #

如果你的按钮不需要支持键盘焦点导航（比如只需要鼠标点击操作），可以直接在Java代码里禁用焦点遍历：

// 替换成你的按钮实例名
changePasswordBtn.setFocusTraversable(false);
adminFunctionsBtn.setFocusTraversable(false);

这样按钮被点击后不会获得焦点，自然就不会触发导致缩小的焦点样式了。

方案3：统一所有状态的尺寸和内边距 #

有时候默认样式在不同状态（正常、hover、focused、pressed）下的内边距或尺寸有细微差异，也会造成视觉上的缩小。你可以统一所有状态的参数：

.button, .button:focused, .button:hover, .button:pressed {
    -fx-padding: 0;
    -fx-pref-height: 100;
    -fx-pref-width: 320;
    -fx-min-width: 320;
    -fx-min-height: 100;
}

这样不管按钮处于什么状态，尺寸和内边距都完全一致，就不会出现忽大忽小的问题了。

你提到的用分隔符掩盖的方法确实能临时应付，但上面这几个方案都是从根源解决问题的。如果需要保留按钮的焦点功能（比如支持键盘Tab切换），优先选方案1；如果不需要焦点，方案2最省事。

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