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 中尝试使用不同的容器。设置增长、对齐、填充宽度等。None 有效。

如果不设置人为的图形间隙，我看不到可行的解决方案，但在上面提到的问题中建议了 hack。这是一个丑陋的黑客。对于 Acrodion 中的多个 TitledPanes。但是按钮并没有放在最后，标题右边还有更多空间。

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 left-aligned和 Button right-aligned，正确吗？

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

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

然后，由于 TitledPane 的图形有 semi-fixed 最大宽度，我们需要将我们的 HBox 绑定到 TitledPane 的宽度，并使用填充以避免重叠 "expand" 箭头。

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();
    }
}

The Result:

这是一个相当干净的解决方案，我不认为它是 "hack"。仅按预期使用 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())
);

JavaFX 11：向右侧的 TitledPane 添加图形

JavaFX 11: Add a graphic to a TitledPane on the right side

java

javafx

javafx-8

javafx-11