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

Posted 2023-02-16

【中文标题】如何在 TableView QtQuick.Controls 2.4 中实现 TableView QtQuick.Controls 1.4 的 Selectable future

【英文标题】：How to implement Selectable future of TableView QtQuick.Controls 1.4 in TableView QtQuick.Controls 2.4

【发布时间】：2021-08-21 06:58:19

【问题描述】：

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

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

我检查了这些：

https://***.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

【参考方案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