如何在 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

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

Answer 2

我不确定 FlowPane 是否真的支持这一点。使用 GridPane，您可以创建两列并使用第一列占用所有空间。像这样的：

    GridPane pneButtons = new GridPane();

    ColumnConstraints col1 = new ColumnConstraints();
    col1.setHgrow(Priority.ALWAYS);
    pneButtons.getColumnConstraints().add(col1);

    Button btnRight = new Button("RIGHT");
    pneButtons.getChildren().add(btnRight);

    GridPane.setColumnIndex(btnRight, 1);

Answer 3

示例解决方案

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

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 方法什么也不做，因为按钮内没有额外的空间可用于对齐按钮的内部内容。

要进一步了解这一点，请阅读：Tips for Sizing and Aligning Nodes（强烈推荐）。

关于对齐其他窗格类型

还有很多其他的layout panes（如AnchorPane、GridPane等），可以用来完成类似的布局。不同的布局窗格具有不同的功能和 API。这意味着您处理常见布局问题（例如对齐）的方式在它们之间有所不同（您需要查阅他们的 API 以了解如何为每种布局窗格类型执行此操作）。

如果您想控制布局窗格内的对齐方式，您必须使用我上面演示的分隔符，或者在节点上设置额外的窗格级别约束。对各种布局类型设置约束的示例有以下方法（其中一些是静态的）：

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

以上只是示例，还有更多对齐节点的方法，例如通过设置BorderPane 的顶部、中心或右侧属性。

为什么 FlowPane 不适合您想要完成的工作

您可以通过将 FlowPane's Orientation 设置为垂直并调用 flowPane.setColumnHalignment(Pos.CENTER_RIGHT) 来右对齐 FlowPane 中的节点。但是，右侧对齐 FlowPane 中的所有内容，而不是左侧对齐，右侧对齐另一件事，这就是您要执行的操作。