QML Arrange Items with Rotation

Question

i currently try to design a QML Application with a rotated widget (270°, red), though the code causes me trouble
Following is the layout i want to achieve

The result looks like this

The code i programmed misplaces the red rectangle
The reason in my opinion is, that Qt reserves space as much as the width of the not rotated red rectangle which can't be used by other items and thus pushes these other items aside, leaving a big gap between the rotated item and the other items
For the same reason i didn't use a GridLayout, because the left column gets stretched.
Following is the code i programmed

Item {
id: item1
anchors.fill: parent

Label {
    width: 0.6*parent.width
    height: 0.15*parent.height

    id: chartName
    text: "Hallo Welt"

    anchors.right: parent.right
    anchors.bottom: chartImage.top
    anchors.left: chartImage.left
    anchors.top: parent.top
}

Item {
//ChartView {
    width: 0.6*parent.width
    height: 0.25*parent.height

    id: sideChart

    //anchors.right: chartImage.top
    //anchors.left: chartImage.bottom
    anchors.bottom: chartImage.left
    anchors.top: parent.left

    rotation: 270
}

Image {
    width: 0.6*parent.width
    height: 0.6*parent.height

    id: chartImage

    anchors.top: chartName.bottom
    anchors.right: parent.right
    anchors.bottom: bottomChart.top
    anchors.left: sideChart.right

    source: "images/Objective_speckle.jpg"
    fillMode: Image.PreserveAspectFit
    cache: false
}

Item {
//    ChartView {
      width: 0.6*parent.width
      height: 0.25*parent.height

      id: bottomChart

      anchors.right: parent.right
      anchors.left: chartImage.left
      anchors.bottom: parent.bottom
      anchors.top: chartImage.bottom
}
}

Help is appreciated.

Krustenkaese Krustenkaese · Accepted Answer · 2017-02-10T19:48:30

Problem solved by using a GridLayout and placing an Item with size of the rotated rectangle. This Item has a child with swapped width and height of the parent and is then rotated by 270° and anchored in the center.

QML Arrange Items with Rotation

1 Answers