tableView qml类型onclicked事件

Question

我当前正在使用QML文件中的tableview。我想知道用户点击哪个单元格。.此处有一个帖子：https：//forum.qt.io/topic/84284/tableview-onclicked-slot/2，在qml文件中显示了onclicked代码。但是，当我尝试使用代码时，它说明了无效的属性名称。我的QML文件代码是：

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import TransactionHistoryTableModel 1.0
import tech.siotgov.DataManager 1.0
import "../../components" as Components
import "../../utils/httpRequest.js" as HttpRequest
Rectangle {
  id: root
  objectName: "TransactionHistory"
  color: "white"
  property string pageTitle: "Transaction History"
  ColumnLayout {
    id: home
    anchors.leftMargin: parent.width * 0.05
    anchors.rightMargin: parent.width * 0.05
    anchors.fill: parent
    anchors.horizontalCenter: parent.horizontalCenter
    Components.PageTitle {
        title: pageTitle
    }
    Rectangle {
      id: transactionHistoryDisplay
      color: "white"
      Layout.fillWidth: true
      Layout.preferredHeight: parent.height - 100
      Components.Table {
          model: _transactionHistoryTableModelAPI
          columnWidths: [0.4, 0.6]
          onClicked: {
                      console.log(" click ")
                      console.log(color_string)
                  }
      }      
    }
    Item { //spacer
        Layout.fillWidth: true
        Layout.fillHeight: true
        Rectangle {
            anchors.fill:  parent
            color: "white"
        }
    }
  }
  Component.onCompleted: {
      const locationId = DataManager.currentLocation.locationId;
      const d = new Date()
      d.setTime(d.getTime() - d.getTimezoneOffset()*60*1000);
      const datetimeStamp = d.toISOString().split('.')[0]
      _transactionHistoryTableModelAPI.resetTable(locationId);
      HttpRequest.query(
        "query { transactionsByLocation(fromDateTime:"2019-01-01T07:54:34", toDateTime:"" + datetimeStamp + "", location:" + locationId + ") { transactionId, datetime, items  { transactionItemId }, transactionType {name}, location_1{locationName}, location_2{locationName} } }",
        res => {
            _transactionHistoryTableModelAPI.updateTable(res.data.transactionsByLocation);
      })
  }
}

table.qml文件是：

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
TableView {
    anchors.fill: parent
    clip: true
    property var columnWidths: [0.5, 0.5]   // as fractions of parent width
                                            // preferably overwrite this when using
    columnWidthProvider: function (column) { return Math.max(parent.width * columnWidths[column], 1) }
    delegate: Rectangle {
        implicitHeight: text.implicitHeight
        border.color: "#dddddd"
        color: (heading==true)?"#dddddd":"white"
        Text {
            id: text
            text: tabledata
            width: parent.width
            wrapMode: Text.Wrap
            padding: 5
        }
    }
}

Answer 1

在视图中，您必须在代表中设置Mousearea，并通过从组件的根部通过信号将其公开：

：

table.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
TableView {
    id: root
    anchors.fill: parent
    clip: true
    signal clicked(int row, int column) // <---
    property var columnWidths: [0.5, 0.5]   // as fractions of parent width
                                            // preferably overwrite this when using
    columnWidthProvider: function (column) { return Math.max(parent.width * columnWidths[column], 1) }
    delegate: Rectangle {
        implicitHeight: text.implicitHeight
        border.color: "#dddddd"
        color: heading ? "#dddddd" : "white"
        Text {
            id: text
            text: tabledata
            width: parent.width
            wrapMode: Text.Wrap
            padding: 5
        }
        MouseArea{
            anchors.fill: parent
            onClicked: root.clicked(model.row, model.column) // <---
        }
    }
}

*。QML

// ...
Components.Table {
    model: _transactionHistoryTableModelAPI
    columnWidths: [0.4, 0.6]
    onClicked: console.log(row, column)
}
// ...