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

Posted 2023-02-16

【中文标题】如何在 QtQuickControls2 中使用 TableView 和 ListModel 数据？

【英文标题】：How to use TableView with ListModel data in QtQuickControls2?

【发布时间】：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 示例吗？

【参考方案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 属性和/或通过相应的属性名称访问（如我的示例中所示）。