javafx button 样式

原创

mob649e815cb099 2023-07-30 09:35:57 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e815cb099的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaFX Button 样式

JavaFX 是一个用于创建富客户端应用程序的开发工具包。其中，Button 是 JavaFX 中使用最频繁的控件之一。Button 是用来触发一些操作或者响应用户事件的，而样式则可以使 Button 更加美观和个性化。

Button 样式的基本使用

在 JavaFX 中，可以通过 CSS 来为 Button 设置样式，以实现自定义的外观。下面是一个简单的示例，展示如何为 Button 设置样式：

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

public class ButtonStyleExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        Button button = new Button("Click me");
        button.getStyleClass().add("my-button");

        HBox root = new HBox(button);
        Scene scene = new Scene(root, 200, 100);
        scene.getStylesheets().add(getClass().getResource("button-style.css").toExternalForm());

        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

在上面的示例中，通过 button.getStyleClass().add("my-button") 来添加一个自定义的样式类 "my-button"。然后，通过 scene.getStylesheets().add() 方法来加载一个外部的 CSS 文件，其中定义了样式类 "my-button" 的样式。

接下来，我们来看一下 button-style.css 文件的内容：

.my-button {
    -fx-background-color: #00ff00;
    -fx-text-fill: #ffffff;
    -fx-font-size: 16px;
    -fx-padding: 10px 20px;
}

在上面的 CSS 文件中，可以看到我们为样式类 "my-button" 设置了背景色、文字颜色、字体大小和内边距。此外，我们还可以通过 CSS 的其他属性来进一步自定义 Button 的样式，例如边框、阴影、圆角等等。

Button 样式的高级使用

除了上面的基本样式设置外，JavaFX 还提供了更多的自定义和高级样式设置。下面是一些常用的样式类和属性：

.button：Button 的默认样式类；
.button:hover：鼠标悬停时的样式类；
.button:pressed：按钮被按下时的样式类；
.button:disabled：按钮被禁用时的样式类；
.button:focused：按钮获得焦点时的样式类；
fx-background-color：背景色；
fx-text-fill：文字颜色；
fx-font-size：字体大小；
fx-padding：内边距；
fx-border-color：边框颜色；
fx-border-width：边框宽度；
fx-border-radius：边框圆角；
fx-background-image：背景图片；
fx-effect：特效（如阴影）。

这些样式类和属性可以通过 CSS 来进行设置，从而实现更加个性化的 Button 样式。

Button 样式的实际应用

自定义 Button 样式可以为应用程序赋予独特的外观，使用户界面更加美观和易用。例如，我们可以根据应用程序的主题色和风格，设计一套统一的 Button 样式。

以下是一个示例的 CSS 文件，定义了三种样式的 Button：默认样式、悬停样式和按下样式。

.button {
    -fx-background-color: #007bff;
    -fx-text-fill: #ffffff;
    -fx-font-size: 14px;
    -fx-padding: 10px 20px;
}

.button:hover {
    -fx-background-color: #0056b3;
}

.button:pressed {
    -fx-background-color: #004080;
}

通过以上定义的样式，我们可以实现一个简洁、带有悬停和按下效果的 Button。