tableview与Listview相似,只不过是多了滚动条、挑选以及可调节尺寸等功能,它的数据也是通过Model来实现的,可以用listModel、XmlListModel或者c++中的AbstractItemModel和QAbstractTableModel等继承实现的model下面看一个简单的例子,代码如下:
import QtQuick 2.0 import QtQuick.Controls 1.2 Rectangle { width: 360 height: 360 TableView{ id: phoneTable anchors.fill: parent //TableViewColumn 描述表格的每一列 TableViewColumn{role: "name"; title: "Name"; width: 30; elideMode: Text.ElideRight;} TableViewColumn{role: "cost"; title: "Cost"; width: 100;} TableViewColumn{role: "manufacture"; title: "Manufacture"; 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) // visible: false // } headerDelegate :Rectangle{//设置表头的样式 implicitWidth: 10 implicitHeight: 24 gradient: styleData.pressed ? phoneTable.pressG : (styleData.containsMouse ? phoneTable.hoverG : phoneTable.nomalG) border.width: 1 border.color: "gray" Text{ anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left anchors.leftMargin: 4 anchors.right: parent.right anchors.rightMargin: 4 text: styleData.value color: styleData.pressed ? "red" : "blue" font.bold: true } } model: ListModel{ id: phoneModel ListElement{ name: "rongyao2"; cost: "4900"; manufacture: "huawei" } ListElement{ name: "s6"; cost: "4800"; manufacture :"sumsung" } ListElement{ name: "apple5" cost: "3300" manufacture: "apple" } ListElement{ name: "Mi5" cost: "3200" manufacture: "xiaomi" } }//model is end focus: true } }
是不是觉得上面的界面有点low?那我们看看如何定制表格外观,让它从矮矬穷一步步走上高富帅
可以通过设置itemDelegate、rowDelegate、headerDelegate等属性,就可以定制外观。
先来说这个itemDelegate,它来设置如何绘制一个单元格,类型是component,它有如下常用属性
styleData.selected : 当Item选中时为true
styleData.value:当前Item的文本
styleData.textColor :Item的默认颜色
styleData.row 行索引
styleData.column 列索引
styleData.elideMode 列省略模式
styleData.textAlignment 列文本对齐方式
我们先来段关于itemDelegate的使用范例,比如下面的component
itemDelegate : Text{
text: styleData.value
color: styleData.selected? "red" : styleData.textColor
elide: styleData.elideMode//当文字过长时显示省略号,默认在右边
}
上面的只是对文字进行了制定,除此自外,还可以组合多个items来实现复杂的itemDelegate。再来看rowDelegate,该属性制订了如何绘制行背景,它有下列属性|
styleData.alternate 当为true时,行将会使用交替的背景颜色
styleData.selected 行被选中时为true
sytleData.row 本行索引
还有styleData.hasActiveFocus和styleData.pressed判断本行时候有焦点以及是否被按下
再就是headerDelegate,它定义如何绘制表头。有几个属性我们单独列出来
styleData.containsMouse 鼠标是否停留在本列内
styleData.textAlignment 本列文本的水平对齐方式
下面的范例是对上面说的一个总结
import QtQuick 2.2 import QtQuick.Controls 1.2 Rectangle{ id: root width: 360 height: 300 property var background: "#d7e3bc" property var alterBackground: "white" property var highlight: "#e4f7d6" property var headerBkg: "#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{ //定义table的显示,包括定制外观 id: phoneTable anchors.fill: parent focus: true TableViewColumn{role: "name"; title: "Name"; width: 100; elideMode: Text.ElideRight;} TableViewColumn{role: "cost"; title: "Cost"; width: 100; elideMode: Text.ElideRight;} TableViewColumn{role: "manufacture";title: "Manufacture"; width: 100; elideMode: Text.ElideRight;} itemDelegate: Text{ text: styleData.value color: styleData.selected ? "red" : "black" elide: Text.ElideRight } rowDelegate: Rectangle{ color: styleData.selected? root.highlight : (styleData.alternate ? root.alterBackground : root.background) } headerDelegate: Rectangle{ implicitWidth: 10 implicitHeight: 24 border.color: "gray" border.width: 1 Text{ anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left anchors.leftMargin: 4 anchors.right: parent.right anchors.rightMargin: 4 text: styleData.value color: styleData.pressed ?"red" : "blue" font.bold: true } }//header delegate is end model: ListModel{ id: phoneModel ListElement{ name: "iphone5" cost: "4900" manufacture: "apple" } ListElement{ name: "b199" cost: "1590" manufacture: "huawei" } ListElement{ name: "MI25" cost: "1999" manufacture: "xiaomi" } ListElement{ name: "galaxy s6" cost: "3900" manufacture: "samsung" } }//listmodel is end } }