JavaFX:如何将 CSS 添加到 FXML 中的图像元素

Question

我有以下 FXML:

<VBox id="customerFormPane" styleClass="customerForm" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.customer.CustomerFormController" >
    <stylesheets>
        <URL value="@customerform.css"/>
    </stylesheets>

    <GridPane>
        <columnConstraints>
            <ColumnConstraints hgrow="ALWAYS" percentWidth="50.0"/>
            <ColumnConstraints hgrow="ALWAYS" percentWidth="50.0"/>
        </columnConstraints>

        <ImageView id="boxImage" fitWidth="100" fitHeight="100">
            <image>
                <Image url="@/com/exmaple/resources/icons/office.png" />
            </image>            
        </ImageView>
    </GridPane>

</VBox>

我想在 CSS 中为图像定义一个边框。我在 customerform.css 文件中试过这个:

.customerForm Image, .customerForm ImageView, .customerForm image {

    -fx-background-color: white;
    -fx-border-style: solid;
    -fx-border-color: red;

}

但是没有任何反应，关于如何选择 ImageView 的任何提示？ (注:图片显示正确)

Answer 1

节点不支持的 CSS 属性将被忽略。在您的情况下，这就是所有这些属性。 Region 提供-fx-background-color、-fx-border-style 和-fx-border-color 属性，但 ImageView 不是 Region 的子类。

为了使其正常工作，您需要将图像包裹在合适类型的 Region 中。

例子:

<GridPane>
    <columnConstraints>
        <ColumnConstraints hgrow="ALWAYS" percentWidth="50.0"/>
        <ColumnConstraints hgrow="ALWAYS" percentWidth="50.0"/>
    </columnConstraints>
    <!-- container using pref size as max size to not grow larger than the image -->
    <Pane styleClass="image-container" maxWidth="-Infinity" maxHeight="-Infinity">
        <children>
            <ImageView id="boxImage" fitWidth="100" fitHeight="100">
                <image>
                    <Image url="@/com/exmaple/resources/icons/office.png" />
                </image>            
            </ImageView>
       </children>
    </Pane>
</GridPane>

.image-container {
    -fx-background-color: white;
    -fx-border-style: solid;
    -fx-border-color: red;
}

---

顺便说一句:您似乎不确定此处哪些选择器是正确的。您需要在选择器中使用节点类型。 .customerForm ImageView 或 #boxImage 可用作选择器。