4_kotlin桌面开发_使用FXML编写UI,串口助手UI部分

1_使用FXML编写UI

参考官方文档(汉化)
新建FXML文件

4_kotlin桌面开发_使用FXML编写UI,串口助手UI部分_第1张图片
新建FXML文件

取一个名字,要跟继承View的文件名字相同
4_kotlin桌面开发_使用FXML编写UI,串口助手UI部分_第2张图片
取名字

4_kotlin桌面开发_使用FXML编写UI,串口助手UI部分_第3张图片
托控件

这段fxml代码是它代码模式代码(可以不用管它)








   
      
4_kotlin桌面开发_使用FXML编写UI,串口助手UI部分_第4张图片
引入布局
package com.example.demo.view


import javafx.scene.layout.BorderPane
import tornadofx.*

class MainView : View("Hello TornadoFX") {
    override val root : BorderPane by fxml()

}

发现运行出错啦!!!这是因为布局文件FXML文件位置不对,应该放置到生成文件里面,我们剪切粘贴一下放到那个位置就可以了。


4_kotlin桌面开发_使用FXML编写UI,串口助手UI部分_第5张图片
运行出错
4_kotlin桌面开发_使用FXML编写UI,串口助手UI部分_第6张图片
剪切
4_kotlin桌面开发_使用FXML编写UI,串口助手UI部分_第7张图片
粘贴
4_kotlin桌面开发_使用FXML编写UI,串口助手UI部分_第8张图片
OK就好

编译运行一下


4_kotlin桌面开发_使用FXML编写UI,串口助手UI部分_第9张图片
运行成功

2_串口助手UI部分

4_kotlin桌面开发_使用FXML编写UI,串口助手UI部分_第10张图片
FXML布局