如何在JavaFX中对齐按钮？

Question

如何使此窗口上的"右"(第二个)按钮右对齐？

class HelloApp extends Application {
  override def start(primaryStage: Stage): Unit = {
    val root = new FlowPane(Orientation.VERTICAL) {
      setPadding(new Insets(10, 10, 10, 10))
      setVgap(10)
      getChildren.add(new Button("Left"))
      getChildren.add(new Button("Right") { setAlignment(Pos.CENTER_RIGHT) }) // this doesn't seem to be working
    }

    primaryStage.setScene(new Scene(root, 400, 400))
    primaryStage.show()
  }
}

谢谢

Answer 1

样品溶液

这是一个提供左对齐和右对齐按钮的示例:

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

public class HelloApp extends Application {
  public static void main(String[] args) {
    launch(args);
  }

  @Override
  public void start(Stage primaryStage) throws Exception {
    HBox root = new HBox();
    root.setPadding(new Insets(10, 10, 10, 10));

    final Button left = new Button("Left");
    left.setMinSize(Button.USE_PREF_SIZE, Button.USE_PREF_SIZE);
    final Pane spacer = new Pane();
    HBox.setHgrow(spacer, Priority.ALWAYS);
    spacer.setMinSize(10, 1);
    final Button right = new Button("Right");
    right.setMinSize(Button.USE_PREF_SIZE, Button.USE_PREF_SIZE);

    root.getChildren().addAll(left, spacer, right);

    primaryStage.setScene(new Scene(root, 400, 400));
    primaryStage.show();
  }
}

这个解决方案是用Java代码而不是Scala提供的,因为我没有在Scala中编程.但它应该很容易翻译成等效的Scala代码.

说明

我选择了HBox,因为对我来说,这是最常见的希望左右对齐的例子.但是这里没有真正的对与错,并且使用其他布局类型(如AnchorPane)来实现所需的结果也可以为您提供一个很好的解决方案.

为了完成与HBox的正确对齐,我在左对齐节点和右对齐节点之间插入一个可变宽度间隔窗格,将所有右对齐节点向右推.我在最小尺寸上添加了各种附加约束,以便完整按钮文本始终可见,因此当您使窗口变小时,左右对齐节点之间始终存在小间隙.

在setAlignment()上

该button.setAlignment()方法似乎不适合您的原因是它不会做您认为它会做的事情.setAlignment用于在按钮增长超过其首选宽度时对齐按钮内的文本.请参阅setAlignment javadoc:

指定当Labeled中有空白空间时,如何对齐Labeled中的文本和图形.

按钮的默认最大宽度是其首选宽度,因此除非使用明确设置其最大宽度,否则按钮的大小不会增大button.setMaxWidth(Double.MAX_VALUE).这意味着,默认情况下,setAlignment方法根本不执行任何操作,因为按钮内没有可用的额外空间,以便按钮的内部内容在内部对齐.

要进一步理解这一点,请阅读:调整和对齐节点的提示(强烈推荐).

在对齐其他窗格类型时

还有许多其他布局窗格(例如AnchorPane,GridPane等),可用于完成类似的布局.不同的布局窗格具有不同的功能和API.这意味着您处理常见布局问题(如对齐)的方式因它们而异(您需要查阅其API以了解如何为每种布局窗格类型执行此操作).

如果要控制布局窗格中的对齐,则必须使用上面演示的spacer,或者在节点上设置其他窗格级别约束.在各种布局类型上设置约束的示例是以下方法(其中一些是静态的):

• hBox.setAlignment(Pos)(对齐VBox中的所有节点)
• AnchorPane.setRightAnchor(Node,Double)(锚定AnchorPane中的给定节点).
• stackPane.setAlignment(Pos)(对齐StackPane中的所有节点)
• StackPane.setAlignment(Node,Pos)(对齐StackPane中的特定节点)

以上只是示例,有许多方法可以对齐节点,例如通过设置BorderPane的顶部,中心或右侧属性.

为什么FlowPane对你想要完成的事情并不是很好

您可以通过将FlowPane的Orientation设置为vertical并调用flowPane.setColumnHalignment(Pos.CENTER_RIGHT)来右键对齐FlowPane中的节点.但是,右边对齐FlowPane中的所有内容,而不是左边的一个内容,右边的另一个内容,这就是你要做的事情.

Answer 2

尽管 Jewelsea 的答案是完整且正确的，但它是一个基于 java 的解决方案，我想提供一个基于 fxml 的解决方案，这可能对某些开发人员有所帮助。这是 Jewelsea 答案的 fxml 端口。

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>


<HBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1">
   <padding>
      <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
   </padding>
   <children>
      <Button mnemonicParsing="false" text="Left" />
      <Pane HBox.hgrow="ALWAYS" />
      <Button mnemonicParsing="false" text="Right" />
   </children>
</HBox>