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);
}
}
}