如何动态地向视图添加按钮？答案

【问题标题】：How to add a button to the view dynamically?如何动态地向视图添加按钮？
【发布时间】：2023-01-09 23:05:23
【问题描述】：

我是 Kotlin 和 TorandoFX 的新手。也许我在 TornadoFX 中遗漏了一些非常基本的东西。我想从视图中的列表（应该是可变的）按钮创建。如果用户单击添加按钮，列表应该得到一个新项目，这应该会在视图中产生一个新按钮。谢谢您的帮助。

我在想它应该是这样的：

import tornadofx.*

fun main(args: Array<String>) {
    launch<MyApp>(args)
}

class MyApp: App(MainView::class)

class MainView: View("MainView") {
    val values = ArrayList<Int>(listOf(1,2,3)).asObservable()
    var count = 4

    override val root = vbox {
        values.forEach { x ->
            button(x.toString())
        }

        button("add") {
            action {
                values.add(count)
                println(values.toString())
                count++
            }
        }
    }
}

this code result in this view, but if I click the button the view doesnt refresh. 此代码生成此视图，但如果我单击按钮，视图不会刷新。我想我遗漏了一些关于绑定的东西。

【问题讨论】：

我不了解 TornadoFX，但是是什么让您相信仅仅因为您向可观察列表添加了一个值就创建了一个额外的按钮？
我想，因为我在视图中遍历列表，它会自行更新它们。
但是据我所知，您并没有遍历按钮事件处理程序中的值（我也不知道 TornadoFX/kotlin）。事件处理程序需要创建一个额外的按钮并将其添加到 vbox。
创建按钮的代码仅在执行构造函数时执行一次，但是，正如@James_D 已经指出的那样，它不会在您的事件处理程序中执行。

标签： kotlin javafx tornadofx

【解决方案1】：

我们发现，我对绑定部分的看法是正确的。我只需要使用 bindChildren() 函数并为该函数提供一个 observableArray 和一个用于将数组元素转换为参数的函数。感谢您的帮助。

import javafx.collections.FXCollections
import tornadofx.*

fun main(args: Array<String>) {
    launch<MyApp>(args)
}

class MyApp: App(MainView::class)

class MainView: View("MainView") {
    val values = FXCollections.observableArrayList<Int>(listOf(1,2,3))
    var count = 4

    override val root = vbox {
        vbox {
            bindChildren(values) { x ->
                button(x.toString())
            }
        }

        vbox() {
            button("add") {
                action {
                    values.add(count)
                    count++
                }
            }
        }
    }
}

【讨论】：