具有重叠节点和锚点定位的布局答案

【问题标题】：Layout with overlaying nodes and anchor-like positioning具有重叠节点和锚点定位的布局
【发布时间】：2019-05-14 14:30:09
【问题描述】：

我尝试使用 JavaFX 进行布局，允许覆盖节点、调整它们的大小以匹配（填充）容器大小并将它们与容器边对齐。我应该使用哪个布局窗格以及如何设置它以实现图片上显示的布局。

我尝试将TreeView 节点和SwingNode 放入AnchorPane 并设置锚点以填充容器，就像这样 TreeView：top 0，left 0，bottom 0（没有右锚可以调整大小以适应内容） SwingNode：全部为0 TreeView 显示正确，但底层 SwingNode 不适合整个容器。看起来它的右锚点应用于 TreeView 右侧，而不是容器的右侧。所以它的大小与 TreeView 相同。在 TreeView 上设置边距后，我能够看到它。

我的代码在使用 TornadoFX DSL 时是这样的：

anchorpane {
    swingnode {
        AnchorPane.setTopAnchor(this, 5.0)
        AnchorPane.setLeftAnchor(this, 5.0)
        AnchorPane.setBottomAnchor(this, 5.0)
        AnchorPane.setRightAnchor(this, 5.0)
    }

    treeview {
        AnchorPane.setTopAnchor(this, 5.0)
        AnchorPane.setLeftAnchor(this, 5.0)
        AnchorPane.setBottomAnchor(this, 5.0)
    }
}

我希望布局看起来像图片上的那样：。使 SwingNode 的部分隐藏在 TreeView 下，并且 TreeView 具有固定宽度（或尽可能适合其内容）。

【问题讨论】：

您如何设法将swingnode 与 TornadoFX 一起使用？当我尝试时，我得到unresolved reference: swingnode（在 IntelliJ 中）

标签： javafx kotlin javafx-8 tornadofx

【解决方案1】：

为此，您必须使用 stackpane。因此，您的 treeview 可以与您的 swingnode 位于不同的层。

在堆栈窗格中第一个添加的元素将位于第二个元素的下方。所以你需要做的是：first 添加你的 stackpane 元素必须相互重叠，在这种情况下我使用 anchorpane 并在第一个里面anchorpane您可以添加您的swingnode，然后在第二您可以添加您的treeview。

你举个粗略的例子：

stackpane {
    alignment = Pos.CENTER_LEFT
    vgrow = Priority.ALWAYS
    anchorpane {       //Layer 0
        vgrow = Priority.ALWAYS
        swingnode {
            anchorpaneConstraints { topAnchor = 5.0; rightAnchor = 5.0; bottomAnchor = 5.0; leftAnchor = 5.0 }
        }
    }
    anchorpane {       //Layer 1 would be above Layer 0
        minWidth = 115.0
        maxWidth = 115.0
        translateX = -115.0   //Default width of treeview anchorpane negativ for hiding it at start otherwithe remove this line
        treeview {
            anchorpaneConstraints { topAnchor = 5.0; bottomAnchor = 5.0 }
        }
    }
}

您甚至可以用动画隐藏和显示它：

为此，您必须定义为 val 的：

companion object {
    val openTreeView = TranslateTransition(Duration(500.0), <your anchorpane>)
    val closeTreeView = TranslateTransition(Duration(500.0), <your anchorpane>)
    ...
}

init {
    openTreeView.toX = 0.0
    ...
}

您可以使用 setOnMouseClicked 来打开和关闭它：

setOnMouseClicked {
    if (<your anchorpane>.translateX != 0.0) {
        openTreeView.play()
    } else {
        closeTreeView.toX = -<your anchorpane>.width
        closeTreeView.play()
    }
}

【讨论】：