user-interface - 如何在 JavaFX 场景中定位按钮（或任何 GUI 元素）？

Question

我正在尝试将 JavaFX 按钮放在 UI 上的特定位置（特定坐标），但没有任何效果。我猜有一种方法可以用于此，但我找不到。

Answer 1

你可以使用窗格。setLayoutX() 和 setLayoutY()。

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;

public class Tester extends Application {


public static void main(String[] args) {
    launch(args);
}

@Override
public void start(Stage primaryStage) {
    primaryStage.setTitle("Hello World!");
    Button btn = new Button();
    btn.setText("'Hello World'");
    btn.setOnAction(new EventHandler<ActionEvent>() {

        @Override
        public void handle(ActionEvent event) {
            System.out.println("Hello World!");
        }
    });

    Pane root = new Pane();
    btn.setLayoutX(250);
    btn.setLayoutY(220);
    root.getChildren().add(btn);
    primaryStage.setScene(new Scene(root, 300, 250));
    primaryStage.show();
}
}

Answer 2

layoutX和layoutY

<Button text="Button" layoutX="50" layoutY="100" />

在 FXML 中，您可以使用继承自 的layoutX和layoutY属性javafx.scene.Node。

根据JavaFX 文档：

布局X

定义为布局目的添加到此节点变换的平移的 x 坐标。

布局Y

定义为布局目的添加到此节点变换的平移的 y 坐标。

下面的示例生成一个窗口，其中Button元素的 x 坐标为50，y 坐标为100。

示例.fxml

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

<?import javafx.scene.Scene?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.control.Button?>

<Scene>
  <Pane prefWidth="300" prefHeight="300">
    <!-- Button Positioned Using layoutX and layoutY -->
    <Button text="Button" layoutX="50" layoutY="100" />
  </Pane>
</Scene>

主.java

package sample;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.fxml.FXMLLoader;

public class Main extends Application {
  @Override
  public void start(Stage primaryStage) throws Exception {
    Scene scene = FXMLLoader.load(getClass().getResource("sample.fxml"));
    primaryStage.setTitle("Window Title");
    primaryStage.setScene(scene);
    primaryStage.show();
  }

  public static void main(String[] args) {
    launch(args);
  }
}

注意：您也可以使用setLayoutX()andsetLayoutY()方法在控制器中动态设置layoutXandlayoutY属性的值，而不是通过标记。此外，您可以使用 UI 元素标记中的layoutXandlayoutY标记（即<layoutX>和<layoutY>）来设置 FXML 标记内的 x 坐标和 y 坐标，作为使用属性的替代方法。