JavaFX 切换按钮阴影答案

【问题标题】：JavaFX ToggleButton ShadowJavaFX 切换按钮阴影
【发布时间】：2014-11-24 02:17:27
【问题描述】：

您好 StackOverflow 用户，这是我的第一个帖子/问题，希望我没有违反任何规则/等。

很遗憾，我无法发布图片，但我会将其放在这里以供参考。 http://i.imgur.com/M0uckkg.jpg（按钮点击前）

OT：在上图中，我试图让按钮的背景除了文字之外完全透明。

http://i.imgur.com/bFOEOVC.jpg（点击按钮后）

一切正常，直到我单击按钮然后阴影出现在侧面。

这是我尝试过的...

CSS

.toggle-button {
    -fx-text-fill: black;
    -fx-base: transparent;
    -fx-background: transparent;
    -fx-focus-color: transparent;
    -fx-border-color: transparent;
    -fx-effect: null;
}

.toggle-button:selected {
    -fx-text-fill: black;
    -fx-base: transparent;
    -fx-background: transparent;
    -fx-focus-color: transparent;
    -fx-border-color: transparent;
    -fx-effect: null;
}

java 代码只是一个简单的带有 ToggleButton 的应用程序。

提前特别感谢！ - 巴特

【问题讨论】：

标签： java javafx

【解决方案1】：

我不建议只为一个控件修改主调色板（-fx-base 和其他）。如果您尝试为所有这些设置样式，这是有道理的。

看看modena.css是怎么定义的：

.toggle-button {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, 
        -fx-inner-border, -fx-body-color;
    -fx-text-fill: -fx-text-base-color;
}
.toggle-button:selected {
    -fx-background-color: -fx-shadow-highlight-color,
        linear-gradient(to bottom, derive(-fx-outer-border, -20%), ...),
        linear-gradient(to bottom, derive(-fx-color, -22%) 0%, ...);
}
.toggle-button:selected:focused {
    -fx-background-color: -fx-focus-color, 
        linear-gradient(to bottom, derive(-fx-color, -22%) 0%, ...),
        -fx-faint-focus-color, linear-gradient(to bottom, derive(-fx-color, -22%) 0%, ...);
}

您需要全部更改：-fx-shadow-highlight-color、-fx-outer-border、...

相反，我将根据您的要求覆盖切换按钮的样式：

.toggle-button,
.toggle-button:focused,
.toggle-button:selected,
.toggle-button:selected:focused {
    -fx-background-color: transparent;
    -fx-text-fill: black;
}

注意我已经编辑了我的答案，因为正如@eckig 建议的那样，将相同的颜色应用于不同的逗号分隔值是多余的。

【讨论】：

声明 3 或 4 次“透明”是多余的。如果您想要多种颜色，则只能使用逗号分隔的颜色列表。修改基础颜色对他来说是个好主意。颜色派生是 JavaFX CSS 的最大特性之一！
如果要覆盖默认样式，则需要覆盖所有以逗号分隔的颜色列表。相反，使用您的方法，您必须一一更改调色板中涉及样式的所有颜色。两者都有效，当然，这取决于在每种情况下哪个更好......
我认为不同，但重新测试它：仅分配 -fx-background-color: transparent;删除所有背景颜色。这只是按预期工作。 -fx-background-color: xyz; 赋值是一个完整的 CSS 值赋值，替换所有优先级较低的赋值。
@eckig 是的，你是对的，我将编辑我的答案，因为它使它更简单。
我猜你的意思是当你覆盖修改一系列值的 CSS 规则时。示例：如果您修改/覆盖按钮背景插入的规则，您应该为所有背景颜色执行此操作。

【解决方案2】：

如果您想完全移除类似按钮的光学元件，我建议您移除所有现有样式并添加您自己的样式类作为唯一的样式类：

ToggleButton toggleButton = new ToggleButton("Login");
toggleButton.getStyleClass().setAll("my-custom-button");

现在您可以只应用您需要的样式：

.my-custom-button {}

【讨论】：

【解决方案3】：

特别感谢 Jose 和 Eckig 两位。我设法根据您的建议编辑了我的代码，并立即解决了问题！

这是供以后任何人参考的参考。

按钮代码

ToggleButton button= new ToggleButton("Login");
button.getStyleClass().add("custom");

CSS

.custom,
    custom:selected {
    -fx-background-color: transparent;
    -fx-text-fill: black;
}

【讨论】：