QML TableView 使用详解

使用 ListView 也可以将数据呈现为表格样式，不过稍微有些复杂，尤其是 delegate 的定义，当数据有很多列（比如播放列表、进销存管理、学生成绩表等）时，就会很复杂，再要有排序之类的操作，那就……此时就是 TableView 的用武之地了。

一、—个简单的TableView实例

下面是前面讲 ListView 时的示例，采用 TableView 来重写一下。QML 文件 phone_table_ simple.qml 的内容如下：

import QtQuick 2.0
import QtQuick.Window 2.3
import QtQuick.Controls 1.2Window {width: 360height: 360visible: trueTableView{id: phoneTableanchors.fill: parentfocus: true// TableViewColumn 描述表格的每一列TableViewColumn{role: "name"; title: "Name"; width: 80; elideMode: Text.ElideRight;}TableViewColumn{role: "cost"; title: "Cost"; width: 100;}TableViewColumn{role: "manufacture"; title: "Manufacture"; width: 140;}model: ListModel{id: phoneModelListElement{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}
}

效果如下图所示：
在这里插入图片描述

二、TableViewColumn 属性讲解

定义了 TableViewColumn，描述表格的每一列，这是必需的，否则表格无法显示。示例中用到 role、title、width 三个属性，这是要使用 TableViewColumn 的最小属性集，role 对应 Model 中 ListElement 中的 role-name，正是这个属性完成了二维表格与一维 Model 之间的数据映射；title 是表头中一列的标题；width 定义列宽。

role、title、width

这三个属性，是要使用 TableViewColumn 的最小属性集，role 对应 Model 中 ListElement 中的 role-name，正是这个属性完成了二维表格与一维 Model 之间的数据映射；title 是表头中一列的标题；width 定义列宽；

resizable

定义一列的宽度是否可以调整，默认值为 true；

movable

属性定义是否可以拖动一列的位置，默认值为 true；

horizontalAlignment

指定列标题文本的对齐方式，可以取 Text.AlignLeft (默认值）、Text.AlignRight、Text.AlignHCenter、Text.AlignJustify 四个值中的一个；

elideMode

指定标题不能完整显示时的省略方式，可以取 Text.ElideRight (默认值）、Text.ElideLeft、 Text.ElideMiddle、Text.ElideNone 四个值中的一个；

visible

布尔值，指定表格的一列是否显示，默认值为 true。

TableViewColumn 的最后一个属性是 delegate，指定一个组件用来绘制这一列，示例中没有指定，釆取了默认值；在你提供的 delegate 中，可以访问 styleData 的部分属性来获知相关信息。styleData 是 TableView 相关的风格数据，有很多属性。下面所列的属性可以在 TableViewColumn 的 delegate 中访问：

styleData.selected，当 Item 选中时为 true。
styleData.value，当前 Item 的文本。
styleData.textColor，Item 的默认颜色。
styleData.row，行索引。
styleData.column，列索引。
styleData.elideMode，列省略模式。
styleData.textAlignment，列文本对齐方式。

如你所见，我们仅仅是设置了 model，定义了表格的列属性，就得到了一个看起来还不错的表格，代码比我们使用 ListView 时少多了。

如果你觉得默认的表格样式不好看，还可以定制它们。

三、定制表格外观

通过设置 itemDelegate、rowDelegate、headerDelegate 等属性，可以定制表格的外观。

3.1 itemDelegate

itemDelegate 属性指定如何绘制每一个单元格，它的类型是 Component。在 itemDelegate 中可以访问的 styleData 属性与 TableViewColumn 的 delegate —样。下面是一个 itemDelegate 定义实例：

// 设置每个单元格的字体样式
itemDelegate: Text {text: styleData.valuecolor: styleData.selected ? "red" : styleData.textColorelide: styleData.elideMode
}

上面的 ItemDelegate 只有一个 Text 对象，它的 text 属性被设置为 styleData.value 。如果本 Item 被选中，文本颜色用红色，否则就用 styleData.textColor 文本如果显示不全，就采用 styleData.elideMode 指定的省略模式（在默认模式下省略号在右侧）。

itemDelegate 并不局限于一个简单的可见 Item，你可以组合多个可见元素来实现复杂的 itemDelegate，比如在单元格内放置一个复选框、一个图片等。

3.2 rowDelegate

rowDelegate 属性指定如何绘制行背景，它的高度将决定 TableView 的行高。 rowDelegate 可以访问下列 styleData 属性（你可以理解成每一行都有这些属性可用）：

styleData.altemate，本行使用交替的背景颜色时为true。
styleData.selected，本行被选中时为 true。
styleData.row，本行的索引。

下面是一个 rowDelegate 实例：

// 设置行的背景色
rowDelegate: Rectangle {color: styleData.selected ? root.highlight : root.alterBackground
}

在上面的 rowDelegate 中，我用一个 Rectangle 作为行背景元素，根据是否使用交替背景、是否选中为行指定了不同的背景色。

3.3 headerDelegate

headerDelegate 属性定义如何绘制表头，它可以访问下列 styleData 附加属性：

styleData.value，本 Item 的值。
styleData.column，本列索引。
styleData.pressed，本列被按下（如鼠标左键按下或手指按下）时为 true。
styleData.containsMouse，鼠标是否停在本列内。
styleData.textAlignment，本列文本的水平对齐方式。

下面是一个 headerDelegate 实例：

// 渐变色
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"; }
}
// ...
// 设置表头的样式
headerDelegate: Rectangle {implicitWidth: 10implicitHeight: 24gradient: styleData.pressed ? root.pressG : (styleData.containsMouse ? root.hoverG: root.normalG)border.width: 1border.color: "gray"Text {anchors.verticalCenter: parent.verticalCenteranchors.left: parent.leftanchors.leftMargin: 4anchors.right: parent.rightanchors.rightMargin: 4text: styleData.valuecolor: styleData.pressed ? "red" : "blue"font.bold: true}
}

我通过 headerDelegate 改变了默认的表头外观，使用渐变色来填充表头背景，为鼠标按下、经过定义了不同的背景颜色和文本颜色。

3.4 定制表格外观后的示例

现在让我们修改一下 phone_table_simple.qml 示例，为 TableView 添加 itemDelegate、 rowDelegate、headerDelegate，改变 TableView 的外观。新的 QML 文件是 phone_table_delegate.qml，内容如下：

import QtQuick 2.2
import QtQuick.Controls 1.2Rectangle {width: 360height: 300id: rootproperty 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: phoneTablefocus: trueanchors.fill: parentTableViewColumn{ role: "name"  ; title: "Name" ; width: 100; elideMode: Text.ElideRight;}TableViewColumn{ role: "cost" ; title: "Cost" ; width: 100; }TableViewColumn{ role: "manufacture" ; title: "manufacture" ; width: 140; }// 设置每个单元格的字体样式itemDelegate: Text {text: styleData.valuecolor: styleData.selected ? "red" : styleData.textColorelide: styleData.elideMode}// 设置行的背景色rowDelegate: Rectangle {color: styleData.selected ? root.highlight : root.alterBackground}// 设置表头的样式headerDelegate: Rectangle {implicitWidth: 10implicitHeight: 24gradient: styleData.pressed ? root.pressG : (styleData.containsMouse ? root.hoverG: root.normalG)border.width: 1border.color: "gray"Text {anchors.verticalCenter: parent.verticalCenteranchors.left: parent.leftanchors.leftMargin: 4anchors.right: parent.rightanchors.rightMargin: 4text: styleData.valuecolor: styleData.pressed ? "red" : "blue"font.bold: true}}model: ListModel {id: phoneModelListElement{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"}}}
}

效果图如下：
在这里插入图片描述

四、动态增删改查 TabelView

有时你可能会想给 TableView 添加一列（一个字段），这时可以使用addColumn()方法，其参数是 TableViewColumn，指向一个 TableViewColumn 实例，你可以动态创建这个实例。

对于前两节的示例，第三列可以这样添加进去：

Component.onCompleted: {var col = Qt.createQmlObject("import QtQuick 2.2\nimport QtQuick.Controls 		 1.2\nTableViewColumn{ role: \"mamifacturer\"; title: \"Manufacturer\"; width: 140; }", phoneModel);phoneTable.addColumn( col );
}