Rosen's QT journey 99 QML table control tableview

TableView Be similar to QML Medium ListView, similar Widget Medium QTableView, It adds a scroll bar 、 Select and resize the title section . And ListView equally , Each row of data is provided through a model :

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: " title "
        width: 100
        }

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

}

 

The code above uses ListModel Provide data as a data model , One for each row of data ListElement Objects represent , It's specified here title and author Two fields . To use the data in the model , stay TableView Required in TableViewColumn To specify the fields in the model , every last TableViewColumn Corresponding to a field , Where you need to specify role That is, the field name in the model , and title Is the column header of each column to be displayed .TableViewColumn The type also contains visible、width resizable、mova-ble,delegate Equal attribute , among delegate Property can use delegates to specify the display method for specific columns , Specific properties can be accessed in delegates .

TableView Can pass itemDelegate attribute , Use delegates to draw specified cells . It is associated with TableViewColumn Of delegate The effect is the same . In addition, you can also use rowDelegate and headerDelegate To draw row or column headers using delegates .TableView Type also provides some commonly used functions , such as ad-dColumn() ,getColumn() 、 insertColumn() 、 removeColumn()、rowAt(x,y) etc. , Carry out relevant operations . in addition , When the line is clicked, it will launch clicked() or doubleClick() The signal .

TableView The view itself does not provide sorting . This must be done on the model itself . however , You can provide sorting on the model , And enable the sort indicator on the title .

• int sortIndicatorColumn- Index of the current rank
• bool sortIndicatorVisible- Whether the sort indicator should be enabled
• enum sortIndicatorOrder-Qt.AscendingOrder still Qt.DescendingOrder It depends on the State

 
You can assign one TableViewStyle for TableView Create a custom appearance . 

The following code , demonstration adopt itemDelegate Set table style ：

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: " title "
        width: 100
        }

        TableViewColumn{
            role:"author"
            title: " author "
            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);
        }
    }

}