如何在 QtQuickControls2 中使用帶有 ListModel 數據的 TableView？

Question

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

我正在使用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)
            }
        }
    }

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屬性和/或通過各自的屬性名稱訪問（如我的示例）。