Компоновка с наложением узлов и позиционированием, подобным привязке

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 .

Элемент, добавленный первым в стеке, будет ниже второго.Итак, что вам нужно сделать, это: first добавьте stackpane , который имеет элементы, перекрывающие друг друга, в этом случае я использовал anchorpane и внутри первого anchorpane вы можете добавить свой swingnode и в second вы можете добавить свой treeview .

Youst грубый пример:

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