JavaFX标题窗格更改的标题背景在输入鼠标时重置
我需要在运行时根据一些传入值更改标题窗格标题背景,否则将其重置 我所有的标题窗格都是在附加到场景的CSS上设置样式的 改变背景没有问题。 问题是,当鼠标在更改背景后进入标题时,背景将从CSS重置为背景JavaFX标题窗格更改的标题背景在输入鼠标时重置,java,css,javafx,Java,Css,Javafx,我需要在运行时根据一些传入值更改标题窗格标题背景,否则将其重置 我所有的标题窗格都是在附加到场景的CSS上设置样式的 改变背景没有问题。 问题是,当鼠标在更改背景后进入标题时,背景将从CSS重置为背景 用于更改标题窗格标题背景的测试应用程序: import javafx.application.Application; import javafx.scene.Node; import javafx.scene.Scene; import javafx.scene.control.TitledP
用于更改标题窗格标题背景的测试应用程序:
import javafx.application.Application;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.TitledPane;
import javafx.scene.control.ToggleButton;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.Region;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class TitledPaneApplication extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception {
final StackPane root = new StackPane();
final TitledPane titledPane = new TitledPane();
titledPane.setText("Title");
root.getChildren().add(titledPane);
final String titleBackgroundValue = "#00ff11";
final ToggleButton button = new ToggleButton("Change");
button.setOnAction(event -> {
boolean selected = button.isSelected();
final Node node = titledPane.lookup(".title");
if (selected) {
final Color color = Color.valueOf(titleBackgroundValue);
((Region) node).setBackground(new Background(new BackgroundFill(color, null, null)));
} else {
((Region) node).setBackground(null);
titledPane.applyCss();
}
});
button.setSelected(false);
titledPane.setContent(button);
final Scene scene = new Scene(root, 400, 400);
scene.getStylesheets().add(getClass().getResource("light.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.setTitle("TestApplication");
primaryStage.show();
}
}
场景CSS light.CSS
.root {
-fx-base: rgb(240, 240, 240);
-fx-background: rgb(240, 240, 240);
-fx-border-color: rgb(220, 220, 220);
/* make controls (buttons, thumb, etc.) slightly lighter */
-fx-color: derive(-fx-base, 10%);
/* text fields and table rows background */
-fx-control-inner-background: rgb(248, 248, 248);
/* version of -fx-control-inner-background for alternative rows */
-fx-control-inner-background-alt: derive(-fx-control-inner-background, -2.5%);
/* text colors depending on background's brightness */
-fx-light-text-color: rgb(220, 220, 220);
-fx-mid-text-color: rgb(100, 100, 100);
-fx-dark-text-color: rgb(20, 20, 20);
/* A bright blue for highlighting/accenting objects. For example: selected
* text; selected items in menus, lists, trees, and tables; progress bars */
-fx-accent: rgb(0, 80, 100);
/* color of non-focused yet selected elements */
-fx-selection-bar-non-focused: rgb(50, 50, 50);
-fx-font-family: "Roboto"; /* "Segoe UI Semibold", "Roboto", "Monospaced" */
-fx-font-size: 1em;
-primary-border-color: rgb(220, 220, 220);
}
/* Fix derived prompt color for text fields */
.text-input {
-fx-prompt-text-fill: derive(-fx-control-inner-background, -50%);
}
/* Keep prompt invisible when focused (above color fix overrides it) */
.text-input:focused {
-fx-prompt-text-fill: transparent;
}
/* Fix scroll bar buttons arrows colors */
.scroll-bar > .increment-button > .increment-arrow,
.scroll-bar > .decrement-button > .decrement-arrow {
-fx-background-color: -fx-mark-highlight-color, rgb(220, 220, 220);
}
.scroll-bar > .increment-button:hover > .increment-arrow,
.scroll-bar > .decrement-button:hover > .decrement-arrow {
-fx-background-color: -fx-mark-highlight-color, rgb(240, 240, 240);
}
.scroll-bar > .increment-button:pressed > .increment-arrow,
.scroll-bar > .decrement-button:pressed > .decrement-arrow {
-fx-background-color: -fx-mark-highlight-color, rgb(255, 255, 255);
}
.text-field {
-fx-font-size: 10pt;
}
.combo-box {
-fx-font-size: 10pt;
}
/* ScrollPane style. */
.scroll-pane {
-fx-background-color: transparent;
}
.scroll-pane > .viewport {
-fx-background-color: transparent;
}
/* TabPane style. */
.tab-pane > .tab-header-area {
-fx-background-color: transparent;
}
/* TitledPane style. */
.titled-pane {
-fx-border-width: 1;
-fx-border-color: -primary-border-color;
-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.15), 5, 0.0, 0, 1);
}
.titled-pane > .content {
-fx-border-width: 0;
}
.titled-pane .title .arrow-button {
visibility: false;
}
.titled-pane > .title {
-fx-background-color: -primary-border-color;
-fx-background-insets: 0;
-fx-background-radius: 0 0 0 0;
-fx-padding: 0.2em 0.2em 0.2em 0.2em;
}
.titled-pane > .title .text {
-fx-font-size: 10pt;
}
设置内联CSS样式优先于CSS文件中的样式。因此,通过setStyle应用背景就可以了
button.setOnAction(event -> {
final Node node = titledPane.lookup(".title");
if (button.isSelected()) {
node.setStyle("-fx-background-color:#00ff11;");
} else {
node.setStyle(null);
}
});
更新:
然而,关于实际问题的更多细节。要理解这一点,首先需要知道.title的背景是如何在内部定义的,以及悬停样式是如何设置的
在Modena.css内部,下面是.title背景的样式:
.titled-pane > .title {
-fx-background-color:
linear-gradient(to bottom,
derive(-fx-color,-15%) 95%,
derive(-fx-color,-25%) 100%
),
-fx-inner-border, -fx-body-color;
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 3 3 0 0, 2 2 0 0, 1 1 0 0;
-fx-padding: 0.3333em 0.75em 0.3333em 0.75em; /* 4 9 4 9 */
}
.titled-pane > .title:hover {
-fx-color: -fx-hover-base;
}
如果您注意到实际背景是从-fx颜色、-fx内边框和-fx主体颜色派生的。然而,-fx内边框和-fx主体颜色实际上再次仅从-fx颜色派生
-fx-inner-border: linear-gradient(to bottom,
ladder(
-fx-color,
derive(-fx-color,30%) 0%,
derive(-fx-color,20%) 40%,
derive(-fx-color,25%) 60%,
derive(-fx-color,55%) 80%,
derive(-fx-color,55%) 90%,
derive(-fx-color,75%) 100%
),
ladder(
-fx-color,
derive(-fx-color,20%) 0%,
derive(-fx-color,10%) 20%,
derive(-fx-color,5%) 40%,
derive(-fx-color,-2%) 60%,
derive(-fx-color,-5%) 100%
));
-fx-body-color: linear-gradient(to bottom,
ladder(
-fx-color,
derive(-fx-color,8%) 75%,
derive(-fx-color,10%) 80%
),
derive(-fx-color,-8%));
在:hover伪状态中,-fx颜色将更改为-fx hover base,并且相应地更新背景这就是你的问题所在。您仅以编程方式设置默认背景。当鼠标移到.title上时,仍会选择内部CSS文件样式(因为您尚未为悬停定义自定义样式)
如果我们设法更新-fx color属性,那么它将为不同的伪状态处理相应的css更新
对于您的需求,更正确的方法如下:这样您仍然可以获得内部定义的标题的良好渐变特性
button.setOnAction(event -> {
final Node node = titledPane.lookup(".title");
if (button.isSelected()) {
node.setStyle("-fx-color:#00ff11;");
} else {
node.setStyle(null);
}
});
// In css file
.titled-pane > .title {
-fx-color: -primary-border-color;
-fx-background-insets: 0;
-fx-background-radius: 0 0 0 0;
-fx-padding: 0.2em 0.2em 0.2em 0.2em;
}
-主边框颜色在哪里定义?很抱歉。我已经将它添加到CSS示例中。非常奇怪。我已经尝试了很多方法来纠正这一点,但我无法隔离在悬停时触发的属性…这似乎起到了作用。悬停时它不会重置。虽然我想找出为什么我的编程方法不起作用。@DJViking更新了我的答案以进行解释。谢谢你的解释。