java - 使用 JavaFX 设置响应式布局

Question

我开始使用 javaFX，我想像这样设置布局:

我安装了场景生成器，但没有选项可以像 html 中的简单 div 那样使用百分比...

那么设置此布局的最佳选择是什么？

这是我的简单 fx​​ml 文件:(现在是空的)

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

<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns:fx="http://javafx.com/fxml/1">
    <!-- TODO Add Nodes -->
</AnchorPane>

非常感谢

Answer 1

您可以通过使用具有适当约束的 GridPane 来实现这种布局:

@Override
public void start(Stage primaryStage) throws IOException {
    GridPane root = new GridPane();

    root.getColumnConstraints().addAll(DoubleStream.of(30, 2, 68)
            .mapToObj(width -> {
                ColumnConstraints constraints = new ColumnConstraints();
                constraints.setPercentWidth(width);
                constraints.setFillWidth(true);
                return constraints;
            }).toArray(ColumnConstraints[]::new));

    RowConstraints rowConstraints = new RowConstraints();
    rowConstraints.setVgrow(Priority.ALWAYS);

    root.getRowConstraints().add(rowConstraints);

    root.addRow(0, Stream.of("red", "green", "blue").map(s -> {
        Region region = new Region();
        region.setStyle("-fx-background-color:"+s);
        return region;
    }).toArray(Node[]::new));

    Scene scene = new Scene(root);

    primaryStage.setScene(scene);
    primaryStage.show();
}

FXML 版本

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

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<GridPane prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <columnConstraints>
      <ColumnConstraints percentWidth="30.0" />
      <ColumnConstraints percentWidth="2.0" />
      <ColumnConstraints percentWidth="68.0" />
   </columnConstraints>
   <rowConstraints>
      <RowConstraints vgrow="ALWAYS" />
   </rowConstraints>
   <children>
      <Region style="-fx-background-color: red;" />
      <Region style="-fx-background-color: green;" GridPane.columnIndex="1" />
      <Region style="-fx-background-color: blue;" GridPane.columnIndex="2" />
   </children>
</GridPane>