如何在 javaFX 中创建带有左、中、右部分的工具栏?

How to create toolbar with left, center and right sections in javaFX?

我正在尝试在 javafx 中创建自定义工具栏。此工具栏应该能够在其表面的中心、左侧和右侧(三个部分)显示控件。 问题是我不知道要实现这个。我阅读了许多与此问题相关的提示,但它们对我不起作用,或者我做错了什么...

无论如何我写了几个方法,它们代表了实现我的工具栏的不同方法,但没有一个能正常工作。 这里有我的尝试:

  1. 使用 HBox Hgrow 属性 作为 spring。没用。

    public ToolBar createToolBar()
    {
        ToolBar toolBar = new ToolBar();
        Pane emptyPane = new Pane();
        HBox spring = new HBox(emptyPane);
        spring.setHgrow(emptyPane, Priority.ALWAYS);
        toolBar.getItems().addAll(spring, new Label("LABEL"));
        return toolBar;
    }
    

2.It适用于左右部分,但如何定义中间部分?

    public AnchorPane createToolBar2()
    {
        AnchorPane toolBar = new AnchorPane();
        Label leftLabel = new Label("left");
        Label rightLabel = new Label("right");
        toolBar.getChildren().addAll(leftLabel, rightLabel);
        toolBar.setLeftAnchor(leftLabel, 0.0);
        toolBar.setRightAnchor(rightLabel, 0.0);
        return toolBar;
    }
  1. 这种方法对于布局很有效,但是我无法从左侧和中心部分监听事件,因为它们被右侧部分覆盖了(StackPane 是原因),所以这个解决方案也没有用.

    public StackPane createToolBar3()
    {
        StackPane toolBar = new StackPane();
        Button left = new Button("left button");
        Button right = new Button("right button");
        Button center = new Button("center button");
        HBox leftSection = new HBox(left);
        leftSection.setAlignment(Pos.CENTER_LEFT);
        HBox centerSection = new HBox(center);
        centerSection.setAlignment(Pos.CENTER);
        HBox rightSection = new HBox(right);
        rightSection.setAlignment(Pos.CENTER_RIGHT);
        toolBar.getChildren().addAll(leftSection, centerSection, rightSection);
    
        left.setOnAction(event -> System.out.println("left"));
        right.setOnAction(event -> System.out.println("right"));
        center.setOnAction(event -> System.out.println("center"));
        return toolBar;
    }
    

我在该代码块中调用的上述方法:

   @Override
    public void start(Stage stage) {

        BorderPane borderPane = new BorderPane();
        borderPane.setPrefWidth(500);
        borderPane.setPrefHeight(300);
        borderPane.setTop(createToolBar4());
        stage.setScene(new Scene(borderPane));
        stage.show();
    }

如有任何帮助,我将不胜感激。

Spring 工具栏部分对齐的方法对我来说很好。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class SectionalToolbar extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        final Pane leftSpacer = new Pane();
        HBox.setHgrow(
                leftSpacer,
                Priority.SOMETIMES
        );

        final Pane rightSpacer = new Pane();
        HBox.setHgrow(
                rightSpacer,
                Priority.SOMETIMES
        );

        final ToolBar toolBar = new ToolBar(
                new Button("Good"),
                new Button("Boys"),
                leftSpacer,
                new Button("Deserve"),
                new Button("Fruit"),
                rightSpacer,
                new Button("Always")
        );
        toolBar.setPrefWidth(400);

        BorderPane layout = new BorderPane();
        layout.setTop(toolBar);

        stage.setScene(
                new Scene(
                        layout
                )
        );
        stage.show();
    }
    public static void main(String[] args) { launch(); }
}  

一种 ToolBar (at least in the standard modena.css stylesheet for Java 8), is already internally implemented as a HBox container, so you can just use the HBox.setHgrow 方法,用于调整您放置在工具栏中的项目的内部布局约束。

此示例中的左右 spacers 被实现为空白窗格,它们会增长和缩小以适应可用 space。

如果你想要一个固定大小的 spacer,而不是 HBox.setHgrow,你可以使用类似的东西:

leftSpacer.setPrefSize(20); 
leftSpacer.setMinSize(HBox.USE_PREF_SIZE); 
leftSpacer.setMaxSize(HBox.USE_PREF_SIZE);

只需使用 HBox 而不是 StackPane。 StackPane 将节点放在彼此之上。

See a modified example of your third attempt.

另一种选择是使用 FX 工具栏,类似于 jewelsea 已经提到的方式:

See an example using a ToolBar.

这两种尝试都应该足够灵活以满足您的需要。它们的不同之处在于您对布局的控制程度以及您可以从标准工具栏继承多少功能。

结合@jewelsea 回答使用 FXML。

<ToolBar prefHeight="40.0" prefWidth="200.0">
    <items>
        <Button mnemonicParsing="false" text="Good" />
        <Button mnemonicParsing="false" text="Boys" />
        <Pane prefWidth="20.0" HBox.hgrow="SOMETIMES" />
        <Button mnemonicParsing="false" text="Deserve" />
        <Button mnemonicParsing="false" text="Fruit" />
        <Pane prefWidth="20.0" HBox.hgrow="SOMETIMES" />
        <Button mnemonicParsing="false" text="Always" />
        <Pane prefWidth="20.0" HBox.hgrow="SOMETIMES" />
    </items>
</ToolBar>