Question

我正在使用JavaFX Scene Builder 2.0，我想使用FXML向image添加label。

在oracle docs中，我们可以找到如何使用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分配给FXML中的Label。您还会在场景生成器

中找到id作为Label的属性

<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的{{1}}定义atrributes并将其包含在FXML中

mycss.css

Label

正如您可能已经猜到的那样，#labelwithimage { -fx-graphic: url("myImage.png"); -fx-graphic-text-gap : 10; }执行我们在-fx-graphic内写的所有内容，其他属性很少，例如<graphic></graphic>。您可以在css reference guide for label

中找到-fx-graphic-text-gap上可以使用的所有标记

现在css的最后一件事是在fxml中加载css。为此，您需要在fxml

中包含以下标记

Label

只需确保在FXML

中有正确的导入

Answer 2

也可以直接在Scene Builder中完成，而无需手动触摸FXML或CSS。

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

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

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

对于按钮也是如此。

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

2 个答案: