JavaFx ObservableList的使用详解

原文地址:JavaFx ObservableList的使用详解 | Stars-One的杂货小窝

最近在研究MVVM模式,发现可以将之前写的FxRecyclerView控件改造一下,便是开始尝试,尝试过程中发现了不少坑,但是网上资料不是太全面,这里便写一篇笔记记录一下,以供后来者的学习

注:由于本人使用的是TornadoFx来编写JavaFx项目,所以本文代码是使用Kotlin进行编写,需要有Kotlin基础,阅读前请须知,以免浪费你宝贵的时间

介绍

在MVVM模式火的今天,没想到之前JavaFx已经早有实现,_{估计现在市面这些都是玩别人剩下的了}

这次也是想到了之前的FxRecyclerView控件可以拿MVVM改造一番

网上的资料并不多,仅有少有的一两篇,无奈之下,只得自己啃着官方文档,自己摸索,终于是把基本的使用摸清了

ObservableList,正如其名,可观察的List,它与List一样,也是个接口(Java的基础知识了..)

官方简短介绍:

A list that allows listeners to track changes when they occur.

大意为当数据改变时,ObservableList可以监听到这些改变,本质上是提供了一个监听器接口ListChangeListener.Change来进行相关的监听,

怎么监听呢?只需要设置监听器即可

val observableList = observableListOf(0,1,2,3)
observableList.onChange { change ->
     while (change.next()) {
         when {
            change.wasPermutated() -> println("permutated (${change.from} ,${change.to})")
            change.wasReplaced() -> println("replace (${change.from} ,${change.to})")
            else -> {
                when {
                    change.wasAdded() -> println("add (${change.from} ,${change.to})")
                    change.wasRemoved() -> println("remove (${change.from} ,${change.to})")
                    change.wasUpdated() -> println("update (${change.from} ,${change.to})")
                }
            }
        }
     }
}

官方的使用中,必须要求我们在监听之前调用next方法,其返回false表示当前已经是最后一次改变

wasPermutated()这种方法都是返回的boolean值,当数据发生对应符合的变化,各自对应的方法会返回true

change.from和change.to两个属性在后面提及,这里稍微留意一下

三种监听类型

从上面的代码中,我们可以看到有几个分支条件,每个分支就是数据发生了某种改变,基本的有三种情况:

1. List排列顺序改变
2. List中的数据发生改变(数据更新)
3. List的数据添加及删除(数据新增或删除)

PS:官方文档说明中,监听的顺序依次为wasPermutated、add/remove、update

下面对这几种情况进行说明

1.排列更新监听

顺序排列更新,对应的change.wasPermutated(),其返回值为boolean值,当ObservableList的顺序发生变化(即进行了排序操作),此方法就会返回为true

fun main() {
    val observableList = observableListOf(0,1,2,3)
    println(observableList)
    observableList.onChange { change ->
        while (change.next()) {
            when {
                change.wasPermutated() -> println("permutated (${change.from} ,${change.to})")

                change.wasReplaced() -> println("replace (${change.from} ,${change.to})")
                else -> {
                    when {
                        change.wasAdded() -> println("add (${change.from} ,${change.to})")
                        change.wasRemoved() -> println("remove (${change.from} ,${change.to})")
                        change.wasUpdated() -> println("update (${change.from} ,${change.to})")
                    }
                }
            }
        }
    }
    observableList.sortBy { it }
    println(observableList)
    observableList.sortByDescending { it }
    println(observableList)
}

对应的输出结果为:

[0, 1, 2, 3]  //源数组
permutated (0 ,4) //回调监听器中的方法
[0, 1, 2, 3] //升序排列
permutated (0 ,4)
[3, 2, 1, 0] //降序排列

2.数据更新监听(replace)

这里大家可能会有点疑惑,最上面的代码不是有个wasUpdated()方法吗,这里怎么标的是replace?

我自己研究的时候,也是很奇怪...官方的那个wasUpdated()方法没有找到对应的回调方式,照理说我更新了数组中的一个数据,这个wasUpdated()应该返回的是true,但是实际测试的时候根本没有,反而是wasReplaced()返回了true

//上面省略相关代码...
//JavaFx对应是set(index,element)方法
observableList[1] = 12 //下标为1的对象更新为12
println(observableList)

输出结果:

[0, 1, 2, 3]
replace (1 ,2)
[0, 12, 2, 3]

3.数据添加与删除监听(add remove)

数据添加和删除就和上面同理了,当我们调用add()(包括addAll())和remove()方法,对应的wasAdd()和wasRemove()方法就会返回true

另外,ObservableList提供了两个List供我们拿到添加的数据和移除的数据

• change.addedSubList 新增的数据列表
• change.removed 被移除的数据列表

补充:from与to

这里大家可能就注意到了change对象的from和to这两个属性的区别了

本质上,ObservableList里面定义的from和to这两个代表开始下标和结束下标,在数据发生改变的时候,记录了是哪几条数据发生了改变,之后提供给我们,我们在ObservableList.change监听器方法中就可以使用这两个变量来进行相关的逻辑操作

以下是官方对from的说明:

If wasAdded is true, the interval contains all the values that were added. If wasPermutated is true, the interval marks the values that were permutated. If wasRemoved is true and wasAdded is false, getFrom() and getTo() should return the same number - the place where the removed elements were positioned in the list.

注意重点:如果是数据移除操作,返回的from和to数值是相同的

ObservableList方法说明

• addAll()
• remove(from,to) 移除[from,to)之间的元素,from是包含,to是不包含的,注意与remove监听事件返回的from和to都是相同的
• move(oldIndex,newIndex) 将下标为oldIndex移动至newIndex下标处

补充:移动监听(move)

之前没有找到更新的方法,发现了ObservableList有move的方法,没想到这个在ObservableList中其实是先做remove操作,之后再做add操作

//代码与上面的一致,已省略
//将下标1的数据移动到下标3的位置
observableList.moveAt(1,3)
println(observableList)

输出结果:

[0, 1, 2, 3]
remove (1 ,1)
add (3 ,4)
[0, 2, 3, 1]

参考

• JavaFX - 如何处理ObservableList的更改操作_W3Cschool代码实例
• ListChangeListener.Change (JavaFX 8)
• ObservableList (JavaFX 8)