Question

我有问题，不知道如何解决它。我有按钮，我需要在右边的文本旁边添加图像。我做到了，但在调整此按钮大小后，图像始终在文本旁边。有任何解决方案可以获得文本容忍和图像到按钮的右侧？（比如来自scenebuilder的截图）

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>

Answer 1

背景

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

示例解决方案

将文本和图像放在您自己的布局管理器中的图形中（例如HBox）。通过这种方式，您可以灵活地将自定义布局应用于按钮，从而可以根据需要准确定位文本和图像。

在示例解决方案中，我在文本和图形之间添加一个窗格，其中hgrow约束为always，这样窗格将充当文本和图像之间的可扩展不可见间隔区域，将它们推向远离每个窗格的区域。尽可能水平（在整个按钮大小的限制范围内）。

<?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>

带图像的按钮（使用FXML / CSS设计样式）

1 个答案: