javafx-2 - 如何使用 CSS 向 JavaFX 元素添加边距？

Question

我有以下 FXML 片段：

<VBox fx:id="paneLeft">
    <TextField promptText="Password"/>
    <Button fx:id="btnLogin" text="Login" maxWidth="10000"/>
    <Hyperlink text="Registration"/>
</VBox>

是否可以使用 CSS在Button和元素之间添加 10px 的间距？Hyperlink

提前致谢！

Answer 1

可能真的迟到了，但我使用了另一种可能对其他人也有帮助的方法。

JavaFX 按钮没有-fx-margin: 5px;CSS 属性，但您可以使用-fx-padding,-fx-border-insets和-fx-background-insets 的组合来解决该行为。

例如一个具有 5px 边距的按钮。

.button-with-margin {
    -fx-padding: 5px;
    -fx-border-insets: 5px;
    -fx-background-insets: 5px;
}

或者，如果您需要填充和边距，您还可以定义更高的填充和更低的插入值。

Answer 2

看来你不能。JavaFX 目前对 CSS 的支持有限。

但是，某些 JavaFX 场景图对象支持 CSS 填充和边距属性。

官方 CSS 参考指南说。所以解决方法可能是使用额外的其他布局，例如另一个 VBox：

<VBox fx:id="paneLeft" spacing="10">
    <VBox fx:id="innerPaneLeft">
        <TextField promptText="Password"/>
        <Button fx:id="btnLogin" text="Login" maxWidth="10000"/>
    </VBox>
    <Hyperlink text="Registration"/>
</VBox>

---

更新：
找到了一种更完美的方法，但仍然不是 CSS。

 <?import javafx.geometry.Insets?>

 <VBox fx:id="paneLeft">
        <TextField promptText="Password"/>
        <Button fx:id="btnLogin" text="Login" maxWidth="10000">
            <VBox.margin>
                <Insets>
                    <bottom>10</bottom>
                </Insets>
            </VBox.margin>
        </Button>
        <Hyperlink text="Registration"/>
 </VBox>

这避免了定义不必要的额外布局。