JavaFX FXML - кнопка со значком и текстом - PullRequest
Новая
       21

JavaFX FXML - кнопка со значком и текстом

1 голос
/ 13 июня 2019

Я хотел бы включить кнопки со значком и текстом, используя FXML.

Я знаю, что в FXML я могу добавить изображение со следующим кодом: 

<ImageView id="boxImage" fitWidth="100" fitHeight="100">
  <image>
    <Image url="@/com/example/app/resources/icons/office.png" />
  </image>            
</ImageView>

Но мне интереснокак объединить это с кодом кнопки: 

<Button text="DATE"/>

Любая помощь или пример действительно приветствуются, так как я совершенно заблудился, как применить изображение с использованием FXML.

Редактировать

Следующие ответы, которые я сделал: 

<Button text="INSTRUMENT" styleClass="">
    <graphic>
        <ImageView pickOnBounds="true" preserveRatio="true">
            <image>
                <Image url="/com/example/app/resources/icons/instrument.png" />
            </image>
        </ImageView>
    </graphic>
</Button>

Но я получаю:

enter image description here

Кнопка увеличиваетсяего высота и, следовательно, больше не выровнены с другими кнопками без изображений.

Ответы [ 2 ]

2 голосов
/ 13 июня 2019

Вы можете сделать что-то подобное в fxml 

<Button layoutX="104.0" layoutY="81.0" mnemonicParsing="false" text="Love&#10;Potion">
  <font>
    <Font size="30.0" />
  </font>
  <graphic>
    <ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
      <image>
        <Image url="http://icons.iconarchive.com/icons/mirella-gabriele/fantasy-mediaeval/128/Poison-red-icon.png" />
      </image>
    </ImageView>
  </graphic>
</Button>

См. Пример здесь Стилизация кнопки JavaFX 2 только с помощью FXML - Как добавить изображение к кнопке?

ОБНОВЛЕНИЕ : если вы используете Java 8

float width = com.sun.javafx.tk.Toolkit.getToolkit().getFontLoader().computeStringWidth(btn.getText(), btn.getFont());

, тогда используйте ширину для image.

0 голосов
/ 13 июня 2019

Вы можете попробовать с помощью css: 

<Button fx:id="myB" text="DATE" mnemonicParsing="false" prefHeight="150.0" prefWidth="150.0" style="-fx-background-image: url('/img/icons/buttonRed.png');" />
...