JavaFx Tab - Внешний вид отличается от SceneBuilder

Question

Контекст : Использование SceneBuilder для создания приложения с панелями с вкладками

Проблема : Я вижу визуализацию, как в Scene Builder - опция предварительного просмотра и после просмотравыполнение программы выглядит иначе.

Примечание :

1. Я использую стандартную опцию Tab & TabPane, доступную в Scene Builder.
2. Iиспользовать Scenebuilder 10.0.0 (исполняемый файл Jar) и Java JDK 10
3. Я не применял стили CSS, но даже те, которые предложены в двух ссылках ниже, не помогли

Ожидание : Вывод после выполнения программы такой же, как и в опции предварительного просмотра SceneBuilder.

Я ссылался на Link1 & Link2 , но помощь dint.

Выход Scene Builder :

Выход выполнения программы :

Answer 1

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

Приложение JavaFx по умолчанию использует свою тему Modena, в то время как вы настроили SceneBuilder на использование темы Gluon Mobile Light дляdesign / preview (главное меню: Preview -> Theme).

JavaFx не поставляется с темой Gluon Mobile Light, и если вы хотите использовать ее, вам нужно настроить свой проект на использование Gluon Mobile SDK /библиотека ( Gluon Mobile ).

Другой вариант - написать собственный css:

//custom-theme.css

.tab-pane > .tab-header-area {
  -fx-padding: 0;
}

.tab-pane > .tab-header-area > .tab-header-background {
  -fx-background-color: #E1E1E1, white;
  -fx-background-insets: 0, 0 0 1px 0;
}

.tab-pane > .tab-header-area > .headers-region > .tab {
  -fx-background-color: white;
  -fx-background-insets: 0 0 1px 0;     
  -fx-padding: 1.5em 1em;
}

.tab-pane > .tab-header-area > .headers-region > .tab >.tab-container >.tab-label {
  -fx-text-fill: #63B5F6;
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected {
  -fx-background-color: #2092ED, white;
  -fx-background-insets: 0, 0 0 2px 0;
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected >.tab-container >.tab-label {
  -fx-text-fill: #2095F3;
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected >.tab-container >.focus-indicator {
  -fx-opacity: 0;
}

добавить файл в ваш проект (поместите его в "src / main"/ resources "или где-то еще в classpath) и примените его к вашему приложению:

scene.getStylesheets().add("custom-theme.css");

Вот как это выглядит