原文链接

列表组件

ListView类用于展示一个可滚动的列表。图展示了一个可选列表

图简单的列表视图

3-12-1 list-default

你可以通过setItems方法来填充列表的内容。你也可以通过setCellFactory方法来为列表中的选项创建一个视图组件外观。

创建一个ListView组件

代码片段实现了中展示的带有String内容项的列表。

 创建一个ListView控件 

1
2
3
4
ListView<String> list = new ListView<>();
ObservableList<String> items =FXCollections.observableArrayList (
    "Single", "Double", "Suite", "Family App");
list.setItems(items);

如果要改变listView控件的宽度和高度,可以使用setPrefHeight和setPrefWidth方法。在例中将纵向列表的高度限制为100像素、宽度限制为70像素,对应的结果如图所示。

例设置ListView的宽度和高度

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

图改变了大小的纵向列表

3-12-2 list-vert

通过将orientation属性的值设置为Orientation.HORIZONTAL,你可以将列表改成横向排布。代码如下:

1
list.setOrientation(Orientation.HORIZONTAL);

如果将图中的列表横向排列,其效果如图所示。

图横向排列的ListView控件

3-12-3 list-horizontal

你可以通过SelectionModel和FocusModel类来随时跟踪ListView对象中被选择和获得焦点的选项。为了取得各个列表项的当前状态,可以通过使用下面的方法组合:

    · getSelectionModel().getSelectedIndex()

        –返回在单选(single-selection)模式下当前被选中的列表项索引号。

    · getSelectionModel().getSelectedItem()

        – 返回当前被选中的列表项。

    · getFocusModel().getFocusedIndex()

        –返回当前获得焦点的列表项索引号。

    · getFocusModel().getFocusedItem()

        –返回当前获得焦点的列表项。

在实例化ListView时默认使用的SelectionModel是MultiSelectionModel抽象类的一个实现。不过selectionMode属性的默认值是SelectionMode.SINGLE。对于默认的ListView实例,如果要启用多选,则可以使用下面的样例代码:

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

同时要注意MultipleSelectionModel具有selectedItems和selectedIndices属性,它们都是可观察的列表(observable list),可以被监听以检测多选情况

使用数据来填充ListView

例展示了填充listview 的最简单方法。为了加强列表的功能,你可以通过使用ListCell类的特定扩展类来向列表中添加各种类型的数据,例如CheckBoxListCell,ChoiceBoxListCell,ComboBoxListCell和TextFieldListCell。这些类为基本的列表单元(ListCell)增加了附加功能,实现这些类的CellFactory使得开发者可以直接改变ListView组件中展现的数据

例如默认情况下列表单元是不可编辑的,然而ComboBoxListCell类会在列表单元中绘制一个组合框(ComboBox),这个改变允许用户可以构建一个名称列表,并可以通过一个组合框来选择对应的值 

 ListView中增加ComboBoxListCell Items

带有ComboBox列表单元的ListView组件

 

 样例中加粗的代码行调用了setCellFactory方法来重新定义列表单元的实现类

CellFactory机制不仅可以重新实现列表的单元,它还可以帮助你完全自定义列表单元的外观 

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.control.cell.ComboBoxListCell;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class ListViewSample extends Application {

    public static final ObservableList names =
            FXCollections.observableArrayList();//创建一个可观察的ArrayList对象
    public static final ObservableList data =
            FXCollections.observableArrayList();//创建一个客观擦的ArrayList对象

    public static void main(String[] args) {
        launch(args);//启动javaFX程序
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("ListView例子");

        final ListView listView = new ListView(data);//创建一个ListView组件,绑定集合对象data
        listView.setPrefSize(200, 250);//设置listView对象的大小
        listView.setEditable(true);//设置listView对象的可编辑属性

        names.addAll(
                "Adam", "Alex", "Alfred", "Albert",
                "Brenda", "Connie", "Derek", "Donny",
                "Lynne", "Myrtle", "Rose", "Rudolph",
                "Tony", "Trudy", "Williams", "Zach"
        );//将可观察的ArrayList数组对象添加相关值

        for (int i = 0; i < 18; i++) {
            data.add("选项"+i);//将可观察的ArrayList类型对象上添加数据值
        }

        listView.setItems(data);//将listView对象上面添加data集合中的数据元素作为选项

        listView.setCellFactory(ComboBoxListCell.forListView(names));//将listView组件的选项条目上添加一个ComboBoxListCell外观其上面挂载了一个可以被观察的ArrayList对象names中的数据

        StackPane root = new StackPane();//堆栈样式布局面板对象的创建
        root.getChildren().add(listView);//stackPane对象上添加listView组件
        primaryStage.setScene(new Scene(root, 200, 250));//创建场景对象并将场景上添加stackPane面板对象,并将舞台对象上添加场景
        primaryStage.show();//舞台展现
    }
}

 ___________________________________________

自定义List View的内容 

根据下面的程序何使用CellFactory来产生列表项。例中展示的程序创建了一个彩色列表 

创建一个CellFactory 

 

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

/**
 * @author zhaoyong
 * @Date 2022/1/12
 * @Description
 */
public class ListViewTest extends Application {

    ListView<String> list = new ListView<>();//创建一个listView对象将listView泛型化装载String类型数据
    ObservableList<String> data = FXCollections.observableArrayList(//定义一个可观察的ArrayList<String>集合
            "chocolate", "salmon", "gold", "coral", "darkorchid",
            "darkgoldenrod", "lightsalmon", "black", "rosybrown", "blue",
            "blueviolet", "brown");

    @Override
    public void start(Stage stage) {
        VBox box = new VBox();//创建一个垂直布局盒子
        Scene scene = new Scene(box, 200, 200);//创建一个场景对象
        stage.setScene(scene);//舞台设置场景
        stage.setTitle("ListViewSample");//设置一个标题对象
        box.getChildren().addAll(list);//盒子添加listView对象
        VBox.setVgrow(list, Priority.ALWAYS);//设置Vbox布局器对象的增长优先级

        list.setItems(data);//设置listView对象的选项列表值

        list.setCellFactory((ListView<String> l) -> new ColorRectCell());//给ListView类型对象添加Cell选项外观组件

        stage.show();//舞台展现
    }

    static class ColorRectCell extends ListCell<String> {//自定义一个ListView组件外观选择项目组件
        @Override
        public void updateItem(String item, boolean empty) {
            super.updateItem(item, empty);//更新listView对象的选项组件内容
            Rectangle rect = new Rectangle(100, 20);//创建一个矩形
            if (item != null) {
                rect.setFill(Color.web(item));//填充矩形对象颜色
                setGraphic(rect);//设置ListCell对象的图形外观
            }
        }
    }

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

Cell Factory产生ListCell对象。每个Cell与一个单独的数据项(DataItem)关联,并且会展示List View中的一行。通过setGraphic方法展现的Cell内容可以是其它的控件,文本、形状或图片。在本例中,ListCell展现了矩形 

你可以滚动这个列表,选中或者取消选中其中的任意项 

处理对列表项(ListItem)的选中事件 

使其可以处理指定列表项被选中时触发的事件 

import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

/**
 * @author zhaoyong
 * @Date 2022/1/12
 * @Description
 */
public class ListViewTest extends Application {

    ListView<String> list = new ListView<>();//创建一个listView对象将listView泛型化装载String类型数据
    ObservableList<String> data = FXCollections.observableArrayList(//定义一个可观察的ArrayList<String>集合
            "chocolate", "salmon", "gold", "coral", "darkorchid",
            "darkgoldenrod", "lightsalmon", "black", "rosybrown", "blue",
            "blueviolet", "brown");
    final Label label = new Label();//创建一个标签对象
    @Override
    public void start(Stage stage) {
        VBox box = new VBox();//创建一个垂直布局盒子
        Scene scene = new Scene(box, 200, 200);//创建一个场景对象
        stage.setScene(scene);//舞台设置场景
        stage.setTitle("ListViewSample");//设置一个标题对象
        box.getChildren().addAll(list, label);//盒子添加listView对象和label对象
        VBox.setVgrow(list, Priority.ALWAYS);//设置Vbox布局器对象的增长优先级

        list.setItems(data);//设置listView对象的选项列表值

        list.setCellFactory((ListView<String> l) -> new ColorRectCell());//给ListView类型对象添加Cell选项外观组件
        list.getSelectionModel().selectedItemProperty().addListener(//给listView对象的变更选择添加事件处理机制
                (ObservableValue<? extends String> ov, String old_val,
                 String new_val) -> {
                    label.setText(new_val);//标签上新值的显示
                    label.setTextFill(Color.web(new_val));//标签上新文本颜色的显示
                });
        stage.show();//舞台展现
    }

    static class ColorRectCell extends ListCell<String> {//自定义一个ListView组件外观选择项目组件
        @Override
        public void updateItem(String item, boolean empty) {
            super.updateItem(item, empty);//更新listView对象的选项组件内容
            Rectangle rect = new Rectangle(100, 20);//创建一个矩形
            if (item != null) {
                rect.setFill(Color.web(item));//填充矩形对象颜色
                setGraphic(rect);//设置ListCell对象的图形外观
            } else {
                setGraphic(null);
            }
        }
    }

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

 

在selectedItemProperty上调用addListener方法创建了一个新的监听器来处理被选中项的改变。例如:如果深紫色项被选中,则label会获得“darkorchid”标题并且会填充成对应的颜色。被修改后程序会输出如图 

 

 

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐