如何使用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和Hyperlink元素之间添加10px的间距?

提前感谢!

Answer 1

可能来得太晚了，但我使用了另一种可能对其他人也有帮助的方法。

没有-fx-margin: 5px;的CSS属性的JavaFX按钮，但你可以解决的行为与-fx-padding, -fx-border-insets和-fx-background-inset s的组合。

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

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

或者你也可以定义一个较高的padding和较低的insets值，如果你想要一个padding和margin。

Answer 2

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

然而，CSS填充和边距属性在一些上是支持的JavaFX场景图形对象。

是官方的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>