如何在 TableView QtQuick.Controls 2.4 中实现 TableView QtQuick.Controls 1.4 的 Selectable future

Question

如何在QtQuick.Controls.TableView > 2 中实现行选择？默认情况下，在版本 1 中我们有它：

我们可以通过单击其中一个来连续选择整个项目。这如何在QtQuick.Controls.TableView 的第 2 版上实现？

我检查了这些：

• https://stackoverflow.com/a/62636354/9248466
• https://www.youtube.com/watch?v=vwukO5Vusv8

但是，我还是没能实现它。这是我的实现尝试：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import Qt.labs.qmlmodels 1.0

Window {
  width: 640
  height: 480
  visible: true
  title: qsTr("Hello World")


  TableView {
    id: table
    anchors.fill: parent
    columnWidthProvider: function(column)
    {
      return 100;
    }

    model: TableModel {
      TableModelColumn { display: "name" }
      TableModelColumn { display: "color" }

      rows: [
        {
          "name": "cat",
          "color": "black"
        },
        {
          "name": "dog",
          "color": "brown"
        },
        {
          "name": "bird",
          "color": "white"
        }
      ]
    }

    delegate: ItemDelegate {
      readonly property color defaultTextColor: "orange";
      readonly property color defaultBackgroundColor: "#222";
      readonly property color defaultBorderColor: "black";
      readonly property color selectedTextColor: "white";
      readonly property color selectedBackgroundColor: "#997300";
      readonly property color selectedBorderColor: "cyan";

      property bool select: table.currentIndex === index
      property color textColor: defaultTextColor;
      property color backgroundColor: defaultBackgroundColor;
      property color borderColor: defaultBorderColor;

      background: Rectangle
      {
        anchors.fill: parent;
        color: select ? selectedBackgroundColor : backgroundColor; // <----
        border.color: borderColor;
        border.width: 0.5;
      }
      contentItem: Text
      {
        id: contentItemText
        text: model.display;
        clip: true;
        color: textColor;
        anchors.centerIn: parent;
      }
    }
  }
}

我的环境：

• 操作系统：Fedora 34
• 编译器：GCC 11.2.1
• Qt：5.15.2

Answer 1

QtQuick TableView 中没有 currentIndex 属性，因此您必须创建并实现该属性，在这种情况下，我将实现 currentRow，该属性会在单击行中的任何项目时发生变化。

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
import Qt.labs.qmlmodels 1.0

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    TableView {
        id: table

        property int currentRow: -1

        anchors.fill: parent
        columnWidthProvider: function(column) {
            return 100;
        }

        model: TableModel {
            rows: [{
                "name": "cat",
                "color": "black"
            }, {
                "name": "dog",
                "color": "brown"
            }, {
                "name": "bird",
                "color": "white"
            }]

            TableModelColumn {
                display: "name"
            }

            TableModelColumn {
                display: "color"
            }

        }

        delegate: ItemDelegate {
            id: itemDelegate

            readonly property color defaultTextColor: "orange"
            readonly property color defaultBackgroundColor: "#222"
            readonly property color defaultBorderColor: "black"
            readonly property color selectedTextColor: "white"
            readonly property color selectedBackgroundColor: "#997300"
            readonly property color selectedBorderColor: "cyan"
            property bool select: TableView.view.currentRow === row
            property color textColor: defaultTextColor
            property color backgroundColor: defaultBackgroundColor
            property color borderColor: defaultBorderColor

            background: Rectangle {
                anchors.fill: parent
                color: select ? selectedBackgroundColor : backgroundColor
                border.color: borderColor
                border.width: 0.5
            }

            contentItem: Text {
                id: contentItemText

                text: model.display
                clip: true
                color: textColor
                anchors.centerIn: parent
            }

           MouseArea {
                anchors.fill: parent
                onClicked: itemDelegate.TableView.view.currentRow = row
            }

        }

    }

}