带有重叠节点和锚式定位的布局

Question

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

我试图将TreeView节点和SwingNode放在AnchorPane中，并设置锚点以填充容器，就像这样 TreeView：顶部0，左侧0，底部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具有固定的宽度（或在可能的情况下适合其内容）。

Answer 1

为此，您必须使用堆栈窗格。因此，例如，树视图可以与 swingnode 位于不同的层。

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

一个简单的例子：

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()
    }
}