Qt具有可調整大小的行和列的QML網格

Question

我想向我的QML應用程序添加一個網格，該網格的行和列可以在運行時調整大小。

認爲excel表。我可以通過向上和向下拖動頂部/底部邊框來調整整行的大小。我可以左右拖動左右邊框來調整整個列的大小。這與具有水平和垂直方向的SplitView類似。

我一直在搜索一個答案，但繼續得到的結果不是我所期待的。

任何想法？

Answer 1

一個GridView總是固定單元大小。你應該嘗試使用TableView

Answer 2

這裏沒有什麼可做的。只需使用QML綁定和錨定來實現這一點。

import QtQuick 2.0 

Item { 
    width: 500; height: 500 

    GridView { 
     id: gridView 
     width: 300; height: 200 
     cellWidth: 80; cellHeight: 80 

     Component { 
      id: contactsDelegate 
      Text { 
       id: contactInfo 
       text: modelData 
      } 
     } 

     model: 5 
     delegate: contactsDelegate 
    } 

    Rectangle { 
     id: add 
     width: 100 
     height: 20 
     border.color: "red" 
     anchors { 
      top: parent.top 
      topMargin: 10 
      right: parent.right 
      rightMargin: 5 
     } 
     Text { 
      anchors.fill: parent 
      text: "Add Item" 
     } 

     MouseArea { 
      anchors.fill: parent 
      onClicked: gridView.model++ 
     } 
    } 

    Rectangle { 
     id: newWidth 
     width: 100 
     height: 20 
     border.color: "red" 
     anchors { 
      top: add.bottom 
      topMargin: 10 
      right: parent.right 
      rightMargin: 5 
     } 
     Text { 
      anchors.fill: parent 
      text: "New Width" 
     } 

     MouseArea { 
      anchors.fill: parent 
      onClicked: gridView.width += 100 
     } 
    } 

    Rectangle { 
     width: 100 
     height: 20 
     border.color: "red" 
     anchors { 
      top: newWidth.bottom 
      topMargin: 10 
      right: parent.right 
      rightMargin: 5 
     } 
     Text { 
      anchors.fill: parent 
      text: "New Height" 
     } 

     MouseArea { 
      anchors.fill: parent 
      onClicked: gridView.height += 100 
     } 
    } 

} 

或者，如果你想GridView的width和height通過調整窗口來改變，這樣做如下：

import QtQuick 2.0 

Item { 
    width: 500; height: 500 

    GridView { 
     id: gridView 
     anchors { 
      top: parent.top 
      left: parent.left 
      right: parent.right 
      bottom: parent.bottom 
      bottomMargin: 35 
     } 
     clip: true 
     cellWidth: 80; cellHeight: 80 

     Component { 
      id: contactsDelegate 
      Text { 
       id: contactInfo 
       text: modelData 
      } 
     } 

     model: 5 
     delegate: contactsDelegate 
    } 

    Rectangle { 
     id: add 
     width: 100 
     height: 20 
     border.color: "red" 
     anchors { 
      bottom: parent.bottom 
      bottomMargin: 10 
      horizontalCenter: parent.horizontalCenter 
     } 
     Text { 
      anchors.fill: parent 
      text: "Add Item" 
     } 

     MouseArea { 
      anchors.fill: parent 
      onClicked: gridView.model++ 
     } 
    } 
}