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

我不確定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);