如何在JavaFX中实现类Windows风格的按钮设计？

DevOps 小满

2026-8-17

JavaFX实现类Windows风格按钮

要实现图中这种类Windows风格的按钮，核心是通过JavaFX CSS定制按钮的不同状态样式，以下是具体实现方案：

1. 编写自定义CSS样式

创建一个.css文件（比如windows-button.css），添加如下样式：

/* 默认按钮样式 */
.button {
    -fx-background-color: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
    -fx-border-color: #a0a0a0;
    -fx-border-radius: 3;
    -fx-background-radius: 3;
    -fx-padding: 6 12;
    -fx-font-size: 13px;
    -fx-font-family: "Segoe UI";
}

/* 鼠标悬停状态 */
.button:hover {
    -fx-background-color: linear-gradient(to bottom, #e8f4fc, #dcecfc);
    -fx-border-color: #7dbefd;
}

/* 按钮按下状态 */
.button:pressed {
    -fx-background-color: linear-gradient(to bottom, #cde5fc, #b9d8fc);
    -fx-border-color: #5699fc;
    -fx-translate-y: 1px;
}

/* 禁用状态 */
.button:disabled {
    -fx-background-color: #f5f5f5;
    -fx-border-color: #d0d0d0;
    -fx-text-fill: #a0a0a0;
}

2. 在Java代码中应用样式

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

public class WindowsStyleButtonDemo extends Application {
    @Override
    public void start(Stage stage) {
        Button button1 = new Button("确定");
        Button button2 = new Button("取消");
        
        VBox root = new VBox(10, button1, button2);
        root.setStyle("-fx-padding: 20; -fx-background-color: #ffffff;");
        
        Scene scene = new Scene(root, 300, 200);
        // 加载自定义CSS
        scene.getStylesheets().add(getClass().getResource("windows-button.css").toExternalForm());
        
        stage.setTitle("Windows风格按钮");
        stage.setScene(scene);
        stage.show();
    }

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