（十一）TableView

TableView就是Qt Quick为了呈现出类似Excel表格样式数据而提供的组件，TableView和ListView类似，相比之下多了滚动条、挑选、可调整尺寸的表头等特性。它的数据也可以通过Model来提供，可以使用ListModel、XmlListModel，也可以使用C++中从QAbstractItemModel、QAbstractTableModel等继承而实现的Model。

实例

import QtQuick 2.2
import QtQuick.Controls 1.2

Rectangle {
    
    width: 360;
    height: 300;

    TableView {
    
        id: phoneTable;
        anchors.fill: parent;
        TableViewColumn {
    
            role : "name";
            title : "Name";
            width : 100;
            elideMode: Text.ElideRight;
        }
        TableViewColumn {
    
            role : "cost";
            title : "Cost";
            width: 100;
        }
        TableViewColumn {
    
            role : "manufacturer";
            title : "Manufacturer";
            width: 140;
        }

        model: ListModel {
    
            id: phoneModel;
            ListElement {
    
                name : "iPhone 13";
                cost : "9999";
                manufacturer : "Apple";
            }
            ListElement {
    
                name : "IQOO";
                cost : "2099";
                manufacturer : "VIVO";
            }
            ListElement {
    
                name : "redMi";
                cost : "899";
                manufacturer : "XiaoMi";
            }
            ListElement {
    
                name : "OnePlus";
                cost : "2799";
                manufacturer : "VIVO";
            }
        }

        focus: true;
    }
}

定制表格外观

通过设置itemDelegate，rowDelegate，headerDelegate等属性，可以定制表格的外观。
itemDelegate属性指定如何绘制每一个单元格，它的类型是Component，在itemDelegate中可以访问的styleData属性与TableViewColumn的delegate一样：

itemDelegate: Text{
    
	text : styleData.value;
	color : styleData.selected ? "red" : styleData.textColor;
	elide : styleData.elideMode;
}

elide表示如果文本显示不全，就采用styleData.elideMode指定的省略模式，默认模式下省略号在右侧。

rowDelegate指定如何绘制行背景，它的高度降决定TabeView的行高，rowDelegate可以访问下列styleData属性：
styleData.alternate，本行使用交替的背景颜色时为true
styleData.selected，本行被选中时为true
styleData.row，本行的索引

rowDelegate : Rectangle{
    
	color : styleData.selected ? root.highlight : (styleData.alternate ? root.alterBackground:root.background);
}

headerDelegate属性定义如何绘制表头，它可以访问下列styledata附加属性：
styleData.value ：本item的值
styleData.column：本列索引
styleData.pressed：本列被按下(鼠标左键)时为true
styleData.containsMouse：鼠标时否停在本列内
styleData.textAlignment：本列文本的水平对齐方式

headerDelegate : Rectangle {
    
    implicitWidth: 10;
    implicitHeight: 24;
    gradient: styleData.pressed ? root.pressG : (styleData.containsMouse ? root.hoverG : root.normalG);
    border.width : 1;
    border.color : "gray";
    Text {
    
        anchors.verticalCenter: parent.verticalCenter;
        anchors.left: parent.left;
        anchors.leftMargin: 4;
        text : styleData.value;
        color : styleData.pressed ? "red" : "blue";
        font.bold : true;
    }
}

修改一下上面tableview的例子，为tableview加上itemDelegate,rowDelegate,headerDelegate:

import QtQuick 2.2
import QtQuick.Controls 1.2

Rectangle {
    
    width: 360;
    height: 300;
    id : root;
    property var background: "#d7e3bc";
    property var alterBackground: "white";
    property var highlight: "#e4f7d6";
    property var headerBkgnd: "#F0F0F0";
    property var normalG: Gradient {
    
        GradientStop{
    position: 0.0; color : "#c7d3ac"}
        GradientStop{
    position: 1.0; color : "#F0F0F0"}
    }
    property var hoverG: Gradient {
    
        GradientStop{
    position: 0.0; color : "white"}
        GradientStop{
    position: 1.0; color : "#d7e3bc"}
    }
    property var pressG: Gradient {
    
        GradientStop{
    position: 0.0; color : "#d7e3bc"}
        GradientStop{
    position: 1.0; color : "white"}
    }

    TableView {
    
        id: phoneTable;
        anchors.fill: parent;
        TableViewColumn {
    
            role : "name";
            title : "Name";
            width : 100;
            elideMode: Text.ElideRight;
        }
        TableViewColumn {
    
            role : "cost";
            title : "Cost";
            width: 100;
        }
        TableViewColumn {
    
            role : "manufacturer";
            title : "Manufacturer";
            width: 140;
        }

        itemDelegate : Text {
    
            text : styleData.value;
            color: styleData.selected ? "red" : styleData.textColor;
            elide: styleData.elideMode;
        }
        rowDelegate: Rectangle {
    
            color: styleData.selected ? root.highlight : (styleData.alternate ? root.alterBackground: root.background);
        }
        headerDelegate: Rectangle {
    
            implicitWidth: 10;
            implicitHeight: 24;
            gradient: styleData.pressed ? root.pressG : (styleData.containsMouse ? root.hoverG : root.normalG);
            border.width : 1;
            border.color : "gray";
            Text {
    
                anchors.verticalCenter: parent.verticalCenter;
                anchors.left: parent.left;
                anchors.leftMargin: 4;
                text : styleData.value;
                color : styleData.pressed ? "red" : "blue";
                font.bold : true;
            }
        }

        model: ListModel {
    
            id: phoneModel;
            ListElement {
    
                name : "iPhone 13";
                cost : "9999";
                manufacturer : "Apple";
            }
            ListElement {
    
                name : "IQOO";
                cost : "2099";
                manufacturer : "VIVO";
            }
            ListElement {
    
                name : "redMi";
                cost : "899";
                manufacturer : "XiaoMi";
            }
            ListElement {
    
                name : "OnePlus";
                cost : "2799";
                manufacturer : "VIVO";
            }
        }

        focus: true;
    }
}

动态修改TableView

有时可能会给TableView添加一列，这时可以用addColumn方法，其参数是TableViewColumn，指向一个TableViewColumn实例，你可以动态创建这个实例。

Component.onCompleted:{
    
	var col = Qt.createQmlObject("import QtQuick 2.2\nimport QtQuick.Controls 1.2\nTableViewColumn{
    
		role: \"manufacturer\";title: \"Manufactured\";width:140;
		}",phoneModel);
	phoneTable.addColumn(col);
}

要想在指定位置添加一列，可以使用insertColumn(index,column)方法，index参数指定列索引，column参数与addColumn()的参数一样。
要想删除某列，可以使用removeColumn(index)方法。
TableView还提供了moveColumn(from,to)，用于降一列从位置from移动到to。
如果想给TableView动态添加数据，则可以通过调用ListModel的append()或insert()方法实现，删除数据通过ListModel的clear()或remove()方法实现。
对于自定义的Model，则需要提供增删改接口。