如何使用 FXML 在 JavaFX 2 中指定宽度百分比？答案

【问题标题】：How do specify a width percentage in JavaFX 2 using FXML?如何使用 FXML 在 JavaFX 2 中指定宽度百分比？
【发布时间】：2012-04-07 15:22:57
【问题描述】：

我正在寻找一种在 FXML 中将 maxWidth 大小设置为 80% 的方法。

很像网络开发。

<VBox fx:id="testVB" prefWidth="600">

但这不是：
<VBox fx:id="testVB" prefWidth="80%">

我知道在 Straight JavaFX2 非 fxml 中您可以创建插图吗？在 FMXL 代码之外执行此操作的最佳方法是什么？

谢谢！

莱利

【问题讨论】：

标签： javafx-2

【解决方案1】：

我不确定你能做到。您需要使用 GridPane 布局组件。在此组件中，您可以指定行和列约束，并且在这些约束中，您可以将宽度指定为百分比。例如：

<GridPane>
    <children>
        <TitledPane text="testGridPane" GridPane.columnIndex="0" GridPane.rowIndex="0" />
    </children>
    <columnConstraints>
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="80.0" prefWidth="100.0" />
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="20.0" prefWidth="100.0" />
    </columnConstraints>
    <rowConstraints>
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
    </rowConstraints>
</GridPane>

此代码定义了一个GridPane，其第一列的宽度为 80%。 TitledPane设置在这个GridPane的第一列的第一个单元格中，并且可以（因为你需要确保TitledPane的宽度约束符合你的需要）占据80%的宽度GridPane。

请注意，我删除了与您的问题无关的所有信息。顺便说一句，Oracle 的 Scene Builder 工具对于定义复杂的 FXML 布局非常有用。

【讨论】：

如何在 SceneBuilder 中设置列约束？我使用的是 SceneBuilder 8.1.1，我有一个包含两列的 GridPane，但在任何地方都找不到列约束或 percentWidth。
@skrilmps 在 SceneBuilder 的内容面板中，单击 GridPane 内部。标签的东西将出现在每列的上方和下方以及每行的左侧和右侧。在右侧的 Inspector Panel 中，展开 Layout，您将看到 ColumnConstraints 信息。

【解决方案2】：

似乎已经提供了许多答案，它们应该可以工作。但是，有一种方法可以设置百分比：

<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 中的任务栏重叠。对于全屏应用程序，您只需使用“边界”。

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

可选：

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

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

希望这会有所帮助！

【讨论】：

【解决方案3】：

您可以模拟它 - 模拟 HBox 中两个列的 50% 的基本示例。您可以添加虚拟窗格以获得三分之一等。

    HBox {
        VBox {
            static hgrow : "ALWAYS",
            Label {
                text : "Privacy",
                alignment : "CENTER",
                styleClass : ["h2", "heading"]
            }
        },
        VBox {
            static hgrow : "ALWAYS",
            Label {
                text : "Messages",
                alignment : "CENTER",
                styleClass : ["h2", "heading"]
            },
            Label {text:""}
        }
    }

【讨论】：

我应该注意，使用“SOMETIMES”和使用 pref/min/max 宽度值也会有所帮助。不过，我仍然喜欢真正的 % 值。