带有重叠节点和锚式定位的布局 [英] Layout with overlaying nodes and anchor-like positioning

问题描述

我尝试使用JavaFX进行布局，该布局允许覆盖节点，调整其大小以匹配(填充)容器大小并使它们与容器侧面对齐.我应该使用哪个布局窗格以及如何对其进行设置以实现图片中所示的布局.

I try to make a layout with JavaFX that allows overlaying nodes, resizing them to match (fill) container size and aligning them to container sides. Which layout pane should I use and how to set it to achieve the layout shown on the picture.

我试图将TreeView节点和SwingNode放在AnchorPane中，并设置锚点以填充容器，像这样 TreeView:顶部0，左侧0，底部0(无右锚以调整其大小以适合内容) SwingNode:全部为0 TreeView已正确显示，但底层的SwingNode不适合整个容器.看起来它的右锚点已应用到TreeView的右侧，而不是容器的右侧.因此它具有与TreeView相同的大小.在TreeView上设置边距后，我能够看到它.

I tried to put TreeView node and SwingNode in an AnchorPane and setting anchors to fill the container, like that TreeView: top 0, left 0, bottom 0 (no right anchor to let is resize to fit content) SwingNode: all to 0 TreeView was displayed correctly but underlaying SwingNode didn't fit to the whole container. It looked like its right anchor was applied to the TreeView right side, not the right side of the container. So it had the same size as the TreeView. I was able to see it after setting margins on TreeView.

使用TornadoFX DSL时，我的代码如下:

My code looked like that when using 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具有固定的宽度(或在可能的情况下适合其内容).

I want the layout to look like on the picture: . So that the part of the SwingNode is hidden under the TreeView and the TreeView has a fixed width (or fit to its content if possible).

推荐答案

为此，您必须使用堆栈窗格.因此，例如，树视图可以与 swingnode 放在不同的层上.

For that you have to use a stackpane. So your treeview can be on a different layer than your swingnode for example.

在堆栈窗格中最先添加的元素将在第二个元素下方.因此，您需要做的是:首先添加您的 stackpane ，该元素必须彼此重叠，在这种情况下，我使用的是 anchorpane an鱼鱼，您可以添加 swingnode ，并在 second 中添加树视图.

The Element Added first in a stackpane will be below the second one. So what you have to do is: first add your stackpane which has to elements overlapping each other in this case i used anchorpane and inside the first anchorpane you can add your swingnode and in the second you can add your 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 }
        }
    }
}

您甚至可以隐藏并显示动画:

you could even hide and show it with an animation:

为此，您必须定义val:

For that you have to define to val's:

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

init {
    openTreeView.toX = 0.0
    ...
}

例如，您可以使用setOnMouseClicked打开和关闭它:

And you could open and close it for example with an setOnMouseClicked:

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

这篇关于带有重叠节点和锚式定位的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！