Я хочу изменить стиль кнопки, большинство потоков здесь, а статьи в Интернете показывают, как это сделать, используя Java-код, который я не вижу в этом действительно хорошим решением, есть ли способ например, чтобы установить кнопку с некоторым текстом и изображением внутри всего, используя только FXML (без Css)?
Создание кнопки JavaFX 2 с использованием только FXML - Как добавить изображение к кнопке?
Ответ 1
Решение, использующее только fxml
Как указывает тарсала, css - это рекомендуемый способ сделать это, хотя вы также можете сделать это в fxml, если хотите:
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.text.*?>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">
<children>
<Button layoutX="104.0" layoutY="81.0" mnemonicParsing="false" text="Love 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>
</children>
</AnchorPane>
Чтобы получить выше в SceneBuilder, перетяните ImageView
поверх Button
, и он будет автоматически установлен как графика для кнопки. Затем выберите ImageView
и введите URL-адрес изображения в поле изображения ImageView в области свойств SceneBuilder.
Откройте приведенный выше файл fxml в SceneBuilder, чтобы увидеть изображение ниже.
Альтернативные атрибуты css
Замените css на атрибуты -fx-background*
.
-
-fx-graphic
-
-fx-padding
-
-fx-content-display
-
-fx-graphic-text-gap
Это просто разные, не обязательно лучше для того, что вы пытаетесь сделать. Это всего лишь предпочтение в использовании. Я считаю эти настройки более удобными, чем настройки -fx-background*
. Они более ограничительны, но синтаксис и параметры намного легче понять, а их значения сопоставляются с API JavaDoc для Labeled.
Подробное описание атрибутов приведено в справочном руководстве css.
Вот пример со стилем, устанавливающим графику, встроенную в fxml, хотя всегда лучше отделить информацию о стиле до отдельной таблицы стилей CSS, как в примере tarrsalah.
<Button layoutX="138.0" layoutY="226.0" mnemonicParsing="false" style="-fx-graphic: url('http://icons.iconarchive.com/icons/mirella-gabriele/fantasy-mediaeval/128/Poison-red-icon.png')" text="Love Potion">
<font>
<Font size="20.0" />
</font>
</Button>
Похожие решения для добавления изображений к кнопкам с использованием только кода Java
Ответ 2
FXML используется только для проектирования макета, для стилизации вы можете использовать css и ссылаться на него из вашего файла FXML
:
<stylesheets>
<URL value="@main.css" />
</stylesheets>
Чтобы добавить изображение к кнопке fx:id="btn"
в css
:
#btn {
-fx-background-image: url("Add.png");
-fx-background-size: 18 18;
-fx-background-repeat: no-repeat;
-fx-background-position:left;
}
Этот репозиторий Github предоставляет полный пример работы:
Ответ 3
Несколько изменений, внесенных мной в пример css (ссылка #btn {в комментарии # 3):
-fx-background-size: 100% 100%;
-fx-background-color: transparent;
Это удалило контур кнопки и оставило только изображение. Я смог изменить размер селектора кнопок в Scene Builder как ImageView и увидеть изменение изображения в реальном времени. Я добавил подсказку для объяснения изображения, так как не было текста и контуры кнопок. Я планирую использовать методы, описанные в другом месте, и изменять изображение при нажатии, чтобы дать больше визуальной обратной связи, что изображение является кнопкой.
Также обратите внимание: мне нужно было указать идентификатор кнопки в "CSS Id" ( "Сценарий" ) вместо "fx: id", чтобы связать их.
Добавление этих изменений к тому, что было объяснено выше, позволило мне выполнить мою цель: иметь кнопку, которая выглядит только как изображение (например, круглую форму в квадратной кнопке).