如何在 QtQuickControls2 中使用 TableView 和 ListModel 数据？答案

【问题标题】：How to use TableView with ListModel data in QtQuickControls2?如何在 QtQuickControls2 中使用 TableView 和 ListModel 数据？
【发布时间】：2020-11-20 07:21:32
【问题描述】：

如何使用样式代表在此表中插入列？

我使用的是QtQuick.Controls 2，所以这里不能使用旧QtQuick的TableViewColumn。

https://www.qt.io/blog/2016/10/06/qt-quick-controls-2-1-and-beyond

Qt Quick Controls 1 中一些值得注意的缺失功能是 Action、SplitView、TableView 和 TreeView。

如果根本不支持，那么QML中表格的形成方法是什么？

出路是什么？

import QtQuick.Window 2.12
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Styles 1.4

Window
{
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    TableView
    {
        height: 200; width: 200
        columnSpacing: 1
        rowSpacing: 1

        x: 10; y: 10

        model: ListModel
        {
            id: mymodel
            ListElement
            {
               aaa : "Banana1"
               bbb : "Apple1"
            }
            ListElement
            {
                aaa : "Banana2"
                bbb : "Apple2"
            }
        }


        delegate: Rectangle
                    {
                        implicitWidth: 100
                        implicitHeight: 50
                        color: "red"
                        border.color: "black"
                        Text
                        {
                            text: mymodel.data(1,"aaa")
                        }
                    }

        MouseArea
        {
            anchors.fill: parent
            onClicked:
            {
                console.log( mymodel.display)
            }
        }
    }

【问题讨论】：

您检查了Table view 示例吗？

标签： javascript qt qml qtquick2 qtquickcontrols2

【解决方案1】：

你的方法是对的，只是错过了几分。

请参考您更新后的有效代码：

import QtQuick.Window 2.12
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Styles 1.4

Window {
  visible: true
  width: 640
  height: 480
  title: qsTr("TableView example")

  TableView {
    height: 200
    width: 200
    columnSpacing: 1
    rowSpacing: 1
    x: 10
    y: 10

    model: ListModel {
      id: mymodel
      ListElement {
        aaa : "Banana1"
        bbb : "Apple1"
      }
      ListElement {
        aaa : "Banana2"
        bbb : "Apple2"
      }
    }

    delegate: Rectangle {
      implicitWidth: 100
      implicitHeight: 50
      color: "red"
      border.color: "black"
      Text {
        anchors.centerIn: parent
        text: aaa
      }
      Text {
        color: "cyan"
        anchors {
          bottom: parent.bottom
          horizontalCenter: parent.horizontalCenter
        }
        text: bbb
      }
      MouseArea {
        anchors.fill: parent
        onClicked: {
          console.log("Clicked on delegate:")
          console.log(" - Attached model property:", model)
          console.log(" - Attached model.aaa:", model.aaa)
          console.log(" - Attached model.bbb:", model.bbb)
        }
      }
    }
  }
}

您可以毫无问题地使用ListModel TableView。要访问内容，您可以参考 model 属性和/或通过相应的属性名称访问（如我的示例中所示）。

【讨论】：