在TilePane上的imageview顶部添加标签

您可以制作商品标签，并将图像作为图形节点应用到标签。选择项目后，您可以label.setText("text string")在标签上调用以根据需要更改标签的文本或CSS样式。如果项目需要交互，则可能需要制作按钮而不是标签。

下面的方法通过使用contentDisplay="TOP" graphicTextGap="-40.0"和组合-fx-padding: 0 0 20 0;文本来定位其中的一些技巧，这有点违反直觉。

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<StackPane id="StackPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="-1.0" prefWidth="-1.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2">
  <children>
    <TilePane hgap="10.0" prefColumns="3" prefHeight="-1.0" prefRows="1" prefWidth="-1.0" style="-fx-background-color: linear-gradient(palegreen, forestgreen);&#10;-fx-padding: 20px;" vgap="10.0">
      <children>
        <Label contentDisplay="TOP" graphicTextGap="-40.0" style="-fx-font-size: 20px;&#10;-fx-text-fill: gold;&#10;-fx-padding: 0 0 20 0;" text="Roast Beef">
          <graphic>
            <ImageView fitHeight="0.0" fitWidth="0.0" mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
              <image>
                <Image url="http://icons.iconarchive.com/icons/rockettheme/ecommerce/256/piggy-bank-icon.png" backgroundLoading="true" />
              </image>
            </ImageView>
          </graphic>
        </Label>
        <Label contentDisplay="TOP" graphicTextGap="-40.0" style="-fx-font-size: 20px;&#10;-fx-text-fill: gold;&#10;-fx-padding: 0 0 20 0;&#10;-fx-border-color: palegoldenrod;&#10;-fx-border-width: 5px;&#10;-fx-border-radius: 10px;&#10;-fx-border-insets: -5px;&#10;" text="Bag 'o' Love">
          <graphic>
            <ImageView fitHeight="0.0" fitWidth="0.0" mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
              <image>
                <Image url="http://icons.iconarchive.com/icons/rockettheme/ecommerce/256/bag-icon.png" backgroundLoading="false" />
              </image>
            </ImageView>
          </graphic>
        </Label>
        <Label contentDisplay="TOP" graphicTextGap="-40.0" style="-fx-font-size: 20px;&#10;-fx-text-fill: gold;&#10;-fx-padding: 0 0 20 0;" text="Show Me">
          <graphic>
            <ImageView fitHeight="0.0" fitWidth="0.0" mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
              <image>
                <Image url="http://icons.iconarchive.com/icons/rockettheme/ecommerce/256/wallet-icon.png" backgroundLoading="true" />
              </image>
            </ImageView>
          </graphic>
        </Label>
      </children>
    </TilePane>
  </children>
</StackPane>
<!-- icon usage license: 
     Creative Commons with attribution,
     back link to http://www.rockettheme.com required -->

这可能不是实现所需目标的最佳方法，因为您可以创建从Region派生的自定义ShopItem组件。使用自定义组件，您将提供布局逻辑，以在您的商品图片上方在内部对文本（以及所需的其他图形）进行分层。这种布局逻辑应该比上面提供的机制更直观。

另一种方法是使每个商店商品都成为包含图像和文本标签的AnchorPane。

自定义组件方法虽然更灵活，但有点复杂，因此我在这里仅提供了基于标签的简单解决方案。