QML 旋转排列项目答案

【问题标题】：QML Arrange Items with RotationQML 旋转排列项目
【发布时间】：2017-02-10 18:31:16
【问题描述】：

我目前尝试设计一个带有旋转小部件（270°，红色）的 QML 应用程序，尽管代码给我带来了麻烦
以下是我想要实现的布局

结果是这样的

我编写的代码放错了红色矩形
我认为的原因是，Qt 保留的空间与其他项目无法使用的未旋转红色矩形的宽度一样多，因此将这些其他项目推到一边，在旋转的项目和其他项目之间留下很大的间隙项目
出于同样的原因，我没有使用 GridLayout，因为左列被拉伸了。
以下是我编写的代码

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

感谢您的帮助。

【问题讨论】：

标签： javascript c++ qt qml

【解决方案1】：

通过使用 GridLayout 并放置具有旋转矩形大小的 Item 解决了问题。此项目有一个孩子，其宽度和高度与父项目交换，然后旋转 270° 并锚定在中心。

【讨论】：