JavaFX Scene Builder 2.0如何将图像添加到标签

Question

我正在使用JavaFX Scene Builder 2.0,我想添加image一个label使用FXML.

在oracle文档中,我们可以找到如何使用Java代码实现这一点,但我想使用Scene Builder实现这一点

Answer 1

有两种方法可以实现这一目标

• 使用FXML
• 使用CSS

FXML

<Label text="My Image">
   <graphic>
      <ImageView fitWidth="150" preserveRatio="true" smooth="true">
        <image>
          <Image url="myImage.png"/>
        </image>
      </ImageView>
   </graphic>
</Label>

在Scene Builder中,将ImageView拖到Label顶部,它将自动设置为标签的图形.然后选择ImageView并在Scene Builder属性窗格中的ImageView图像字段中键入图像的URL.

CSS

分配id给Label您的FXML.您还可以id在Scene Builder中找到标签的属性

<Label text= "My Image" id = "labelwithimage"/>

现在你可以直接在fxml中分配css值(使事情变得笨拙)或者创建一个新的css文件并在其中定义你的属性

直接分配

<Label text= "My Image" id = "labelwithimage" style="-fx-graphic:url('myImage.png'); -fx-graphic-text-gap : 10;"/>

要在css文件中定义它,您需要创建一个css文件,根据id分配给Label它的atrributes 并将其包含在FXML中

mycss.css

#labelwithimage {          
    -fx-graphic: url("myImage.png");
    -fx-graphic-text-gap : 10;
}

正如您可能已经猜到的-fx-graphic那样,我们在内部编写的所有内容,<graphic></graphic>其他属性都很少-fx-graphic-text-gap.您可以Label在css参考指南中找到可用于标签的所有标签

现在css的最后一件事就是在fxml中加载css.为此,您需要在fxml中包含以下标记

<stylesheets>
    <URL value="@mycss.css" />
</stylesheets>

只需确保在FXML中有适当的导入

Answer 2

也可以直接在Scene Builder中进行操作，而无需手动触摸FXML或CSS。

只需将ImageView节点拖放到标签上即可。然后，可以在添加的ImageView节点上设置图像的路径。

或者，您可以将图像文件从文件浏览器（或等效文件）拖动到Scene Builder中的标签。Scene Builder将自动添加中间ImageView节点。然后，您可以根据需要调整路径（相对于文档，相对于classpath等）。

实际上，该方法与Java代码和FXML的直接修改相同：只需将ImageView设置为标签的“图形”节点即可。

这对按钮也一样。