面试题：Kotlin TornadoFX应用的数据绑定与响应式编程

Question

假设你正在使用Kotlin和TornadoFX开发一个待办事项列表应用。请阐述如何使用数据绑定和响应式编程来实现：当用户在输入框中输入新的待办事项并点击添加按钮后，新的待办事项能实时显示在列表中，并且列表中的每个待办事项都有一个删除按钮，点击删除按钮能将其从列表中移除。请给出关键代码片段及简要解释。

Answer 1

1. 定义数据模型：
   • 首先定义一个数据类来表示待办事项。

   data class TodoItem(val id: Int, var text: String)
   

   • 这个类有一个唯一标识id和待办事项的文本text。var关键字表示text可以被修改。
2. 创建视图模型：
   • 使用ViewModel来管理数据和状态。

   class TodoViewModel : ViewModel() {
       val todoList = FXCollections.observableArrayList<TodoItem>()
       val newTodoText = SimpleStringProperty("")
   
       fun addTodo() {
           if (newTodoText.get().isNotEmpty()) {
               val newId = todoList.size + 1
               val newTodo = TodoItem(newId, newTodoText.get())
               todoList.add(newTodo)
               newTodoText.set("")
           }
       }
   
       fun removeTodo(todo: TodoItem) {
           todoList.remove(todo)
       }
   }
   

   • todoList是一个可观察的ArrayList，用于存储所有待办事项，这样当列表发生变化时，视图会自动更新。
   • newTodoText是一个SimpleStringProperty，用于绑定输入框的文本，以便实时获取用户输入。
   • addTodo方法在用户点击添加按钮时被调用，它将新的待办事项添加到todoList中，并清空输入框。
   • removeTodo方法在用户点击删除按钮时被调用，它从todoList中移除指定的待办事项。
3. 创建视图：

   class TodoView : View("Todo List") {
       val viewModel: TodoViewModel by inject()
   
       override val root = vbox {
           hbox {
               textfield(viewModel.newTodoText)
               button("Add") {
                   action { viewModel.addTodo() }
               }
           }
           listview(viewModel.todoList) {
               cellFormat {
                   hbox {
                       label(it.text)
                       button("Delete") {
                           action { viewModel.removeTodo(it) }
                       }
                   }
               }
           }
       }
   }
   

   • textfield(viewModel.newTodoText)将输入框与newTodoText属性绑定，实现数据双向绑定，用户输入会实时更新newTodoText，newTodoText变化也会更新输入框。
   • button("Add")的action调用viewModel.addTodo()，当用户点击添加按钮时执行添加操作。
   • listview(viewModel.todoList)显示待办事项列表，cellFormat为每个列表项设置布局，包含待办事项文本和删除按钮。删除按钮的action调用viewModel.removeTodo(it)，其中it是当前列表项，实现删除功能。

通过上述代码，利用TornadoFX的数据绑定和响应式编程特性，实现了待办事项列表应用的添加和删除功能。