面试题：Kotlin中TornadoFX图形界面开发的布局管理

Question

在Kotlin的TornadoFX框架中，简述如何使用不同的布局管理器（如VBox、HBox、GridPane）来排列界面元素。请举例说明每种布局管理器在实际场景中的应用，比如创建一个简单的登录界面，应如何选择和使用布局管理器？

Answer 1

VBox布局管理器

1. 排列方式：VBox将子元素垂直排列。
2. 示例 - 登录界面应用：

import tornadofx.*

class LoginView : View("Login") {
    override val root = vbox {
        label("Username")
        textfield()
        label("Password")
        passwordfield()
        button("Login")
    }
}

在这个登录界面示例中，用户名标签、用户名输入框、密码标签、密码输入框以及登录按钮垂直排列，适合这种上下结构的简单表单。

HBox布局管理器

1. 排列方式：HBox将子元素水平排列。
2. 示例 - 登录界面应用：

import tornadofx.*

class LoginView : View("Login") {
    override val root = hbox {
        vbox {
            label("Username")
            textfield()
        }
        vbox {
            label("Password")
            passwordfield()
        }
        vbox {
            button("Login")
        }
    }
}

这里通过在HBox中嵌套VBox，可实现用户名和密码输入部分水平排列，登录按钮在一侧的布局。比如希望用户名和密码输入框左右并排展示，就可采用这种方式。

GridPane布局管理器

1. 排列方式：GridPane以网格形式排列子元素，可通过设置行和列索引来精确控制元素位置。
2. 示例 - 登录界面应用：

import tornadofx.*

class LoginView : View("Login") {
    override val root = gridpane {
        label("Username").setColumnIndex(0).setRowIndex(0)
        textfield().setColumnIndex(1).setRowIndex(0)
        label("Password").setColumnIndex(0).setRowIndex(1)
        passwordfield().setColumnIndex(1).setRowIndex(1)
        button("Login").setColumnIndex(1).setRowIndex(2)
    }
}

在登录界面中，GridPane可以精确地将用户名标签和输入框、密码标签和输入框以及登录按钮放置在特定的行列位置，适合需要精确布局的场景，例如登录界面中各个元素间距和位置有严格要求的情况。