JavaFX8 DatePicker 按钮大小更改

Posted 2023-05-07

【中文标题】JavaFX8 DatePicker 按钮大小更改

【英文标题】：JavaFX8 DatePicker Button size change

【发布时间】：2019-07-04 21:38:42

【问题描述】：

我正在使用具有默认样式的 JavaFX DatePicker。

但是，我想通过添加 scene.getStyleSheets().add("abc.css") 将 CSS 样式应用于此 Scene 中的所有按钮。

效果很好，我申请了：

Button 
    -fx-font-size: 20;
    -fx-font-family: "Arial";
    -fx-pref-width: 300;
    -fx-pref-height: 60;
    -fx-background-radius: 16px;
    -fx-background-color: lightgrey;
    -fx-text-fill: black;

但是，当我添加 DatePicker 时，问题就出现了。 DatePicker 内部有自己的箭头按钮，用于切换月份或年份。我想为这个DatePicker 使用默认样式，但由于它在我的Scene 下，它的按钮从 CSS 中获取按钮样式...（胖按钮）

有没有办法让我从DatePicker 中删除按钮样式以使用默认的DatePicker 样式？我不想从这个场景中删除所有样式，因为我必须自己应用所有其他样式。

这是一张照片：

【参考方案1】：

不幸的是，没有办法阻止将样式应用于具有特定祖先的节点。这需要你

想出一种方法来限制您的样式应用的节点，这种方式不会修改例如的后代。 DatePicker，或 将您修改的属性重置为适用于它们的值modena.css。

你可以使用第二个选项

Button 
    -fx-font-size: 20;
    -fx-font-family: "Arial";
    -fx-pref-width: 300;
    -fx-pref-height: 60;
    -fx-background-radius: 16px;
    -fx-background-color: lightgrey;
    -fx-text-fill: black;


.date-picker-popup > * > .spinner > .button 
    -fx-font-size: 1em;
    -fx-font-family: "System";
    -fx-pref-width: -1;
    -fx-pref-height: -1;
    -fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-radius: 0;


.date-picker-popup > * > .spinner > .button:focused 
    -fx-background-color: -fx-focus-color, -fx-inner-border, -fx-body-color, -fx-faint-focus-color, -fx-body-color;

但是请注意，需要对每个使用按钮的标准控件执行此操作。添加一种方法来选择您想要设置样式的按钮可能要简单得多。你可以例如为要设置样式的按钮添加样式类：

button.getStyleClass().add("my-style");

Button.my-style 
    -fx-font-size: 20;
    -fx-font-family: "Arial";
    -fx-pref-width: 300;
    -fx-pref-height: 60;
    -fx-background-radius: 16px;
    -fx-background-color: lightgrey;
    -fx-text-fill: black;

【讨论】：

感谢您的详细解答！

【参考方案2】：

这不是一个绝对正确的解决方案，但作为一种解决方法，您可以继承 javaFX 样式以用于日期选择器弹出控件

如果你把它添加到你的 abc.css 中，按钮会和默认一样正常

.date-picker-popup > * > .spinner > .button 
    -fx-background-color: transparent;
    -fx-background-radius: 0;
    -fx-pref-width: -1;
    -fx-pref-height: -1;

【讨论】：

谢谢！正是我想要的！