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

Posted 2023-03-05

【中文标题】如何在 javaFX 中创建具有左、中、右部分的工具栏？

【英文标题】：How to create toolbar with left, center and right sections in javaFX?

【发布时间】：2015-08-30 05:05:37

【问题描述】：

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

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

使用 HBox Hgrow 属性作为弹簧。没用。

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.左右两边都可以，中间的怎么定义呢？

    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;
    

这种方法适用于布局，但我无法监听来自左侧和中心部分的事件，因为它们被右侧部分覆盖（原因是 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();
    

我将不胜感激。

【问题讨论】：

看看this post。您可以将帖子中的 ImageView、Image 和 VBox 替换为您各自的控件。

【参考方案1】：

将 FXML 与 @jewelsea 答案结合使用。

<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>

【参考方案2】：

只需使用 HBox 代替 StackPane。 StackPane 将节点置于彼此之上。

See a modified example of your third attempt.

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

See an example using a ToolBar.

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

【讨论】：

感谢有用的例子！我尝试了扩展 fx 工具栏的方法，效果很好:)

【参考方案3】：

工具栏部分对齐的 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（至少在 Java 8 的标准 modena.css 样式表中）已经在内部实现为 HBox 容器，因此您可以使用 HBox.setHgrow 方法来调整您的项目的内部布局约束放在工具栏中。

此示例中的左右分隔符被实现为空白窗格，它们只会增长和缩小以适应可用空间。

如果你想要一个固定大小的垫片，而不是 HBox.setHgrow，你可以使用类似的东西：

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

【讨论】：

谢谢。我将您的解决方案改编为 FXML。请参阅下面的答案

@jewelsea 如果我想为“Good”按钮设置事件处理程序，我该如何调用它？

@Himu21 添加事件处理程序与布局节点不同。它也不同于调用现有的事件处理程序。将事件处理程序添加到按钮所需要做的就是调用 button.setOnAction 并调用动作调用 button.fire。当然，您需要将按钮引用存储在字段或变量中才能执行此操作。如果您仍然感到困惑，可以通过minimal reproducible example 提出新问题。