JavaFx选项卡-外观与SceneBuilder不同

时间:2018-09-21 08:51:17

标签: css user-interface javafx tabs

上下文:使用SceneBuilder生成选项卡式窗格应用程序

问题:我注意到在“场景生成器-预览”选项中看到的可视化效果以及在执行程序后查看时的外观。

注意

  1. 我正在使用“场景”构建器中可用的标准“选项卡和TabPane”选项。
  2. 我使用Scenebuilder 10.0.0(可执行Jar)和Java JDK 10
  3. 我没有应用任何CSS样式,但是即使下面2个链接中建议的样式也没有帮助

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

我提到了Link1Link2,但有帮助。

场景构建器输出

enter image description here

程序执行输出

enter image description here

1 个答案:

答案 0 :(得分:3)

您的应用程序看上去不同于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