kotlin - 如何重构 View 以允许过滤绑定(bind)到 tornadofx 应用程序内的 observableArrayList 的项目

Question

我从 gradle hello-world 开始找到的示例 https://github.com:JetBrains/kotlin-examples.git并将其修改为使用 TornadoFX。

这是一个显示项目列表的应用程序。您可以添加到列表中，RequestView将自动显示所有项目。

我让它工作，以便存储的项目绑定(bind)到 observableArrayList但我现在想使用 TextView 实现过滤器在底部。但是，我很难理解这是否意味着我应该创建一个在 RequestView 内部管理的新列表。 ，并从中过滤，或如何做到这一点。

package demo

import javafx.collections.FXCollections
import javafx.geometry.Pos
import javafx.scene.control.TextField
import javafx.scene.layout.VBox
import javafx.scene.text.FontWeight
import tornadofx.*

class helloWorldApp : App(HelloWorld::class) {
}

class HelloWorld : View() {

    override val root = VBox()

    var requestView: RequestView by singleAssign()
    var filterField: TextField by singleAssign()

    init {
        with(root) {
            requestView = RequestView()
            this += requestView
            filterField = TextField()
            this += filterField
        }

        requestView.items.add("Hi there")
        requestView.items.add("Another one")

    }

}

class RequestView() : View() {
    var items = FXCollections.observableArrayList<String>()

    override val root = listview(items) {
        cellFormat {
            graphic = cache {
                form {
                    fieldset {
                        label(it) {
                            alignment = Pos.CENTER_LEFT
                            style {
                                fontSize = 15.px
                                fontWeight = FontWeight.BOLD
                            }
                        }
                    }
                }
            }
        }
    }
}

这是 build.gradle 文件，以防万一。

buildscript {
  ext.kotlin_version = '1.1.2'
  repositories {
    mavenCentral()
  }
  dependencies {
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
  }
}


apply plugin: 'kotlin'
apply plugin: 'application'

mainClassName = 'demo.helloWorldApp'

defaultTasks 'run'

repositories {
  mavenCentral()
}

tasks.compileKotlin.kotlinOptions.jvmTarget = "1.8"

dependencies {
  compile "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
  testCompile 'junit:junit:4.11'
  testCompile "org.jetbrains.kotlin:kotlin-test-junit:$kotlin_version"
  compile 'no.tornado:tornadofx:1.7.10'
}

task wrapper(type: Wrapper) {
  gradleVersion = "2.7"
}

Answer 1

您应该使用 SortedFilteredList它包装了一个 ObservableList 并接受一个用于区分条目的谓词。

不幸的是，您的两个 View 之间存在耦合，因此您应该考虑触发一个事件，但这是一个工作解决方案，对您的示例进行了最小的更改。我确实将数据移动到模型中，并清理了 ui 代码，以及摆脱了 singleAssign声明并向 build 者应用了一些最佳实践:)

如您所见，SortedFilteredList有一个 filterWhen将在 textProperty() 时调用的函数的文本字段更改。

class HelloWorldApp : App(HelloWorld::class)

class HelloWorld : View() {
    val requestView: RequestView by inject()

    override val root = vbox {
        add(requestView)
        textfield {
            promptText = "Filter"
            requestView.data.filterWhen(textProperty()) { query, item ->
                item.contains(query, ignoreCase = true)
            }
        }
    }
}

class ItemsModel : ViewModel() {
    val items = FXCollections.observableArrayList<String>()

    fun addItem(item: String) = items.add(item)

    init {
        addItem("Hi there")
        addItem("Another one")
    }
}

class RequestView() : View() {
    val model: ItemsModel by inject()
    val data = SortedFilteredList(model.items)

    override val root = listview(data) {
        cellFormat {
            graphic = cache {
                form {
                    fieldset {
                        label(it) {
                            alignment = Pos.CENTER_LEFT
                            style {
                                fontSize = 15.px
                                fontWeight = FontWeight.BOLD
                            }
                        }
                    }
                }
            }
        }
    }
}