JavaFx 选项卡 - 外观与 SceneBuilder 不同答案

【问题标题】：JavaFx Tab - Appearance differs from SceneBuilderJavaFx 选项卡 - 外观与 SceneBuilder 不同
【发布时间】：2019-02-25 15:27:49
【问题描述】：

上下文：使用 SceneBuilder 构建选项卡式窗格应用程序

问题：我注意到在 Scene Builder - Preview 选项中看到的可视化效果以及在执行程序后查看时看起来不同。

注意：

我正在使用场景构建器中提供的标准 Tab 和 TabPane 选项。
我使用 Scenebuilder 10.0.0（可执行 Jar）和 Java JDK 10
我没有应用任何 CSS 样式，但即使是下面 2 个链接中建议的样式也无济于事

预期：程序执行后的输出与SceneBuilder-preview选项中观察到的相同。

我提到了Link1 和Link2，但请帮忙。

场景生成器输出：

程序执行输出：

【问题讨论】：

标签： css user-interface javafx tabs

【解决方案1】：

您的应用程序看起来与 SceneBuilder 预览不同，因为您没有使用相同的用户代理样式表主题。

JavaFx 应用程序默认使用其 Modena 主题，而您将 SceneBuilder 设置为使用 Gluon Mobile Light 主题进行设计/预览（主菜单：预览 -> 主题）。

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”或类路径中的其他位置）并将其应用于您的应用程序：

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

This is how it looks

【讨论】：

欣赏输入。错过了那张支票。