带图像的按钮（使用 FXML/CSS 进行样式设置）答案

【问题标题】：Button with image (styling with FXML/CSS)带图像的按钮（使用 FXML/CSS 进行样式设置）
【发布时间】：2016-01-18 10:43:56
【问题描述】：

我有问题，不知道如何解决。我有按钮，我需要在右侧文本旁边添加图像。我做到了，但是在调整此按钮的大小后，图像始终位于文本旁边。有什么解决方案可以让文本向左，图像在按钮的右侧？（就像来自场景构建器的屏幕截图）

FXML 代码：

<Button fx:id="btn1" alignment="BASELINE_LEFT" contentDisplay="RIGHT" maxHeight="-Infinity" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="50.0" text="Text">
           <graphic>
              <ImageView fitHeight="24.0" fitWidth="24.0" pickOnBounds="true" preserveRatio="true">
              <image>       
                <Image url="/images/User/user.png" preserveRatio="false" smooth="false" />          
              </image>
              </ImageView>
           </graphic>
</Button>

【问题讨论】：

我可以使用图形文本间隙，但这是不变的。我可以通过代码将图像对齐到右侧吗？
您查看过contentDisplay 属性吗？它可以设置图形相对于文本的位置（左、右、上、下）
啊，对不起，现在我更明白你的意思了，而且你已经在使用它了！
按钮宽度是动态变化的，还是设置的？如果已设置，您可以随意使用图形文本间隙，直到它看起来不错。如果它在程序运行时发生变化，我认为您别无选择，只能添加一些代码，将间隙绑定到基于按钮实际宽度的值。

标签： javafx fxml

【解决方案1】：

背景

一般来说，我建议您只在按钮上使用 ContentDisplay 并让按钮代表您管理按钮内项目的布局。但是这种方法不适用于您的特定用例。

示例解决方案

将文本和图像都放入您自己的布局管理器（例如 HBox）中的图形中。通过这种方式，您可以灵活地将自定义布局应用于按钮，让您可以完全按照自己的意愿放置文本和图像。

在示例解决方案中，我在文本和图形之间添加了一个具有始终 hgrow 约束的窗格，以便窗格将充当文本和图像之间的可扩展不可见间隔，将它们推离每个其他尽可能水平（在整体按钮大小的限制内）。

<?xml version="1.0" encoding="UTF-8"?>

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

<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="150.0" prefWidth="300.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button contentDisplay="RIGHT" mnemonicParsing="false" prefHeight="98.0" prefWidth="259.0" style="-fx-base: thistle;">
         <graphic>
            <HBox alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mouseTransparent="true">
               <children>
                  <Label text="Nightshade">
                     <font>
                        <Font name="Papyrus" size="24.0" />
                     </font></Label>
                  <Pane HBox.hgrow="ALWAYS" />
                  <ImageView>
                     <image>
                        <Image url="@Potion-icon.png" />
                     </image>
                  </ImageView>
               </children>
            </HBox>
         </graphic>
      </Button>
   </children>
</StackPane>

【讨论】：

是的 - 这就是我要找的:)。非常感谢珠宝海！现在一切都会自动调整。