Question

我开始使用javaFX，我想设置这样的布局：

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

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

我的简单fxml文件:(现在为空）

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

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

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

tnx很多

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>

Answer 2

我已在以下主题中为此创建了答案：How do specify a width percentage in JavaFX 2 using FXML?

下面是那些懒得去那里的人的副本; - ）

为了开始使用FXML中的百分比，您可以使用以下内容：

<fx:define>
    <Screen fx:factory="getPrimary" fx:id="screen" />
</fx:define>

这将有助于您检测当前屏幕的尺寸，正在显示应用程序。现在我们有了显示尺寸，我们可以在FXML中使用它，如下所示：

<HBox fx:id="hroot" prefHeight="${screen.visualBounds.height}" prefWidth="${screen.visualBounds.width}"> Your FXML elements inside the root... </HBox>

请注意，我使用 visualBounds ，因为这会让我获得屏幕上的可用空间，因为我不想在Windows中与任务栏重叠。对于全屏应用程序，您只需使用＆＃39; bounds＆＃39;。

现在，为了达到使用百分比的目的，您实际上可以使用prefheight和prefWidth的值。您可以将计算放在 $ {} 。

中

<强> 任选地：

如果您想让所有元素都使用相对大小，只需使用它们的ID和宽度或高度属性来引用它们，然后进行计算。

<VBox fx:id="VBSidebar" prefWidth="${hroot.width*0.15}" prefHeight="${hroot.height}"> more elements.. </VBox>

使用JavaFX设置响应式布局

2 个答案: