利用Koltin扩展库编写登录窗口演示

Stage和Scene其实也没什么好介绍的，只有些小改动而已，
其它布局类的用法，后面文章会介绍。

下面直接用登陆窗口案例感受一下，
利用扩展函数createWindow直接创建窗口，第一参数可以写，也可以不写，
如果写就用传进来的Stage对象创建，如果不写，函数内部会自动创建一个窗口。

下面启动程序，创建一个窗口，窗口内容是一个Button按钮

fun main(args: Array<String>) {
    KApplication.launch(args){
        createWindow(it,"登陆窗口",300.0,200.0){KButton("Button")}
    }
}

效果如下

image.png

由于Button当做的根节点，所以默认大小布满整个窗口，这是意料之中的事情

接下来开始用布局当做根节点
一个登陆窗口，基本结构是，三行三列，如下结构
账号 输入框
密码 输入框
注册 登陆

那么可以利用垂直布局VBox和水平布局HBox组合，进行组合达到效果
一把登陆窗口都是禁止拉伸的，先把窗口属性添加上，然后下面再布局

fun main(args: Array<String>) {
    KApplication.launch(args){
        createWindow(it,"登陆窗口",300.0,200.0){
            isResizable=false //禁止窗口拉伸
            VBoxLayout {
                HBoxLayout { view(KLabel("账号:"),KTextField())}
                HBoxLayout { view(KLabel("密码:"),KPasswordField()) }
                HBoxLayout { view(KButton("注册"),KButton("登陆"))}
            }
        }
    }
}

如图所示

image.png

扩展库已经将JavaFX当中所有的布局类都进行了扩展，结尾都加了Layout，
并且会自动添加到外层控件里，所有才有上面的写法，不需要手动children.add

而且可以看出，布局结构已经有了，只是有些细节需要添加，特别是对齐方式。

首选我需要让VBox的子控件都居中，直接子控件是三个HBox，然后再让这三个HBox的子控件居中
这样，所有内容都会居中，效果会更好看

fun main(args: Array<String>) {
    KApplication.launch(args){
        createWindow(it,"登陆窗口",300.0,200.0){
            isResizable=false //禁止窗口拉伸
            VBoxLayout {
                alignment=Pos.CENTER
                HBoxLayout { view(KLabel("账号:"),KTextField())}.alignment=Pos.CENTER
                HBoxLayout { view(KLabel("密码:"),KPasswordField()) }.alignment=Pos.CENTER
                HBoxLayout { view(KButton("注册"),KButton("登陆"))}.alignment=Pos.CENTER

            }
        }
    }
}

如图所示

image.png

三个HBox的对齐方式都是居中，我写了三个，如果有100个控件，是不是要写100次，
答案是否定的，只需要拿到VBox子集合列表，做个循环统一设置就行了。
于是我在每个布局类的内部，扩展了childrenSet函数，可以遍历子节点，同时遍历参数里还会把子控件在第几位的索引也传进去
这一点比forEach要强，因为forEach没办法拿到索引，除非写额外代码

fun main(args: Array<String>) {
    KApplication.launch(args){
        createWindow(it,"登陆窗口",300.0,200.0){
            isResizable=false //禁止窗口拉伸
            VBoxLayout {
                alignment=Pos.CENTER
                HBoxLayout { view(KLabel("账号:"),KTextField())}
                HBoxLayout { view(KLabel("密码:"),KPasswordField()) }
                HBoxLayout { view(KButton("注册"),KButton("登陆"))}
                childrenSet { this as KHBox;alignment=Pos.CENTER }
            }
        }
    }
}

效果跟上图一样
childrenSet 是一个通用类型的方式，他的泛型只能指定Node，所以内部需要做个类型转换，必要时还得用if判断，转成不同子类型

下面继续改写，虽然已经居中了，但是太过于紧凑，那么给VBox和HBox都添加一个spacing属性间距，这样会好看一些

fun main(args: Array<String>) {
    KApplication.launch(args){
        createWindow(it,"登陆窗口",300.0,200.0){
            isResizable=false 
            VBoxLayout {
                alignment=Pos.CENTER
                spacing=15.0
                HBoxLayout { view(KLabel("账号:"),KTextField())}
                HBoxLayout { view(KLabel("密码:"),KPasswordField()) }
                HBoxLayout { view(KButton("注册"),KButton("登陆"))}
                childrenSet { this as KHBox;alignment=Pos.CENTER;spacing=10.0}
            }
        }
    }
}

效果如图

image.png

效果还可以，只是两个Button按钮，离得太近了，可以单独让最后一行的HBox间距大一点
不过没必要单独写，只需要在childrenSet 里面写就行，利用传进来的子控件索引，和if语句区分差异化即可

fun main(args: Array<String>) {
    KApplication.launch(args){
        createWindow(it,"登陆窗口",300.0,200.0){
            isResizable=false //禁止窗口拉伸
            VBoxLayout {
                alignment=Pos.CENTER
                spacing=15.0
                HBoxLayout { view(KLabel("账号:"),KTextField())}
                HBoxLayout { view(KLabel("密码:"),KPasswordField()) }
                HBoxLayout { view(KButton("注册"),KButton("登陆"))}
                childrenSet { this as KHBox;alignment=Pos.CENTER;spacing=if(it==2) 80.0 else 10.0}
            }
        }
    }
}

如图所示

image.png

这样一个登陆窗口就完成了，从启动程序到布局调整，不到20行代码
另外解释一下 spacing=if(it==2) 80.0 else 10.0 这句话
it表示childrenSet 传进来的子控件索引位置，2就表示索引为2，也就是最后一行的HBox
然后设置它的间隔，等2表示最后一行的HBox间隔设置80，其它的都设置10

这篇文章就到这，下一篇文章再讲，Button按钮和输入框该如何交互，该如何设置里面这些控件的属性