TornadoFX ObservableList不更新？圆圈无法定时绘制问题排查

我一眼就看出几个导致圆圈无法正常绘制的核心问题，咱们一个个拆解：

1. 集合类型错误：普通ArrayList无法触发UI更新 #

你用的ArrayList<Actor>是普通集合，没有内置的变更通知机制。虽然你调用了actors.observable()，但这个方法只是把现有元素临时包装成ObservableList，原ArrayList的后续修改不会同步到这个包装列表里，所以bindChildren根本不知道有新元素添加，自然不会绘制新圆圈。

2. 后台线程直接操作UI绑定集合 #

runAsync里的代码是在后台线程执行的，直接修改UI相关的集合不仅有线程安全风险，而且UI线程无法及时捕获到变更。TornadoFX要求所有UI相关的操作（包括修改绑定的ObservableList）必须在UI线程执行。

3. 冗余的init块（非致命但影响可读性） #

你写了两个独立的init块，虽然语法上允许，但逻辑分散，建议合并成一个，让代码结构更清晰。

修正后的完整代码 #

private const val WINDOW_HEIGHT = 600
private const val WINDOW_WIDTH = 1024

fun main(args: Array<String>) {
    Application.launch(MainApp::class.java, *args)
}

class MainApp : App(WorldView::class, Stylesheet::class)

data class Actor(val x: Double, val y: Double)

class WorldView : View("Actor Simulator") {
    override val root = VBox()
    // 直接使用TornadoFX自带的ObservableList，原生支持变更通知
    private val actors = mutableListOf<Actor>().observable()

    init {
        with(root) {
            stackpane {
                group {
                    // 直接绑定到ObservableList，无需额外包装
                    bindChildren(actors) { actor ->
                        circle {
                            centerX = actor.x
                            centerY = actor.y
                            radius = 10.0
                            println("drew circle at (${actor.x}, ${actor.y})")
                        }
                    }
                }
                button("Add actor") {
                    action {
                        // 按钮点击事件本身就在UI线程，直接添加元素即可
                        actors.add(Actor(0.0, 0.0))
                    }
                }
            }
        }

        // 后台线程生成坐标，通过uiThread切换到UI线程修改集合
        tornadofx.runAsync {
            repeat(100) {
                val x = ThreadLocalRandom.current().nextDouble(0.0, WINDOW_WIDTH.toDouble())
                val y = ThreadLocalRandom.current().nextDouble(0.0, WINDOW_HEIGHT.toDouble())
                // 必须切换到UI线程修改ObservableList，保证线程安全+UI实时更新
                uiThread {
                    actors.add(Actor(x, y))
                }
                Thread.sleep(100)
            }
        }
    }
}

关键修改点说明 #

• 替换ArrayList为ObservableList：用mutableListOf<Actor>().observable()直接创建支持变更通知的集合，这样bindChildren能实时感知元素添加，自动触发UI绘制。
• 后台线程通过uiThread修改集合：在runAsync里生成随机坐标后，用uiThread { ... }切换到UI线程添加元素，既规避了线程安全问题，又能让UI及时响应变更。
• 合并init块：把分散的初始化逻辑合并，代码结构更直观。

至于你提到打断点时能正常绘制，是因为断点会暂停后台线程，给UI线程留出足够时间处理变更（而且断点暂停时线程调度会发生变化，偶然触发了UI更新），但这不是程序的正常运行逻辑。

内容的提问来源于stack exchange，提问作者Malcolm Crum