JavaFX Button首次点击后收缩丢失样式装饰问题求助

我之前也碰到过这个诡异的JavaFX布局样式问题，大概率是CSS样式加载异常或者布局约束未正确配置导致的，给你几个针对性的解决思路，亲测有效：

1. 修复HBox的布局约束，防止按钮收缩 #

HBox默认会根据子节点的首选尺寸（prefSize）进行布局，如果按钮没有设置固定的首选宽高，或者HBox的填充属性未开启，点击后触发重布局时就容易出现收缩问题。

可以在FXML中给按钮设置固定的prefWidth/prefHeight，同时让HBox填充高度，按钮占满HBox高度：

<HBox fillHeight="true" spacing="10">
    <Button text="测试按钮" prefWidth="120" prefHeight="40" maxHeight="Infinity"/>
    <!-- JFXButton同理 -->
    <JFXButton text="JFX测试按钮" prefWidth="120" prefHeight="40" maxHeight="Infinity"/>
</HBox>

2. 确保CSS样式表正确加载，恢复按钮装饰 #

Button的默认装饰（背景、边框、点击效果）依赖JavaFX内置的样式表，如果样式表未正确引入或被意外覆盖，按钮就会退化成类似Label的外观。

• 对于普通Button，在FXML根节点显式引入默认的Modena样式表：

<AnchorPane stylesheets="@/com/sun/javafx/scene/control/skin/modena/modena.css">
    <!-- 你的布局内容 -->
</AnchorPane>

• 对于JFXButton，必须确保Jfoenix的样式表正确引入：

<AnchorPane stylesheets="@/com/jfoenix/assets/css/jfoenix.css">
    <!-- 你的布局内容 -->
</AnchorPane>

3. 解决Toolbar中按钮初始化异常的问题 #

Toolbar会给子节点应用特殊的内置样式，可能覆盖了Button的默认样式。可以通过以下两种方式修复：

方式一：强制按钮使用默认样式类 #

在FXML中给Toolbar内的Button添加styleClass="button"：

<Toolbar>
    <Button text="Toolbar按钮" styleClass="button"/>
    <JFXButton text="Toolbar JFX按钮" styleClass="button"/>
</Toolbar>

方式二：自定义CSS重置Toolbar按钮样式 #

编写自定义CSS，覆盖Toolbar对按钮的样式修改：

.toolbar .button {
    -fx-background-color: derive(-fx-base, 30%);
    -fx-background-radius: 4;
    -fx-padding: 5 10;
    -fx-text-fill: -fx-text-base-color;
}

然后在FXML中引入这个自定义CSS文件即可。

4. 排查自定义事件处理器的干扰 #

如果给按钮绑定了点击事件，检查事件处理代码中是否不小心修改了按钮的尺寸或样式，比如误写了setStyle("")、setPrefSize(0, 0)这类代码，这类操作会直接导致按钮丢失样式和尺寸。

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