在 CSS 中设置 JavaFX Anchor Pane 的锚点答案

【问题标题】：Setting JavaFX Anchor Pane's anchors in CSS在 CSS 中设置 JavaFX Anchor Pane 的锚点
【发布时间】：2016-08-08 21:35:12
【问题描述】：

我的 GUI 应用程序中的一个窗口由内部具有相同控件的类似 HBox 组成。我想将所有内容集中在顶层窗格中（在本例中为 Anchor Pane）。

代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>

<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.Button?>

<AnchorPane xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
    <VBox fx:id="modeWindowPane" alignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
        <HBox alignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
            <children>
                <Label contentDisplay="CENTER" maxHeight="1.7976931348623157E308" prefWidth="100.0" text="Current" />
                <TextField prefWidth="100.0" />
                <Button maxHeight="1.7976931348623157E308" mnemonicParsing="false" text="Set Current"/>
            </children>
        </HBox>
        <HBox alignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
            <children>
                <Label contentDisplay="CENTER" maxHeight="1.7976931348623157E308" prefWidth="100.0" text="Frequency" />
                <TextField prefWidth="100.0" />
                <Button maxHeight="1.7976931348623157E308" mnemonicParsing="false" text="Set Current"/>
            </children>
        </HBox>
        <HBox alignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
            <children>
                <Label contentDisplay="CENTER" maxHeight="1.7976931348623157E308" prefWidth="100.0" text="Fade In" />
                <TextField prefWidth="100.0" />
                <Button maxHeight="1.7976931348623157E308" mnemonicParsing="false" text="Set Current"/>
            </children>
        </HBox>
        <HBox alignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
            <children>
                <Label contentDisplay="CENTER" maxHeight="1.7976931348623157E308" prefWidth="100.0" text="Fade Out" />
                <TextField prefWidth="100.0" />
                <Button maxHeight="1.7976931348623157E308" mnemonicParsing="false" text="Set Current"/>
            </children>
        </HBox>
        <HBox alignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
            <children>
                <Label contentDisplay="CENTER" maxHeight="1.7976931348623157E308" prefWidth="100.0" text="Offset" />
                <TextField prefWidth="100.0" />
                <Button maxHeight="1.7976931348623157E308" mnemonicParsing="false" text="Set Current"/>
            </children>
        </HBox>
        <HBox alignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
            <Label contentDisplay="CENTER" maxHeight="1.7976931348623157E308" prefWidth="100.0" text="Stimulation Time" />
            <TextField prefWidth="100.0" />
            <Button maxHeight="1.7976931348623157E308" mnemonicParsing="false" text="Set Current"/>
        </HBox>
    </VBox>
</AnchorPane>

您可以看到，在每个 HBox 中都有底部/左侧/右侧/顶部锚点。我想以某种方式对它们进行参数化，例如通过 CSS 在我的 FXML 文件中设置默认 HBox 属性。但是当我开始寻找更多信息（教程、Oracle 的参考资料、堆栈）时，我没有发现任何有用的信息。

谁能告诉我是否有任何方法我不必编辑每个组件，例如，以我想要的方式对齐它？此外，它必须符合 MVC 设计模式。

【问题讨论】：

HBoxes 有一个 VBox 作为它们的父对象：为它们设置 AnchorPane 属性是没有意义的。
@James_D，在 FXML 中，如果锚窗格中有框，则可以将其属性添加到它们。它们更像是对齐设置，而不是直接窗格的属性。
但它们并不（直接）在AnchorPane 中。他们在VBox。
一般来说，在JavaFX中，CSS是用来定义样式的，而不是布局。布局属性应在 FXML 中设置。但目前还不清楚您要在这里实现什么：可能使用适当的layout pane 会比在这里使用AnchorPane 更好。
@James_D：我使用 StackPane 而不是 AnchorPane。现在一切都如我所愿。谢谢:)

标签： java css javafx fxml

【解决方案1】：

看看 JavaFX CSS Reference Guide。在那里你可以找到所有 CSS 属性的完整文档。据我所知，您无法通过 CSS 为对象设置锚点。

你可以通过控制器来实现。只需给所有项目一个fx:id 并在您的控制器中分配它们。然后你可以遍历它们并设置锚点（例如AnchorPane.setTopAnchor(Node, Value)）。如需更多信息，请参阅AnchorPane。

【讨论】：

谢谢，但我知道这个参考。我读过它，我担心你所说的是不幸的是真的。我知道这可以通过控制器实现。但我想以 MVC 设计模式的方式设计我的项目，我不确定是否允许在 Controller 中编辑布局。