Cantikkan antara muka pengguna anda dengan helaian gaya CSS JavaFX baharu dalam Java 13

Gunakan lembaran gaya CSS JavaFX baharu dalam Java 13 untuk mencantikkan antara muka pengguna

Pengenalan:
Dalam pembangunan perisian, keindahan dan kemudahan penggunaan antara muka pengguna adalah penting untuk meningkatkan pengalaman pengguna. JavaFX ialah teknologi antara muka moden dan ekspresif pada platform Java yang menyediakan komponen dan fungsi UI yang kaya. Untuk menjadikan antara muka pengguna lebih cantik, JavaFX menyediakan helaian gaya CSS untuk mencantikkan dan menyesuaikan antara muka. Dalam Java 13, JavaFX memperkenalkan helaian gaya CSS baharu untuk menjadikan gaya antara muka lebih fleksibel, lebih mudah untuk dikekalkan dan dikembangkan. Artikel ini akan memperkenalkan cara menggunakan helaian gaya CSS JavaFX baharu dalam Java 13 untuk mencantikkan antara muka pengguna dan memberikan contoh kod yang sepadan.

1. Tetapkan helaian gaya CSS:
Dalam JavaFX, anda boleh mencantikkan antara muka pengguna dengan menetapkan helaian gaya CSS. Dalam Java 13, sintaks lembaran gaya CSS baharu tersedia dengan ciri yang lebih berkuasa.

Lembaran gaya CSS boleh ditetapkan melalui kaedah setUserAgentStylesheet() kelas Scene. Berikut ialah contoh kod untuk menetapkan helaian gaya CSS:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 创建按钮
        Button button = new Button("Click me!");

        // 创建布局并添加按钮
        StackPane root = new StackPane(button);

        // 创建场景并设置CSS样式表
        Scene scene = new Scene(root, 200, 200);
        scene.getStylesheets().add("style.css");

        // 设置场景并显示窗口
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

2. Penulisan helaian gaya CSS:
Dalam JavaFX, helaian gaya CSS menggunakan sintaks yang serupa dengan HTML dan CSS, dengan struktur pemilih dan gaya.

Berikut ialah kandungan fail style.css ringkas:

.button {
    -fx-background-color: #4CAF50; /* 按钮背景颜色 */
    -fx-text-fill: white; /* 按钮文字颜色 */
    -fx-font-size: 14px; /* 按钮文字大小 */
    -fx-padding: 10px 20px; /* 按钮内边距 */
    -fx-border-radius: 5px; /* 按钮边角半径 */
}

.button:hover {
    -fx-background-color: #45A049; /* 鼠标悬停时按钮背景颜色 */
}

3. Gunakan helaian gaya CSS untuk menetapkan gaya antara muka:
Dengan menetapkan helaian gaya CSS, kita boleh menukar gaya elemen antara muka dengan mudah. Dalam contoh di atas, kami menetapkan warna latar belakang butang, warna teks, saiz teks, padding dan jejari sudut serta menetapkan warna latar belakang yang berbeza untuk keadaan tetikus.

4 Gaya tersuai:
Selain menggunakan gaya CSS terbina dalam, kami juga boleh menyesuaikan gaya. Lebih banyak keperluan penyesuaian boleh dicapai dengan menyediakan kelas CSS tersuai dan kemudian menggayakan kelas dalam lembaran gaya CSS.

Berikut ialah contoh di mana kami menyesuaikan kelas CSS dan menggayakannya:

.custom-button {
    -fx-background-color: #008CBA; /* 按钮背景颜色 */
    -fx-text-fill: white; /* 按钮文字颜色 */
    -fx-padding: 10px 20px; /* 按钮内边距 */
    -fx-border-radius: 5px; /* 按钮边角半径 */
}

Kami kemudiannya boleh menggunakan kelas tersuai itu dalam kod Java untuk menggayakan butang:

Button button = new Button("Click me!");
button.getStyleClass().add("custom-button");

dengan menggunakan Dengan kelas CSS tersuai, kami boleh bertindak balas terhadap penyesuaian antara muka memerlukan lebih fleksibel.

Ringkasan:
Lembaran gaya CSS JavaFX baharu dalam Java 13 memberikan kami fungsi pengindahan dan penyesuaian antara muka yang lebih berkuasa. Dengan menggunakan helaian gaya CSS, kami boleh mengubah suai gaya elemen antara muka dengan mudah dan mencapai keperluan penyesuaian yang lebih fleksibel. Apabila membangunkan aplikasi JavaFX, kami boleh memanfaatkan ciri-ciri ini untuk meningkatkan estetika dan kemudahan penggunaan antara muka pengguna, dengan itu meningkatkan pengalaman pengguna.

Nota: Contoh kod Java yang disediakan dalam artikel ini sesuai untuk JavaFX 13 dan ke atas. Jika anda ingin menjalankan versi lain, sila buat pengubahsuaian yang sesuai mengikut API JavaFX versi yang sepadan.

Atas ialah kandungan terperinci Cantikkan antara muka pengguna anda dengan helaian gaya CSS JavaFX baharu dalam Java 13. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!