如何将TableView与ListModel数据结合在QtQuickControls2中？

Question

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

我使用的是QtQuick.Controls 2，所以属于老QtQuick的TableViewColumn不能在这里使用。

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

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

Answer 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属性和/或访问(如我的示例所示)。