我想在TitledPane
的标题中添加一个小图标。因此,我设置了一个空标题,并添加了一个包含HBox
和Label
的ImageView
作为图形。这样,图标显示在文本结尾附近。我希望它始终显示在TitledPane
的右边界旁边。
我怎样才能做到这一点?
我还尝试使用BorderPane
并将Label
添加到中心,并在右侧添加ImageView
,但是BorderPane
没有获得TitledPane的最大大小。
所以我试图将MaxWidth设置为Max-Value,但这没有帮助
有人知道该怎么办吗?
**编辑:**我创建的“自定义”控件将在stage.setOnShown中调用的方法中初始化。
public class CustomTitledPane extends TitledPane {
private Image alert;
private Image registered;
private Image deleted;
private ImageView img;
public CustomTitledPane(String titleText, Node node) {
super(titleText, node);
setAnimated(true);
setCollapsible(true);
img = new ImageView();
img.setFitHeight(10d);
img.setPreserveRatio(true);
img.setSmooth(true);
setGraphic(img);
setContentDisplay(ContentDisplay.RIGHT);
// apply css and force layout of nodes
applyCss();
layout();
// title region
Node titleRegion = lookup(".title");
// padding
Insets padding = ((StackPane) titleRegion).getPadding();
// image width
double graphicWidth = img.getLayoutBounds().getWidth();
// arrow
double arrowWidth = titleRegion.lookup(".arrow-button")
.getLayoutBounds().getWidth();
// text
double labelWidth = titleRegion.lookup(".text").getLayoutBounds()
.getWidth();
double nodesWidth = graphicWidth + padding.getLeft()
+ padding.getRight() + arrowWidth + labelWidth;
System.out.println("w: " + graphicWidth + " " + arrowWidth + " "
+ labelWidth);
graphicTextGapProperty().bind(widthProperty().subtract(nodesWidth));
try {
alert = new Image(new FileInputStream("img/Alert.png"));
registered = new Image(new FileInputStream("img/Registered.png"));
deleted = new Image(new FileInputStream("img/Deleted.png"));
} catch (FileNotFoundException e) {
e.printStackTrace();
}
} }
这是TitledPane的CSS:
.titled-pane {
-fx-text-fill: #006FD8;
}
.titled-pane > .title {
-fx-background-color: transparent;
-fx-border-color: linear-gradient(to right, white 0%, grey 30%, grey 70%, white 100%) transparent transparent transparent;
}
.titled-pane:expanded > .title {
-fx-border-color: grey transparent transparent transparent;
-fx-background-color: linear-gradient(to bottom, #DCE7F5, white);
}
.titled-pane:expanded > *.content {
-fx-border-width: 0;
}
最佳答案
根据OP在其已编辑问题上显示的代码,此代码解决了以下事实:在显示阶段之前,在自定义类上在侦听器上创建了标题窗格。
@Override
public void start(Stage primaryStage) {
Scene scene = new Scene(new StackPane(), 300, 250);
primaryStage.setScene(scene);
primaryStage.setOnShown(e -> {
CustomTitledPane customTitledPane = new CustomTitledPane("Title", new StackPane(new Label("Graphic to the Right")));
scene.setRoot(customTitledPane);
customTitledPane.applyCss();
customTitledPane.layout();
// title region
Node titleRegion=customTitledPane.lookup(".title");
// padding
Insets padding=((StackPane)titleRegion).getPadding();
// image width
double graphicWidth=customTitledPane.getGraphic().getLayoutBounds().getWidth();
// arrow
double arrowWidth=titleRegion.lookup(".arrow-button").getLayoutBounds().getWidth();
// text
double labelWidth=titleRegion.lookup(".text").getLayoutBounds().getWidth();
double nodesWidth = graphicWidth+padding.getLeft()+padding.getRight()+arrowWidth+labelWidth;
customTitledPane.graphicTextGapProperty().bind(customTitledPane.widthProperty().subtract(nodesWidth));
});
primaryStage.show();
}
class CustomTitledPane extends TitledPane {
public CustomTitledPane(String titleText, Node node) {
super(titleText, node);
setAnimated(true);
setCollapsible(true);
ImageView img = new ImageView(new Image(getClass().getResource("unlock24.png").toExternalForm()));
img.setFitHeight(10d);
img.setPreserveRatio(true);
img.setSmooth(true);
setGraphic(img);
setContentDisplay(ContentDisplay.RIGHT);
}
}