QML TableView 使用详解

目录

一、—个简单的TableView实例

二、TableViewColumn 属性讲解

三、定制表格外观

• 3.1 itemDelegate
• 3.2 rowDelegate
• 3.3 headerDelegate
• 3.4 定制表格外观后的示例

四、动态增删改查 TabelView

TableView 就是 Qt Quick 为表格式呈现数据提供的组件。想必兄台用过 Excel，可以藉此想象下 TableView 的效果。

TableView 与 ListView 类似，相比之下多了滚动条、挑选、可调整尺寸的表头等特性。 它的数据也通过 Model 来提供，你可以使用 ListModel、XmlListModel，也可以使用 C++ 中从 QAbstractltemModel、QAbstractTableModel 等继承而实现的 Model。

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

一、—个简单的TableView实例

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

import QtQuick 2.0
import QtQuick.Window 2.3
import QtQuick.Controls 1.2

Window {
   
    width: 360
    height: 360
    visible: true

    TableView{
   
        id: phoneTable
        anchors.fill: parent
        focus: 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: 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"