Java实战之亲戚关系计算器（JavaFX版）（4）——界面装饰

本节概要：界面装饰

JavaFX对界面及控件的美化非常的方便如果你懂得CSS的话，可以按照自己的喜欢任意设计。

先提前讲下样式是怎么使用的。

这只是使用Scene Builder进行样式设置而不是使用CSS文件，不过也可以设置很多样式，可以很方便查看该控件可以设置哪些样式，只是修改没有CSS文件那样的规范而已。

还有一些基本用法：

添加和删除样式：

通过class和id来使用css文件设置样式：

添加css文件来设置样式：

CSS控件分析器：

要很好的玩转样式，设计更漂亮的界面需要懂CSS才行，否则有些难明白这些是怎么一回事，上面介绍了基本用法，下面就直接用写好的样式不再进行说明。

在styles文件夹下创建style.css文件，其内容如下：

.root {
    -fx-font-family: "微软雅黑";
    -fx-font-size: 16px;
    -fx-background-color: rgb(213, 233, 237);
}
​
.button {
    -fx-background-color: white;
    -fx-text-fill: black;
}
​
.button:hover {
    -fx-border-color: rgb(66, 139, 202);
    -fx-border-width: 2px;
}
​
#count {
    -fx-background-color: rgb(66, 139, 202);
    -fx-text-fill: white;
    -fx-font-family: "微软雅黑";
    -fx-font-size: 18px;
}
​
#count:hover, #reback:hover, #clear:hover {
    -fx-border-color: rgb(125, 125, 125);
    -fx-border-width: 5px;
}
​
#reback {
    -fx-background-color: rgb(92, 184, 92);
    -fx-text-fill: white;
    -fx-font-family: "微软雅黑";
    -fx-font-size: 18px;
}
​
#clear {
    -fx-background-color: rgb(217, 83, 79);
    -fx-text-fill: white;
    -fx-font-family: "微软雅黑";
    -fx-font-size: 18x;
}

然后就是将CSS文件应用到界面上，有两种方法。

第一种方法是在fxml文件中的根据添加stylesheets属性，其值是css样式文件的有效路径。

运行效果如下图：

第二种方法是在Main类中的start方法内进行设置。

运行效果和上图一样。

这里采用第二种吧，所以Main.java的内容如下：

package kindredCalculator;
​
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
​
public class Main extends Application {
​
    @Override
    public void start(Stage primaryStage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("view/sample.fxml"));
        primaryStage.setTitle("亲戚关系计算器");
        primaryStage.setScene(new Scene(root, 800, 650));
        primaryStage.getScene().getStylesheets().add(getClass().getResource("styles/style.css").toExternalForm());
        primaryStage.show();
    }
​
​
    public static void main(String[] args) {
        launch(args);
    }
}

可搜索微信公众号【Java实例程序】或者扫描下方二维码关注公众号获取更多。

注意：在公众号后台回复【20191126】可获取本节源码。