2

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

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

我让它工作，以便存储的项目绑定到，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"
}
4

1 回答 1

2

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

不幸的是，您的两个视图之间存在耦合，因此您应该考虑触发一个事件，但这是一个工作解决方案，对您的示例进行了最小的更改。我确实将数据移动到模型中，并清理了 ui 代码，并删除了singleAssign语句并将一些最佳实践应用于构建器:)

如您所见，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
                            }
                        }
                    }
                }
            }
        }
    }
}
于 2017-11-15T22:31:48.587 回答