Qt具有可调整大小的行和列的QML网格

问题描述：

我想向我的QML应用程序添加一个网格，该网格的行和列可以在运行时调整大小。Qt具有可调整大小的行和列的QML网格

认为excel表。我可以通过向上和向下拖动顶部/底部边框来调整整行的大小。我可以左右拖动左右边框来调整整个列的大小。这与具有水平和垂直方向的SplitView类似。

我一直在搜索一个答案，但继续得到的结果不是我所期待的。

任何想法？

答

一个GridView总是固定单元大小。你应该尝试使用TableView

非常感谢。这正是我正在寻找的。问题是我正在使用Qt Creator Designer，出于某种原因，这个类没有出现在QML类型中。我有QtQuick.Controls 1.4导入，但这仍然不会出现。是否可以使用拖放式界面来创建这些界面？ – user1697999

很高兴我能帮到你。我不知道设计师，我从来没有使用过。我认为你应该自己编写代码。如果你需要帮助，你可以回到我身边。 – Teimpz

答

这里没有什么可做的。只需使用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++ 
     } 
    } 
}

Qt具有可调整大小的行和列的QML网格

相关推荐