我有这个代码:
public void start(Stage primaryStage){
TitledPane titledPane = new TitledPane("TITLE", null);
titledPane.setContent(new javafx.scene.control.TextArea("Batman"));
Scene scene = new Scene(titledPane);
scene.getStylesheets().add(getClass().getClassLoader().getResource("style.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
}
样式.css:
.titled-pane .title,
.titled-pane .content{
-fx-background-color: white;
-fx-border-style: solid;
-fx-border-color: black;
-fx-border-width: 1px;
}
结果是:
我不明白为什么会出现 2 个边框。
如果我删除 style.css
并使用 setStyle
:
public void start(Stage primaryStage){
TitledPane titledPane = new TitledPane("TITLE", null);
titledPane.setContent(new javafx.scene.control.TextArea("Batman"));
Platform.runLater(() -> {
titledPane.lookup(".title").setStyle("-fx-background-color: white;" +
"-fx-border-style: solid;" +
"-fx-border-color: black;" +
"-fx-border-width: 1px;");
titledPane.lookup(".content").setStyle("-fx-background-color: white;" +
"-fx-border-style: solid;" +
"-fx-border-color: black;" +
"-fx-border-width: 1px;");
});
Scene scene = new Scene(titledPane);
//scene.getStylesheets().add(getClass().getClassLoader().getResource("style.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
}
现在看起来不错:
为什么使用css文件结果不同?
最佳答案
我发现了问题。这是在CSS
.titled-pane .title,
.titled-pane .content{
...
}
这个.titled-pane .content
选择所有子节点content
的titled-pane
,甚至titled-pane
的子节点的子节点
结构titledPane.setContent(new javafx.scene.control.TextArea("Batman"));
是:
TitledPane -> title
-> content = TextArea -> scroll-pane -> content
所以我的CSS都改变了content
,这会导致将边框添加到 scroll-pane -> content
仅修改直接子节点 titledpane -> title
和titledpane-> title
,我需要使用>
:
.titled-pane > .title,
.titled-pane > .content{
...
}
关于JavaFX TitledPane 双边框使用 css 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56239506/