JavaFX七巧板游戏：布局窗格Panes

原创

已于 2024-07-23 08:31:01 修改 · 2.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#kotlin #javafx #java #ui

于 2022-07-03 12:09:17 首次发布

Kotlin+JavaFX系列

JavaFX布局之各种`Pane`s

上次写博客还是上次。

自开始把这两东西一起学Kotlin+JavaFX的顺滑已经过去差不多5个月，联盟……都是废物。我已经编了大概3个小的应用软件，申请了两个软件著作权（一个图标库的实在无聊），最近又把专业方向的一个软件实现出来了。

我整个的学习方式都是捡到什么用什么，在GUI布局方面用得最熟的是三个：

BorderPane
VBox
HBox

差不多我已经觉得自己天下无敌，biu~~~【全文完】

这几天闲下来，感觉还是干点活。于是把JavaFX界面布局的核心类Pane的类图大概拉了一下。

除了我唯一学会的三板斧，还有一堆内容。那就开动吧，把源码和文档整理一下。看看下一步是不是能显得更专业一点。

开局一张图

`Pane`

从词源上看，Pane是窗户中的一块玻璃。在JavaFX中，Pane是一个Region（的子类），也就是代表窗口的一个区域，这个区域负责其children的定位（layout)。

所以的子类都暴露children属性（Java的getChildren方法，下面只采用Kotlin的，不再提醒对应的Java含义）,并实现子节点的定位。当然，children相关的实现实际上在Parent类中。

Pane类可以直接使用，这时候，就需要自行设置其子节点的位置。

class PaneLearningApplication : Application() {
   
   
    override fun start(primaryStage: Stage) {
   
   
        val canvas = Pane().apply {
   
   
        	// background: 展示Pane的区域
            style = "-fx-background-color: black;"
            setPrefSize(200.0, 200.0)
            children.addAll(Circle(50.0, Color.BLUE).apply {
   
   
            	// 蓝色的50半径的圆形
            	// 设置layoutX, layoutY，translateX和translateY不变
                relocate(20.0, 20.0)
            }, Rectangle(100.0, 100.0, Color.RED).apply {
   
   
            	// 红色的正方形，边长100.0
            	// 设置layoutX, layoutY，translateX和translateY不变
                relocate(70.0, 70.0)
            })
        }
        primaryStage.scene = Scene(canvas, 800.0, 600.0)
        primaryStage.show()
    }
}

fun main() {
   
   
    Application.launch(PaneLearningApplication