通过javafx css配置单个元素的边距

时间:2013-06-07 05:51:31

标签: javafx-2

我有以下fxml片段:

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

我需要在Button和Hyperlink之间添加10px的间距。我也想用CSS来完成这项任务。

2 个答案:

答案 0 :(得分:42)

参加聚会可能已经很晚了,但我也采用了另一种可能对其他人有帮助的方法。

Theres no -fx-margin:javafx按钮的5px css属性,但您可以使用填充,border-insets和background-insets的组合来解决该行为。

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

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

}

或者,您也可以定义更高的填充和更低的插入值,以防您想要填充和边距。

答案 1 :(得分:19)

看来你不能。 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>

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