JavaFX之ListView的使用

 ListView是一个很常见的控件。在JavaFX中，ListView也拥有很丰富的功能。下面，我们来看看如何使用ListView。

  ListView位于javafx.scene.control包中，该包是包含javafx中的所有UI控件。

  继承结构如下:

  


  1.ListView的基础用法

[java] view
plaincopy

ObservableList<String> strList = FXCollections.observableArrayList("红色","黄色","绿色");  

ListView<String> listView = new ListView<>(strList);  

listView.setItems(strList);  

listView.setPrefSize(400, 200);  

root.getChildren().add(listView);  

  我们首先通过FXCollections来创建我们ListView需要的数据填充。

  通过setItems可以给ListView填充数据。同时设置ListView当前的大小。

  显示效果如下:

  


  2.ListView的选择事件

  有时候，当我们点击ListView的Item的时候，我们进行相应的事件处理。

  当然，ListView的事件同样是通过属性绑定机制来实现的，详情请见我的另外一篇文章:浅谈JavaFX事件机制

    下面是代码:

[java] view
plaincopy

Label label = new Label("...");  

label.textProperty().bind(listView.getSelectionModel().selectedItemProperty());  

label.setLayoutY(200);  

root.getChildren().add(label);  

   这里只是简单的将label的text属性绑定到listview的选择属性上面，当listview的选择改变时，label的文本跟着一起改变。

  效果图:

  


  同样的，我们可以对ListView的选择属性，添加改变事件，如下:

[java] view
plaincopy

Label label = new Label("...");  

label.setLayoutY(200);  

root.getChildren().add(label);  

listView.getSelectionModel().selectedItemProperty().addListener(  

        (ObservableValue<? extends String> observable, String oldValue, String newValue) ->{  

        label.setText(newValue);  

});  

  可以达到同样的效果。

  这里使用了lambda表达式(后面其实是new ChangeListener来监听属性的改变)。没有用JDK 8的朋友们去下载吧。

  

  3.ListView的编辑

  同TableView里面Item可以编辑一样，ListView也提供这样的功能。只不过，我们需要改变ListView的CellFactory。

  在上述示例中，我们只需要添加如下代码:

[java] view
plaincopy

listView.setCellFactory(TextFieldListCell.forListView());  

listView.setEditable(true);  

  我们将ListView的CellFactory设置为TextFieldListCell，来提供编辑功能。

  在JavaFX中，提供了很多默认可以使用的Cell，大家可以自己去看文档javafx.scene.control.cell包中。我就不一一列出来了。

  效果图如下:

  


  双击某个Item，就会进入编辑状态，按回车，编辑就完成。同时，选择属性也会改变。

  如果你希望自己来控制ListView Item编辑的相关操作，这里也有三个事件:

  setOnEditStart   编辑开始

  setOnEditCommit  编辑完成

  setOnEditCancel   编辑取消

  这些事件会在你进行编辑的时候执行，有需求可以在这三个事件中做相应的处理。

  4.ListView的自定义Item

  不管怎么说，官方提供的ListView Cell不一定能满足我们的需求。我们通常会自定义ListCell来实现自己想要的效果。

  这样，我们需要继承ListCell来实现自己的Cell。

  代码如下所示:

  

[java] view
plaincopy

//ListView的自定义  

ObservableList<String> strList = FXCollections.observableArrayList("red","blue","gold");  

ListView<String> listView = new ListView<>(strList);  

listView.setItems(strList);  

listView.setPrefSize(400, 200);  

listView.setCellFactory((ListView<String> l) -> new ColorCell());  

listView.setEditable(true);  

root.getChildren().add(listView);  

              

Label label = new Label("...");  

label.textProperty().bind(listView.getSelectionModel().selectedItemProperty());  

label.setLayoutY(200);  

root.getChildren().add(label);  

class ColorCell extends ListCell<String> {  

    @Override  

    protected void updateItem(String item, boolean empty) {  

        super.updateItem(item, empty);  

        Rectangle rect = new Rectangle(100, 20);  

            if (item != null) {  

               rect.setFill(Color.web(item));  

               setGraphic(rect);  

            } else {  

               setGraphic(null);  

            }  

     }  

}  

  我们通过继承ListCell，实现UpdateItem方法，来自定义每个Cell的内容。

  效果图如下:

  


  ListView的使用讲解就到这里了。基本上能用的到内容也都在这里了。下一节课再见。

  本文章为个人原创，转载请注明出处:http://blog.csdn.net/wingfourever,本人的个人博客:http://www.wjfxgame.com

-----------------------------------------------------------------------------------------------------------

  有一段时间没有写博客了，也不知为何，总有点疲惫的样子。虽然公司体检，并无什么问题。看来，也可能是IT行业的通病，工作三年来，从每天精神抖擞，充满激情，到略有疲惫，激情褪去。有人说的那啥，时间是一把XX刀。

  个人网站之前用的WordPress，但是实在太不适合写代码了，经常更换主题，导致代码插件不兼容，显示效果各种坑爹。又是折腾插件，又是折腾这折腾那的，表示累了。一横心把wordpress数据库备份了下，就清空换Z-Blog了。虽然我也是IT行业，但仅仅只是想写点教程，写点文字，而不想继续花这么多时间折腾在这些无意义的事情上。

  最近用Unity3D做了个文字游戏的模版，写脚本就可以完成游戏了。不过没有时间写剧本。


  下面是截图:

  


  


  


  由于只是测试用的脚本，所以文字信息可以忽略。。


  另外，最近在用JavaFX做一个游戏地图编辑器，准备用在Unity3D开发2D的RPG或者策略类游戏。大家如果感兴趣的话，也可以在完成这个地图编辑器后开源。

  


  具体工作计划将会在个人博客中介绍。感谢支持。