如何在QML中創建交錯網格視圖？

Question

我想爲我的QML應用程序創建一個交錯的網格視圖，如下圖所示。我曾嘗試使用QML Flow和QML Grid，但是它們都不會導致我想要的設計。

例如，當我用QML流，它導致在該行總是在相同的Y值開始。

Answer 1

我實現了一個交錯的網格視圖（我稱之爲ColumnFlow）我的應用程序項目儀表盤，並將它在以GPLv3授權的獨立的庫。下面是它的外觀：

爲ColumnFlow的源代碼是我的GitHub庫iBeliever/ubuntu-ui-extras。最初的實現是由另一位開發人員在我的圖書館的一個分支中啓動的，然後我重新進入並進行了大量更改，使其按照我需要的方式工作。

您可以在sonrisesoftware/project-dashboard中找到如何使用它的各種示例，例如Settings page。

Answer 2

你設置你的流量容器來Flow.TopToBottom的flow財產？

在這種情況下，項目從頂部到底部彼此相鄰放置，直到超出流的高度，然後包裝到下一列。爲了獲得垂直滾動行爲，只需將您的Flow設置爲Flickable即可。

在我看來，它非常接近你想要實現的目標。這裏有一個小的工作示例（QtQuick 2.2）

Flickable 
{ 
    anchors.fill: parent 
    anchors.margins: 5 
    contentHeight: flow.height 

    Flow 
    { 
     id: flow 
     width: parent.width 
     height: 800 
     spacing: 10 
     flow: Flow.TopToBottom 
     Repeater 
     { 
      model: [80,60,120,75,90,55,140,50,70,90,80,60,120,75,90] 
      Rectangle 
      { 
       height: modelData 
       width: 100 
       border.color: "black" 
      } 
     } 
    } 
}