让JavaFX表格焕然一新：自定义样式指南

2023-04-30 16:41:00

JavaFX 表格样式改造：告别乏味，焕发个性

各位程序员们，准备好了吗？今天我们踏上一个提升 JavaFX 表格外观之旅，让你告别单调乏味的默认样式，让你的表格焕发个性与美观。跟随我们的详细指南，释放 JavaFX 表格的无限可能。

CSS 样式表：定制的关键

第一步是创建一个 CSS 样式表文件，取名为 style.css，并将其存放在项目资源文件夹中。这是你的画布，在这里你可以用 CSS 代码挥洒创意，自定义表格的方方面面。

引用样式表：联通桥梁

在你的 JavaFX 应用程序中，通过引用 style.css 文件建立与 CSS 样式表的桥梁。在主类中添加以下代码：

import javafx.scene.Scene;
import javafx.scene.control.TableView;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        TableView tableView = new TableView();

        //引用CSS样式表
        Scene scene = new Scene(tableView, 600, 400);
        scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());

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

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

自定义样式：释放创意

在 style.css 文件中，利用 CSS 属性赋予表格全新的个性：

-fx-background-color：设置表格背景色，让它告别白色。
-fx-text-fill：改变文字颜色，赋予表格文字活力。
-fx-font-size：调整字体大小，让表格内容清晰易读。
-fx-border-color：自定义表格边框颜色，勾勒出表格的轮廓。
-fx-border-width：设置边框宽度，从细线到粗线，随心所欲。

应用样式：点石成金

在 JavaFX 应用程序中，使用 setStyle() 方法将 CSS 样式应用到表格上，让你的设计灵感变为现实：

tableView.setStyle("-fx-background-color: #FFFFFF;");

现在，你的表格背景色已变为白色，焕然一新。

常见问题解答

1. 如何改变表格列宽？

TableColumn tableColumn = new TableColumn("列名");
tableColumn.setPrefWidth(150); // 设置列宽为 150 像素

2. 如何设置表格行高？

tableView.setRowHeight(30); // 设置行高为 30 像素

3. 如何让表格内容居中显示？

tableColumn.setStyle("-fx-alignment: CENTER;");

4. 如何在表格中显示图片？

TableColumn imageColumn = new TableColumn("图片");
imageColumn.setCellFactory(new Callback<TableColumn<Object, Image>, TableCell<Object, Image>>() {
    @Override
    public TableCell<Object, Image> call(TableColumn<Object, Image> param) {
        return new TableCell<Object, Image>() {
            @Override
            protected void updateItem(Image item, boolean empty) {
                super.updateItem(item, empty);

                if (item != null) {
                    ImageView imageView = new ImageView(item);
                    imageView.setFitHeight(50); // 设置图片高度
                    imageView.setFitWidth(50);  // 设置图片宽度
                    setGraphic(imageView);
                }
            }
        };
    }
});

5. 如何在表格中添加超链接？

Hyperlink hyperlink = new Hyperlink("超链接");
TableColumn linkColumn = new TableColumn("链接");
linkColumn.setCellFactory(new Callback<TableColumn<Object, Hyperlink>, TableCell<Object, Hyperlink>>() {
    @Override
    public TableCell<Object, Hyperlink> call(TableColumn<Object, Hyperlink> param) {
        return new TableCell<Object, Hyperlink>() {
            @Override
            protected void updateItem(Hyperlink item, boolean empty) {
                super.updateItem(item, empty);

                if (item != null) {
                    setGraphic(item);
                }
            }
        };
    }
});