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,则需要提供增删改接口。