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

Question

这与三年前提出的先前问题有关。 JavaFX 8-在右侧的TitledPane中添加图形

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

自从最初的问题要求JavaFX 8以来，JavaFX发生了很多事情。最近发布了JavaFX 11。

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

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中使用不同的容器。设置增长，对齐，fillWidth等。没有任何作用。

没有设置人为的图形间隙，我看不到可行的解决方案，但是上述参考问题中提出了该建议。这是一个丑陋的骇客。适用于加速中的多个TitleedPanes。但是，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，该值设置为始终在内增长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();
    }
}

结果：

这是一个非常干净的解决方案，我不认为这是一个“ hack”。只需按预期使用JavaFX的容器和结构。