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)
}
// ...

TableView QML类型onClicked事件

1 个答案: