ListView类允许我们显示一个可滚动的项目列表。

创建列表视图

以下代码创建了一个ListView并在之后填充数据。

  1. ListView<String> list = new ListView<>();
  3. ObservableList<String> items =FXCollections.observableArrayList (
  4.     "A", "B", "C", "D");
  5. list.setItems(items);

要更改列表视图控件的大小和高度，使用setPrefHeight和setPrefWidth方法。

  1. list.setPrefWidth(100);
  2. list.setPrefHeight(70);

更改ListView对象的方向

  1. list.setOrientation(Orientation.HORIZONTAL)

SelectionModel和FocusModel跟踪ListView对象的选择和焦点。

  • getSelectionModel().getSelectedIndex() - 返回所选的索引
  • getSelectionModel().getSelectedItem() - 返回所选项目
  • getFocusModel().getFocusedIndex() - 返回焦点项的索引
  • getFocusModel().getFocusedItem() - 返回焦点项

默认的selectionMode属性为SelectionMode.SINGLE。要在默认ListView实例中启用多选，请使用以下代码:

  1. listView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);

ComboBox单元格

我们可以通过使用CheckBoxListCell，ChoiceBoxListCell，ComboBoxListCell和TextFieldListCell添加各种类型的数据。
它就像在Swing中使用CellRenderer。
以下代码使用ComboBoxListCell类在列表单元格中使用组合框。

  1. import javafx.application.Application;
  2. import javafx.collections.FXCollections;
  3. import javafx.collections.ObservableList;
  4. import javafx.scene.Scene;
  5. import javafx.scene.control.ListView;
  6. import javafx.scene.control.cell.ComboBoxListCell;
  7. import javafx.scene.layout.StackPane;
  8. import javafx.stage.Stage;
  10. public class Main extends Application {
  11.     public static void main(String[] args) {
  12.         launch(args);
  13.     }
  15.     @Override
  16.     public void start(Stage primaryStage) {
  17.         ObservableList<String> names = FXCollections
  18.             .observableArrayList();
  19.         ObservableList<String> data = FXCollections.observableArrayList();
  21.         ListView<String> listView = new ListView<String>(data);
  22.         listView.setPrefSize(200, 250);
  23.         listView.setEditable(true);
  25.         names.addAll("A", "B", "C", "D", "E");
  27.         data.add("Double Click to Select Value");
  29.         listView.setItems(data);
  30.         listView.setCellFactory(ComboBoxListCell.forListView(names));
  32.         StackPane root = new StackPane();
  33.         root.getChildren().add(listView);
  34.         primaryStage.setScene(new Scene(root, 200, 250));
  35.         primaryStage.show();
  36.     }
  37. }

image.png

自定义列表视图

以下代码显示了如何将矩形绘制到ListView单元格。
它通过扩展ListCell创建一个自定义单元格。updateItem接收项目参数中的单元格值。然后它绘制一个红色的矩形。

  1. static class ColorRectCell extends ListCell<String> {
  2.     @Override
  3.     public void updateItem(String item, boolean empty) {
  4.         super.updateItem(item, empty);
  5.         Rectangle rect = new Rectangle(100, 20);
  6.         if (item != null) {
  7.             rect.setFill(Color.RED);
  8.             setGraphic(rect);
  9.         }
  10.     }
  11.   }

完整的源代码

  1. import javafx.application.Application;
  2. import javafx.collections.FXCollections;
  3. import javafx.collections.ObservableList;
  4. import javafx.scene.Scene;
  5. import javafx.scene.control.ListCell;
  6. import javafx.scene.control.ListView;
  7. import javafx.scene.layout.StackPane;
  8. import javafx.scene.paint.Color;
  9. import javafx.scene.shape.Rectangle;
  10. import javafx.stage.Stage;
  12. public class Main extends Application {
  13.     public static void main(String[] args) {
  14.         launch(args);
  15.     }
  17.     @Override
  18.     public void start(Stage primaryStage) {
  20.         ObservableList<String> data = FXCollections.observableArrayList();
  22.         ListView<String> listView = new ListView<String>(data);
  23.         listView.setPrefSize(200, 250);
  24.         listView.setEditable(true);
  26.         data.addAll("A", "B", "C", "D", "E");
  28.         listView.setItems(data);
  29.         listView.setCellFactory((ListView<String> l) -> new ColorRectCell());
  30.         StackPane root = new StackPane();
  31.         root.getChildren().add(listView);
  32.         primaryStage.setScene(new Scene(root, 200, 250));
  33.         primaryStage.show();
  34.     }
  36.     static class ColorRectCell extends ListCell<String> {
  37.         @Override
  38.         public void updateItem(String item, boolean empty) {
  39.             super.updateItem(item, empty);
  40.             Rectangle rect = new Rectangle(100, 20);
  41.             if (item != null) {
  42.                 rect.setFill(Color.RED);
  43.                 setGraphic(rect);
  44.             }
  45.         }
  46.     }
  47. }

image.png

处理列表项目选择

以下代码显示如何处理列表视图项选择事件。它注册用于选择模型中所选项目属性的事件处理程序。 新值为从列表视图中选择新的值。

  1. listView.getSelectionModel().selectedItemProperty().addListener(
  2.     (ObservableValue<? extends String> ov, String old_val, 
  3.      String new_val) -> {
  4.         System.out.println(new_val);
  6.     });

完整的源代码

  1. import javafx.application.Application;
  2. import javafx.beans.value.ObservableValue;
  3. import javafx.collections.FXCollections;
  4. import javafx.collections.ObservableList;
  5. import javafx.scene.Scene;
  6. import javafx.scene.control.ListView;
  7. import javafx.scene.layout.StackPane;
  8. import javafx.stage.Stage;
  10. public class Main extends Application {
  11.     public static void main(String[] args) {
  12.         launch(args);
  13.     }
  14.     @Override
  15.     public void start(Stage primaryStage) {
  16.         ObservableList<String> data = FXCollections.observableArrayList();
  18.         ListView<String> listView = new ListView<String>(data);
  19.         listView.setPrefSize(200, 250);
  21.         data.addAll("A", "B", "C", "D", "E");
  23.         listView.setItems(data);
  24.         listView.getSelectionModel().selectedItemProperty().addListener(
  25.             (ObservableValue<? extends String> ov, String old_val, 
  26.              String new_val) -> {
  27.                 System.out.println(new_val);
  29.             });
  30.         StackPane root = new StackPane();
  31.         root.getChildren().add(listView);
  32.         primaryStage.setScene(new Scene(root, 200, 250));
  33.         primaryStage.show();
  34.     }
  35. }

image.png

双列表视图

ObservableList是一个集合，能够在添加，更新和删除对象时通知UI控件。JavaFX ObservableLists通常用于列表UI控件，如ListView和TableView。
下面的代码显示了如何使用ObservableList来处理ListView。它有两个ListView控件和两个按钮。 我们可以使用两个按钮将项目从一个列表视图移动到另一个列表视图。

  1. import javafx.application.Application;
  2. import javafx.collections.FXCollections;
  3. import javafx.collections.ObservableList;
  4. import javafx.event.ActionEvent;
  5. import javafx.geometry.HPos;
  6. import javafx.geometry.Insets;
  7. import javafx.scene.Scene;
  8. import javafx.scene.control.Button;
  9. import javafx.scene.control.Label;
  10. import javafx.scene.control.ListView;
  11. import javafx.scene.layout.BorderPane;
  12. import javafx.scene.layout.ColumnConstraints;
  13. import javafx.scene.layout.GridPane;
  14. import javafx.scene.layout.Priority;
  15. import javafx.scene.layout.VBox;
  16. import javafx.scene.paint.Color;
  17. import javafx.stage.Stage;
  19. public class Main extends Application {
  21.     @Override
  22.     public void start(Stage primaryStage) {
  23.         BorderPane root = new BorderPane();
  24.         Scene scene = new Scene(root, 400, 250, Color.WHITE);
  26.         GridPane gridpane = new GridPane();
  27.         gridpane.setPadding(new Insets(5));
  28.         gridpane.setHgap(10);
  29.         gridpane.setVgap(10);
  30.         ColumnConstraints column1 = new ColumnConstraints(150, 150,
  31.                                                           Double.MAX_VALUE);
  32.         ColumnConstraints column2 = new ColumnConstraints(50);
  33.         ColumnConstraints column3 = new ColumnConstraints(150, 150,
  34.                                                           Double.MAX_VALUE);
  35.         column1.setHgrow(Priority.ALWAYS);
  36.         column3.setHgrow(Priority.ALWAYS);
  37.         gridpane.getColumnConstraints().addAll(column1, column2, column3);
  39.         Label candidatesLbl = new Label("Candidates");
  40.         GridPane.setHalignment(candidatesLbl, HPos.CENTER);
  41.         gridpane.add(candidatesLbl, 0, 0);
  43.         Label selectedLbl = new Label("selected");
  44.         gridpane.add(selectedLbl, 2, 0);
  45.         GridPane.setHalignment(selectedLbl, HPos.CENTER);
  47.         // Candidates
  48.         final ObservableList<String> candidates = FXCollections
  49.             .observableArrayList("Z", "A", "B", "C", "D");
  50.         final ListView<String> candidatesListView = new ListView<>(candidates);
  51.         gridpane.add(candidatesListView, 0, 1);
  53.         final ObservableList<String> selected = FXCollections.observableArrayList();
  54.         final ListView<String> heroListView = new ListView<>(selected);
  55.         gridpane.add(heroListView, 2, 1);
  57.         Button sendRightButton = new Button(" > ");
  58.         sendRightButton.setOnAction((ActionEvent event) -> {
  59.             String potential = candidatesListView.getSelectionModel()
  60.                 .getSelectedItem();
  61.             if (potential != null) {
  62.                 candidatesListView.getSelectionModel().clearSelection();
  63.                 candidates.remove(potential);
  64.                 selected.add(potential);
  65.             }
  66.         });
  68.         Button sendLeftButton = new Button(" < ");
  69.         sendLeftButton.setOnAction((ActionEvent event) -> {
  70.             String s = heroListView.getSelectionModel().getSelectedItem();
  71.             if (s != null) {
  72.                 heroListView.getSelectionModel().clearSelection();
  73.                 selected.remove(s);
  74.                 candidates.add(s);
  75.             }
  76.         });
  77.         VBox vbox = new VBox(5);
  78.         vbox.getChildren().addAll(sendRightButton, sendLeftButton);
  80.         gridpane.add(vbox, 1, 1);
  81.         root.setCenter(gridpane);
  83.         GridPane.setVgrow(root, Priority.ALWAYS);
  84.         primaryStage.setScene(scene);
  85.         primaryStage.show();
  86.     }
  87.     public static void main(String[] args) {
  88.         launch(args);
  89.     }
  90. }

image.png