Roson的Qt之旅#99 QML表格控件-TableView

TableView类似于QML中的ListView，类似Widget中的QTableView，它增加了滚动条、选择和可调整大小的标题部分。与ListView一样，每一行的数据都是通过一个模型提供的:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Controls 1.4

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

    ListModel{
        id:listModel
        ListElement{title:"A";author:"Xiaoming"}
        ListElement{title:"B";author:"Liling"}
        ListElement{title:"C";author:"ABing"}
    }

    TableView{
        anchors.fill: parent
        model: listModel

        TableViewColumn{
        role:"title"
        title: "标题"
        width: 100
        }

        TableViewColumn{
            role:"author"
            title: "作者"
            width: 200
        }
    }

}

 

上面的代码使用了ListModel作为数据模型来提供数据,其中每一行数据使用一个ListElement对象表示,这里指定了title和author两个字段。要想使用模型中的数据,在TableView 中需要使用 TableViewColumn来指定模型中的字段,每一个TableViewColumn对应一个字段,其中需要指定role即模型中字段名称,而title是要显示的每一列的列头。TableViewColumn类型中还包含了visible、width resizable、mova-ble,delegate等属性,其中delegate属性可以给特定的列使用委托来指定显示方式,在委托中可以访问特定的属性。

TableView可以通过itemDelegate属性,使用委托来绘制指定单元格。它与TableViewColumn的delegate效果相同。另外还可以通过rowDelegate和 headerDelegate 来使用委托绘制行或列头。TableView类型还提供了一些常用的函数,比如ad-dColumn() ,getColumn() 、 insertColumn() 、 removeColumn()、rowAt(x,y)等,进行相关操作。另外,当行被点击后会发射clicked()或doubleClick()信号。

TableView视图本身不提供排序。这必须在模型本身上完成。但是，您可以在模型上提供排序，并在标题上启用排序指示器。

• int sortIndicatorColumn-当前排序列的索引
• bool sortIndicatorVisible-是否应该启用排序指示器
• enum sortIndicatorOrder-Qt.AscendingOrder还是Qt.DescendingOrder取决于状态

 
你可以通过分配一个TableViewStyle来为TableView创建一个自定义外观。 

下面的代码，演示通过itemDelegate设置表格样式：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Controls 1.4

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

    ListModel{
        id:listModel
        ListElement{title:"A";author:"Xiaoming"}
        ListElement{title:"B";author:"Liling"}
        ListElement{title:"C";author:"ABing"}
    }

    TableView{
        anchors.fill: parent
        model: listModel

        TableViewColumn{
        role:"title"
        title: "标题"
        width: 100
        }

        TableViewColumn{
            role:"author"
            title: "作者"
            width: 200
        }

        itemDelegate: Item {
            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                color:styleData.selected? "red":"blue"
                font.pixelSize: 10
                text: styleData.column == 1? "column 1":styleData.value
            }
        }

        onClicked: {
            console.debug(row);
        }
    }

}