欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaFX实现UI美观效果代码实例

程序员文章站 2022-07-08 23:38:05
相对于swing来说,javafx在ui上改善了很多,不仅可以通过fxml来排版布局界面,同时也可以通过css样式表来美化ui。其实在开发javafx应用的时候,可以将fxml看做是html,这样跟c...

相对于swing来说,javafx在ui上改善了很多,不仅可以通过fxml来排版布局界面,同时也可以通过css样式表来美化ui。
其实在开发javafx应用的时候,可以将fxml看做是html,这样跟css结合起来就跟开发web应用差不多,只不过两者之间的语法有点差异。

1. javafx css语法

javafx css样式跟html中的css样式很大程度上是相似的,比如class选择器、组合选择符、伪元素等。

.root {
 -fx-body-color : #f5f5f5;
 -fx-outer-border : #cecece;
}

vbox > .text-area.first {
 -fx-border-radius: 4 4 0 0;
 -fx-background-radius: 4 4 0 0;
}

.arrow-button:pressed {
 -fx-background-color: #e6e6e6;
 -fx-border-color: #acacac;
 -fx-effect: innershadow(gaussian, #adadad, 10, 0, 0, 3);
}

但有一点不同的是,javafx的css样式语法都是以“-fx-”作为前缀。

比如:

/* 在css中,样式是这样写的 */
min-height: 46;
max-height: 46;
font-size: 18;
/* 而在javafx中css必须这样写 */
-fx-min-height: 46;
-fx-max-height: 46;
-fx-font-size: 18;

其实,如果了解css,想要编写javafx的css难度并不是很大。

2. 用css美化控件

在没有经过css美化之前的javafx控件,其实跟swing的控件差别不大,所以想要让控件更加美观还是要用css来修饰一下。
下面通过简单的样式,来美化一下之前的按钮:

<button text="go."
style="-fx-min-height: 30; -fx-min-width: 80;-fx-background-color: #337ab7;">
</button>

效果图:

JavaFX实现UI美观效果代码实例

可以看到使用css美化过的按钮要比之前的按钮好看多了。

3. 使用css样式表美化控件

虽然在控件上加上css样式可以达到美化控件的效果,但是跟写css一样,这样的写css样式很不利于维护。
更好的方式的使用css文件统一维护样式,然后通过class选择器将样式绑定在控件上。

首先编程css样式

在appui.fxml相同的目录下创建appui.css,内容如下:

.go {
 -fx-text-fill: white;
 -fx-min-height: 30;
 -fx-min-width: 80;
 -fx-background-color: #337ab7;
}

修改fxml引入样式

这里单独为appui.fxml引入样式,所以这需要在borderpane的stylesheets属性指定appui.css即可。

<borderpane prefheight="400.0" prefwidth="600.0"
      stylesheets="@appui.css" xmlns="http://javafx.com/javafx/8.0.172-ea"
      xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.itqn.gui.javafx.wx.ui.appui">
 <center>
  <vbox alignment="center" spacing="10.0">
   <label fx:id="text"/>
   <button onaction="#click" text="go." styleclass="go">
    <!--
    <styleclass>
     <string fx:value="btn"/>
     <string fx:value="btn-info"/>
    </styleclass>
     -->
   </button>
  </vbox>
 </center>
</borderpane>

注意这里使用的是styleclass,而不是style,另外如果需要指定多个class样式的话,应该采用styleclass子元素,而不是styleclass属性。

修改maven pom.xml

跟之前一样,要让css编译到classpath下面,需要在maven pom.xml配置include。

<build>
 <resources>
  <resource>
   <directory>src/main/java</directory>
   <includes>
    <include>**/*.fxml</include>
    <include>**/*.css</include>
   </includes>
  </resource>
 </resources>
</build>

在实际开发中,可以使用现有的开源框架来美化javafx应用,没有自己从零开始编写自己的样式。
这里推荐两个javafx css开源框架:

  • bootstrapfx (mit协议)
  • jbootx (没有声明开源协议)

bootstrapfx 目前最新的版本是0.2.4,使用它非常方便,只需要在maven引入依赖,然后在场景中添加对应的样式表即可。

首先引入maven依赖

修改maven pom.xml 加入如下依赖

<dependency>
 <groupid>org.kordamp.bootstrapfx</groupid>
 <artifactid>bootstrapfx-core</artifactid>
 <version>0.2.4</version>
</dependency>

然后在场景(scene)中引入样式表

这里跟上面使用样式表的方式有点不同,在scene引入样式表后,所有scene里面的容器和控件都能使用。
而单独为fxml引入样式表,仅能在当前fxml中使用。

stage.setscene(scene);
stage.getscene().getstylesheets().add("org/kordamp/bootstrapfx/bootstrapfx.css");
stage.show();

在fxml中使用bootstrapfx样式

<button text="go.">
 <styleclass>
  <string fx:value="btn"/>
  <string fx:value="btn-success"/>
 </styleclass>
</button>

效果图:

JavaFX实现UI美观效果代码实例

另外:jbootx的使用方式也是一样的,当然也可以不引入依赖,直接将样式表放在resources目录,然后直接添加到场景中。

jbootx的使用示例这里就不展开了,下面展示一下jbootx的效果图。

效果图1:

JavaFX实现UI美观效果代码实例

效果图2:

JavaFX实现UI美观效果代码实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。