JavaFX 11：将图形添加到右侧的 TitledPane

Question

这与三年前提出的前一个问题有关。 JavaFX 8 - Add a graphic to a TitledPane on the right side

我不喜欢这个解决方案，也没有找到其他解决方案。

自从针对 JavaFX 8 提出这个原始问题以来，JavaFX 发生了很多事情。最近发布了 JavaFX 11。

我有一个使用 JavaFX 11 的项目。 TitledPane 图形设置有一个 HBox，其中包含一个我想放置在标题最右侧的 Button。

TitledPane titledPane = new TitledPane();
titledPane.setText("Title");

HBox titleBox = new HBox();
Button b1 = new Button("ClickMe!");
titleBox.getChildren().add(b1);

titledPane.setGraphic(titleBox);
titledPane.setContentDisplay(ContentDisplay.RIGHT);

将 TitlePane Alignment 设置为 CENTER_RIGHT 会将标题置于右侧，但将整个标题、文本和图形置于右侧。

titledPane.setAlignment(Pos.CENTER_RIGHT);

我尝试在 TitledPane 图形、HBox、GridPane 中使用不同的容器。设置增长、对齐、填充宽度等。都不起作用。

如果不设置人为的图形差距，我认为没有可行的解决方案，但上面提到的问题中建议的 hack。 这是一个丑陋的黑客。 对于 Acrodion 中的多个 TitledPanes。但是 Button 并没有放在确切的末尾，标题右侧还有更多空间。

primaryStage.setOnShown(e -> {
    for (TitledPane titledPane : panes) {
        Node titleRegion = titledPane.lookup(".title");
        Insets padding = ((StackPane) titleRegion).getPadding();
        double graphicWidth = titledPane.getGraphic().getLayoutBounds().getWidth();
        double arrowWidth = titleRegion.lookup(".arrow-button").getLayoutBounds().getWidth();
        double labelWidth = titleRegion.lookup(".text").getLayoutBounds().getWidth();
        double nodesWidth = graphicWidth + padding.getLeft() + padding.getRight() + arrowWidth + labelWidth;
        titledPane.graphicTextGapProperty().bind(titledPane.widthProperty().subtract(nodesWidth));
    }
});

Answer 1

我不确定我是否完全理解您的目标，但我相信您希望 TitledPane 同时具有 Label 和 Button 与 Label 左对齐和 Button 右对齐，正确?

为了做到这一点，确实需要一些变通方法并使用 JavaFX 的容器。首先，TitledPane本身不需要设置标题；我们将在我们的图形中添加一个Label 作为标题。

在下面的示例中，我们将使用HBox 在TitledPane 中保存我们想要的所有节点。在HBox 中，我们添加了一个Region，该Region 设置为始终在HBox 中增长。这会强制Button 一直向右。

然后，由于TitledPane 的图形具有半固定的最大宽度，我们需要将HBox 绑定到TitledPane 的宽度，并使用填充以避免与“展开”箭头重叠。

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TitledPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {

        // Simple interface
        VBox root = new VBox(5);
        root.setPadding(new Insets(10));
        root.setAlignment(Pos.CENTER);

        // Create the TitlePane
        TitledPane titledPane = new TitledPane();
        titledPane.setAlignment(Pos.CENTER);

        // Create HBox to hold our Title and button
        HBox contentPane = new HBox();
        contentPane.setAlignment(Pos.CENTER);

        // Set padding on the left side to avoid overlapping the TitlePane's expand arrow
        // We will also pad the right side
        contentPane.setPadding(new Insets(0, 10, 0, 35));

        // Now, since the TitlePane's graphic node generally has a fixed size, we need to bind our
        // content pane's width to match the width of the TitledPane. This will account for resizing as well
        contentPane.minWidthProperty().bind(titledPane.widthProperty());

        // Create a Region to act as a separator for the title and button
        HBox region = new HBox();
        region.setMaxWidth(Double.MAX_VALUE);
        HBox.setHgrow(region, Priority.ALWAYS);

        // Add our nodes to the contentPane
        contentPane.getChildren().addAll(
                new Label("Titles Are Cool"),
                region,
                new Button("Click me!")
        );

        // Add the contentPane as the graphic for the TitledPane
        titledPane.setGraphic(contentPane);

        // Add the pane to our root layout
        root.getChildren().add(titledPane);

        // Show the Stage
        primaryStage.setWidth(400);
        primaryStage.setHeight(300);
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }
}

结果：

这是一个相当干净的解决方案，我不会认为它是“黑客”。只是按预期使用 JavaFX 的容器和结构。

Answer 2

您不需要为图形节点使用容器 - 只需将其翻译到右侧即可：

TitledPane titledPane = new TitledPane("Title", null);
titledPane.setPrefSize(400, 200);

Button graphic = new Button("Click me!");
titledPane.setGraphic(graphic);
titledPane.setContentDisplay(ContentDisplay.RIGHT);

final double graphicMarginRight = 10; //change it, if needed

graphic.translateXProperty().bind(Bindings.createDoubleBinding(
    () -> titledPane.getWidth() - graphic.getLayoutX() - graphic.getWidth() - graphicMarginRight,
    titledPane.widthProperty())
);