JavaFX表格是JavaFX中一个常用的UI组件,用于展示数据并提供交互。在JavaFX中,表格是通过TableView和TableColumn来实现的。TableView是一个可以显示多行数据的控件,而TableColumn则是表格中的列。
TableView控件
TableView是JavaFX中用于展示数据的控件,它可以显示多行数据,并且支持排序、过滤等功能。
创建TableView
要创建一个TableView,首先需要引入javafx.scene.control包,然后创建一个TableView对象:
TableView<Person> tableView = new TableView<>();
上面的代码创建了一个TableView对象,它可以显示类型为Person的对象。
添加数据
要在TableView中显示数据,需要创建一个ObservableList,并将数据添加到ObservableList中,然后将ObservableList设置为TableView的数据源:
ObservableList<Person> data = FXCollections.observableArrayList(
new Person("张三", 20),
new Person("李四", 25),
new Person("王五", 30)
);
tableView.setItems(data);
上面的代码创建了一个ObservableList,其中包含了三个Person对象,并将ObservableList设置为TableView的数据源。
添加列
要在TableView中显示数据,还需要定义表格的列。可以使用TableColumn类来定义列,然后将列添加到TableView中:
TableColumn<Person, String> nameColumn = new TableColumn<>("姓名");
nameColumn.setCellValueFactory(new PropertyValueFactory<>("name"));
TableColumn<Person, Integer> ageColumn = new TableColumn<>("年龄");
ageColumn.setCellValueFactory(new PropertyValueFactory<>("age"));
tableView.getColumns().addAll(nameColumn, ageColumn);
上面的代码创建了两个列,一个是姓名列,一个是年龄列,并将列添加到TableView中。
设置表格样式
可以使用CSS来设置TableView的样式。可以为TableView设置一个CSS类,然后在CSS文件中定义样式:
tableView.getStyleClass().add("my-table");
上面的代码为TableView设置了一个CSS类名为"my-table",然后在CSS文件中定义该类的样式:
.my-table {
-fx-background-color: lightblue;
-fx-font-size: 14px;
}
上面的CSS代码将TableView的背景色设置为浅蓝色,字体大小设置为14px。
TableColumn控件
TableColumn是TableView中的列,它用于定义表格的列,并指定列的数据类型、标题等属性。
创建TableColumn
要创建一个TableColumn,首先需要引入javafx.scene.control包,然后创建一个TableColumn对象,并指定列的标题和数据类型:
TableColumn<Person, String> nameColumn = new TableColumn<>("姓名");
上面的代码创建了一个标题为"姓名"的TableColumn,该列的数据类型为String。
设置列的值
要设置列的值,可以使用setCellValueFactory方法,该方法接受一个Callback对象作为参数,用于从数据对象中获取值:
nameColumn.setCellValueFactory(new PropertyValueFactory<>("name"));
上面的代码将nameColumn的值设置为Person对象的name属性。
设置列的样式
可以使用CSS来设置TableColumn的样式。可以为TableColumn设置一个CSS类,然后在CSS文件中定义样式:
nameColumn.getStyleClass().add("my-column");
上面的代码为nameColumn设置了一个CSS类名为"my-column",然后在CSS文件中定义该类的样式:
.my-column {
-fx-alignment: center;
-fx-font-weight: bold;
}
上面的CSS代码将nameColumn的对齐方式设置为居中,字体加粗。
完整示例
下面是一个完整的JavaFX表格示例,包含了TableView和TableColumn的使用:
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) {
TableView<Person> tableView = new TableView<>();
TableColumn<Person, String> nameColumn = new TableColumn<>("姓名");
nameColumn.setCellValueFactory(new PropertyValueFactory<>("name"));
TableColumn<Person, Integer> ageColumn = new TableColumn<>("年龄");
ageColumn.setCellValueFactory(new PropertyValueFactory<>("age"));
ObservableList<Person> data = FXCollections.observableArrayList(
new Person("张三", 20),
new Person("李四",