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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30832692/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-11-02 17:43:27  来源:igfitidea点击:

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

javajavafxalignmenttoolbar

提问by Qbisiek

I'm trying to create a customized toolbar in javafx. This toolbar should be able to display controls in the center, in the left side and in the right side (three sections) of its surface. The problem is that I have no idea to achive this. I read many hints related to this problem, but they dont work for me or I'm doing something wrong...

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

Anyway I wrote several methods, which represent different ways to implement my toolbar but no of them works properly. Here you have my attempts:

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

  1. Using HBox Hgrow property as spring. Didn't work.

    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;
    }
    
  1. 使用 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.It works for the left and right section, but how to define the center one?

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;
    }
  1. This approach works well for the layout, but I cannot listen for events from left and center section because those are covered by the right section (StackPane is the reason), so this solution is also useless.

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

Above methods I'm invoking in that code block:

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

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

I will be grateful for any help in that matter.

我将不胜感激在这方面的任何帮助。

采纳答案by Oliver Jan Krylow

Simply use a HBox instead of a StackPane. A StackPane puts Nodes on top of each other.

只需使用 HBox 而不是 StackPane。StackPane 将节点放在彼此的顶部。

See a modified example of your third attempt.

请参阅第三次尝试的修改示例。

Another option would be to use the FX ToolBar, similar to how jewelseaalready mentioned:

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

See an example using a ToolBar.

请参阅使用工具栏的示例。

Both attempts should be flexible enough for your needs. They differ in how much control you get over the layout and how many features you can inherit from the standard ToolBar.

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

回答by jewelsea

Spring method for ToolBar section alignment works fine for me.

ToolBar 部分对齐的 Spring 方法对我来说很好用。

springtool

弹簧工具

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

A 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.setHgrowmethod to adjust the internal layout constraints of items you place in a toolbar.

一个工具栏(在标准modena.css样式表对Java 8个最低),已在内部实现为HBox容器,所以你可以只使用HBox.setHgrow方法来调整您在工具栏中放置物品的内部布局约束。

The left and right spacers in this example are implemented as blank panes which will just grow and shrink to fit available space.

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

If you wanted a spacer which was a fixed size, instead of HBox.setHgrow, you could use something like:

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

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

回答by burntblark

Using FXML in conjunction with @jewelsea answer.

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