带图像的按钮（使用FXML / CSS设计样式） [英] Button with image (styling with FXML/CSS)

问题描述

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

I have problem and don't have any idea how to solve it. I have button and I need to add image next to text on right. I did it but after resizing this button, image is always next to text. There is any solution to get text toleft and image to right side of button? (like on screenshot from 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>

推荐答案

背景

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

In general, I'd advise, just using the ContentDisplay on buttons and having the button manage the layout of items inside the button on your behalf. But that approach will not work for your particular use-case.

示例解决方案

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

Put both the text and the image in the graphic inside your own layout manager (for example an HBox). This way you have the flexibility to apply a custom layout to the button, allowing you to situate the text and image exactly as you wish.

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

In the sample solution I add a Pane between the text and the graphic with a hgrow constraint of always, so that the pane will act as an expandable invisible spacer between the the text and the image, pushing them as far apart from each other horizontally as is possible (within the constraints of the overall button size).

<?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设计样式）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！