Java 13 の新しい JavaFX CSS スタイルシートでユーザー インターフェイスを美しくする

Java 13 の新しい JavaFX CSS スタイル シートを使用してユーザー インターフェイスを美しくする

はじめに:
ソフトウェア開発において、ユーザー インターフェイスの美しさと使いやすさは、ユーザー エクスペリエンスを向上させるために非常に重要です。 。 JavaFX は、Java プラットフォーム上の最新の表現力豊かなインターフェイス テクノロジであり、豊富な UI コンポーネントと機能を提供します。ユーザーインターフェースをより美しくするために、JavaFX はインターフェースを美しくカスタマイズするための CSS スタイルシートを提供します。 Java 13 では、JavaFX に新しい CSS スタイル シートが導入され、インターフェイス スタイルがより柔軟になり、保守と拡張が容易になります。この記事では、Java 13 の新しい JavaFX CSS スタイル シートを使用してユーザー インターフェイスを美しくする方法を紹介し、対応するコード例を示します。

1. CSS スタイル シートの設定:
JavaFX では、CSS スタイル シートを設定することでユーザー インターフェイスを美しくすることができます。 Java 13 では、より強力な機能を備えた新しい CSS スタイルシート構文が利用可能です。

CSS スタイル シートは、Scene クラスの setUserAgentStylesheet() メソッドを通じて設定できます。以下は、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. CSS スタイル シートの記述:
JavaFX では、CSS スタイル シートは、セレクターとスタイルを備えた HTML および CSS に似た構文を使用します。構造。

次は、単純な style.css ファイルの内容です:

.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. CSS スタイル シートを使用してインターフェイス スタイルを設定します:
CSS スタイル シートを設定することで、簡単に変更できますインターフェース 要素のスタイル。上の例では、ボタンの背景色、テキストの色、テキストのサイズ、パディング、角の半径を設定し、マウスオーバー状態に異なる背景色を設定します。

4. カスタム スタイル:
組み込みの CSS スタイルの使用に加えて、スタイルをカスタマイズすることもできます。カスタム CSS クラスを設定し、そのクラスを CSS スタイルシートでスタイル設定することで、さらに多くのカスタマイズのニーズを実現できます。

CSS クラスをカスタマイズし、クラスのスタイルを設定する例を次に示します:

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

次に、このカスタム クラスを Java コードで使用して、ボタンのスタイルを設定できます:

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

カスタム CSS クラスを使用することで、インターフェースのカスタマイズ ニーズにより柔軟に対応できます。

概要:
Java 13 の新しい JavaFX CSS スタイル シートは、より強力なインターフェイスの美化およびカスタマイズ機能を提供します。 CSS スタイル シートを使用すると、インターフェイス要素のスタイルを簡単に変更でき、より柔軟なカスタマイズ ニーズを実現できます。 JavaFX アプリケーションを開発する場合、これらの機能を利用してユーザー インターフェイスの美しさと使いやすさを改善し、ユーザー エクスペリエンスを向上させることができます。

注: この記事で提供されている Java コード例は、JavaFX 13 以降に適用できます。他のバージョンで動作させたい場合は、該当バージョンのJavaFX APIに合わせて適宜修正してください。

以上がJava 13 の新しい JavaFX CSS スタイルシートでユーザー インターフェイスを美しくするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。