JavaFX表格样式

发表于 分类于 本文字数： 731 阅读时长 ≈ 3 分钟

默认样式

先看下表格默认样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
public class TableViewDemo extends Application {

    @Override
    public void start(Stage stage) {

        VBox root = new VBox();
        root.setAlignment(Pos.CENTER);

        ObservableList<Song> songViews = FXCollections.observableArrayList(
        );

        TableView<Song> tableView = new TableView<>(songViews);
        tableView.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);

        TableColumn<Song, String> nameColumn = new TableColumn<>("标题");
        nameColumn.setCellValueFactory(new PropertyValueFactory<>("title"));
        tableView.getColumns().add(nameColumn);

        TableColumn<Song, String> artistColumn = new TableColumn<>("作者");
        artistColumn.setCellValueFactory(new PropertyValueFactory<>("artist"));
        tableView.getColumns().add(artistColumn);

        root.getChildren().add(tableView);

        Scene scene = new Scene(root, 400, 200);
        scene.getStylesheets().add(this.getClass().getResource("/css/style.css").toExternalForm());
        stage.setScene(scene);
        stage.setTitle("TableView Demo");
        scene.setRoot(root);
        stage.show();
    }

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

    public static class Song {
        private final SimpleStringProperty title;

        private final SimpleStringProperty artist;

        public Song(String title, String artist) {
            this.title = new SimpleStringProperty(title);
            this.artist = new SimpleStringProperty(artist);
        }

        public String getTitle() {
            return title.get();
        }

        public SimpleStringProperty titleProperty() {
            return title;
        }

        public String getArtist() {
            return artist.get();
        }

        public SimpleStringProperty artistProperty() {
            return artist;
        }
    }
}

效果：

210508-01

去掉默认文本

当表格中没有内容时，修改文本 表中无内容：

1
2
// 设置文本为空
tableView.setPlaceholder(new Text(""));

或者可以放张图片：

1
tableView.setPlaceholder(new ImageView(new Image(new FileInputStream("a.jpg"), 100, 100, false, false)));

效果：

210508-02

添加索引列

首列展示索引：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
TableColumn<Song, Song> idColumn = new TableColumn<>("#");
idColumn.setSortable(false);
// 自增ID
idColumn.setCellValueFactory(param -> new ReadOnlyObjectWrapper<>(param.getValue()));
idColumn.setCellFactory(new Callback<TableColumn<Song, Song>, TableCell<Song, Song>>() {
  @Override
  public TableCell<Song, Song> call(TableColumn<Song, Song> param) {
    return new TableCell<Song, Song>() {
      @Override
      protected void updateItem(Song item, boolean empty) {
        super.updateItem(item, empty);
        if (this.getTableRow() != null && item != null) {
          setText(String.valueOf(this.getTableRow().getIndex() + 1));
        } else {
          setText("");
        }
      }
    };
  }
});
tableView.getColumns().add(idColumn);

效果：

210508-03

修改行样式

通过修改 .table-row-cell 样式实现，table-row-cell 可以认为是表格中的每一行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.table-view .table-row-cell {
    -fx-text-background-color: white;
}

.table-view .table-row-cell:odd {
    -fx-background-color: green;
}

.table-view .table-row-cell:even {
    -fx-background-color: greenyellow;
}

.table-view .table-row-cell:hover {
    -fx-background-color: white;
    -fx-text-background-color: black;
}

.table-view .table-row-cell:selected {
    -fx-background-color: red;
}

效果：

210508-04

修改列样式

通过修改 .table-column 样式实现，以文本居中为例：

1
2
3
.table-view .table-column {
    -fx-alignment: center;
}

效果：

210508-05

修改单元格样式

通过修改 .table-cell 样式实现，以边框为例：

1
2
3
4
.table-view .table-cell {
    -fx-border-color: black;
    -fx-border-width: 1;
}

效果：

210508-06

修改表格头样式

通过修改 .column-header 样式实现：

1
2
3
4
5
6
7
8
9
10
11
.table-view .column-header {
    -fx-background-color: greenyellow;
}

.table-view .column-header-background .label {
    -fx-font-size: 24;
}

.table-view .column-header-background .filler {
    -fx-background-color: red;
}

效果：

210508-07

修改滚动条样式

滚动条样式修改方式都类似，如 ScrollBar，ScrollPane，TabelView 等。滚动条主要由 Track，Thumb，Left Button，Right Button组成，此处借用官网介绍图：

210508-scroll-bar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 垂直方向滚动条样式 */
.table-view .scroll-bar {    
    -fx-background-color: greenyellow;
}
.table-view .scroll-bar:vertical .thumb {    
    -fx-background-color: green;
}
.table-view .scroll-bar:vertical .increment-button,
.table-view .scroll-bar:vertical .decrement-button {    
    -fx-background-color: pink;
}
.table-view .scroll-bar:vertical .increment-arrow,
.table-view .scroll-bar:vertical .decrement-arrow {    
    -fx-background-color: red;
}

效果：

210508-08

或者可以完全隐藏滚动条：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 垂直方向滚动条样式 */
.table-view .scroll-bar {    
    -fx-background-color: transparent;    
    -fx-padding: 0;    
    -fx-pref-width: 0;
}
.table-view .scroll-bar:vertical .thumb {    
    -fx-background-color: transparent;    
    -fx-padding: 0;    
    -fx-pref-width: 0;
}
.table-view .scroll-bar:vertical .increment-button,
.table-view .scroll-bar:vertical .decrement-button,
.table-view .scroll-bar:vertical .increment-arrow,
.table-view .scroll-bar:vertical .decrement-arrow {    
    -fx-background-color: transparent;    
    -fx-padding: 0;    
    -fx-shape: null;    
    -fx-pref-width: 0;
}

效果：

210508-09

参考

How to style a TableView in JavaFX

JavaFX TableView Column Width\Contents auto-truncating