QML TableView表格使用示例

已于 2022-06-09 22:55:36 修改
阅读量1.2w 收藏 96
点赞数 21
分类专栏： QML 文章标签： QML TableView
于 2022-01-07 13:11:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luoyayun361/article/details/122361571
版权

前言

QML中实现表格可以使用多种方式，比如直接使用ListView，定义每一行delegate，或者自定义Rectangle，放到Flipable中组合使用。Qt Quick Control1中 从5.1版本开始就提供了表格控件，但是感觉不怎么好用，在Qt Quick Control2中 5.12版本开始又提供了一个专门用于做表格的控件TableView，相比于前面的方案，使用Tableview更加简单和直接。那么，接下来就看看Quick Control2 的TableView使用方法。

本文Demo下载

正文

我们直接针对两种常用的场景来通过示例说明。

场景一

第一种场景， 每一列等宽，然后内容都是一致的（比如全是文本Text），这种无需定制每一列的delegate，所以只需要写一次即可。

示例：
在这里插入图片描述
代码：

import QtQuick 2.13
import QtQuick.Controls 2.13
import Qt.labs.qmlmodels 1.0

Rectangle {


    Rectangle{
        id:header
        width: parent.width
        height: 30

        Row{
            spacing: 0

            Repeater{
                model: ["name","age","class","number"]

                Rectangle{
                    width: header.width/4
                    height: header.height
                    color: "#666666"
                    border.width: 1
                    border.color: "#848484"
                    Text {
                        text: modelData
                        anchors.centerIn: parent
                        font.pointSize: 12
                        color: "white"
                    }
                }
            }
        }
    }
    TableView{
        id:tableView
        width: parent.width
        anchors.top:header.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        clip: true
        boundsBehavior: Flickable.OvershootBounds


        ScrollBar.vertical: ScrollBar {
            anchors.right:parent.right
            anchors.rightMargin: 0
            visible: tableModel.rowCount > 5
            background: Rectangle{
                color:"#666666"
            }
            onActiveChanged: {
                active = true;
            }
            contentItem: Rectangle
            {
                implicitWidth  : 6
                implicitHeight : 30
                radius : 3
                color  : "#848484"
            }
        }

        model: TableModel {
            id:tableModel

            TableModelColumn{display: "name"}
            TableModelColumn{display: "age"}
            TableModelColumn{display: "class"}
            TableModelColumn{display: "number"}

        }
        delegate:Rectangle{
            color: "#666666"
            implicitWidth: tableView.width/4
            implicitHeight: 32
            border.width: 1
            border.color: "#848484"

            Text {
                text: display
                anchors.centerIn: parent
                font.pointSize: 12
                color: "white"
            }
        }
    }

    Component.onCompleted: {
        tableModel.appendRow({"name":"小明","age":12,"class":"三年二班","number":"003"})
        tableModel.appendRow({"name":"小刚","age":13,"class":"三年三班","number":"012"})
        tableModel.appendRow({"name":"小李","age":11,"class":"三年四班","number":"023"})
        tableModel.appendRow({"name":"小王","age":10,"class":"三年二班","number":"021"})
        tableModel.appendRow({"name":"小张","age":13,"class":"三年五班","number":"004"})
        tableModel.appendRow({"name":"小林","age":14,"class":"三年一班","number":"008"})
    }

}
场景二

场景二，每一列内容不一样，需要单独定制
如图：
在这里插入图片描述

代码：

import QtQuick 2.13
import QtQuick.Controls 2.13
import Qt.labs.qmlmodels 1.0

Rectangle {


    Rectangle{
        id:header
        width: parent.width
        height: 30

        Row{
            spacing: 0

            Repeater{
                model: ["name","sex","id","option"]

                Rectangle{
                    width: {
                        var w = 0
                        switch(index){
                        case 0: w = 140;break;
                        case 1: w = 90;break;
                        case 2: w = 120;break;
                        case 3: w = 150;break;
                        }
                        return w
                    }
                    height: header.height
                    color: "#666666"
                    border.width: 1
                    border.color: "#848484"
                    Text {
                        text: modelData
                        anchors.centerIn: parent
                        font.pointSize: 12
                        color: "white"
                    }
                }
            }
        }
    }
    TableView{
        id:tableView
        width: parent.width
        anchors.top:header.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        clip: true
        boundsBehavior: Flickable.OvershootBounds


        ScrollBar.vertical: ScrollBar {
            anchors.right:parent.right
            anchors.rightMargin: 0
            visible: tableModel.rowCount > 5
            background: Rectangle{
                color:"#666666"
            }
            onActiveChanged: {
                active = true;
            }
            contentItem: Rectangle
            {
                implicitWidth  : 6
                implicitHeight : 30
                radius : 3
                color  : "#848484"
            }
        }

        model: TableModel {
            id:tableModel

            TableModelColumn{display: "name"}
            TableModelColumn{display: "sex"}
            TableModelColumn{display: "id"}
            TableModelColumn{display: "option"}

        }
        delegate:DelegateChooser{

            DelegateChoice{
                column: 0
                delegate: Rectangle{
                    color: "#666666"
                    implicitWidth: 140
                    implicitHeight: 32
                    border.width: 1
                    border.color: "#848484"

                    Text {
                        text: display
                        anchors.centerIn: parent
                        font.pointSize: 12
                        color: "blue"
                    }
                }
            }
            DelegateChoice{
                column: 1
                delegate: Rectangle{
                    color: "#666666"
                    implicitWidth: 90
                    implicitHeight: 32
                    border.width: 1
                    border.color: "#848484"

                    Text {
                        text: display
                        anchors.centerIn: parent
                        font.pointSize: 12
                        color: "white"
                    }
                }
            }
            DelegateChoice{
                column: 2
                delegate: Rectangle{
                    color: "#666666"
                    implicitWidth: 120
                    implicitHeight: 32
                    border.width: 1
                    border.color: "#848484"
                    clip: true

                    Text {
                        text: display
                        anchors.centerIn: parent
                        font.pointSize: 12
                        color: "white"
                    }
                }
            }
            DelegateChoice{
                column: 3
                delegate: Rectangle{
                    color: "#666666"
                    implicitWidth: 150
                    implicitHeight: 32
                    border.width: 1
                    border.color: "#848484"

                    Button{
                        width: 70
                        height: 25
                        anchors.centerIn: parent
                        text: "Delete"
                        background: Rectangle{
                            radius: 4
                            color: "cyan"
                        }

                        onClicked: {
                            console.log("btn clicked row:",row)
                        }
                    }
                }
            }
        }
    }

    Component.onCompleted: {
        tableModel.appendRow({"name":"小明","sex":"男","id":"w0000065628743342144321241","option":true})
        tableModel.appendRow({"name":"小刚","sex":"女","id":"w0000065628743342144312312","option":true})
        tableModel.appendRow({"name":"小李","sex":"男","id":"w0000065628743342144315433","option":true})
        tableModel.appendRow({"name":"小王","sex":"男","id":"w0000065628743342144313254","option":true})
        tableModel.appendRow({"name":"小张","sex":"女","id":"w0000065628743342144316573","option":true})
        tableModel.appendRow({"name":"小林","sex":"男","id":"w0000065628743342144311232","option":true})
    }

}
解决表格中文字显示不下的问题

从上面场景二的示例中看到第三列文字显示不下，这种情况下，通常会将文字省略显示，超出部分用“…”代替，然后做tips，实现方式如下：

在这里插入图片描述
当鼠标移动到文字上时做ToolTip

代码，修改第三列：

DelegateChoice{
     column: 2
     delegate: Rectangle{
         id:rect
         color: "#666666"
         implicitWidth: 120
         implicitHeight: 32
         border.width: 1
         border.color: "#848484"
         clip: true

         TextMetrics {
               id: textMetrics
               text: display
         }

         Text {
             text: display
             anchors.centerIn: parent
             font.pointSize: 12
             color: "white"
             width: parent.width
             elide: Text.ElideRight
             leftPadding: 3
             rightPadding: 3

             MouseArea{
                 id:ma
                 hoverEnabled: true
                 anchors.fill: parent
             }

             ToolTip
             {
                 height: 26
                 visible: ma.containsMouse && display !== "" && textMetrics.width > (rect.implicitWidth-6)
                 contentItem: Text {
                     text: display
                     color: "#D6D6D6"
                 }
                 background: Rectangle {
                     color: "#222222"
                 }
             }
         }
     }
 }

本文Demo下载

luoyayun361
关注
  • 21
    点赞
  • 踩
  • 96
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论
专栏目录
88.qt qml-TableView学习（一）
抵抗时间扭曲，坚持做一件有意义的事
05-25 2062
TableView继承于Flickable,默认支持拖拽,如果我们要设置拖拽只支持垂直的话,可以设置flickableDirection: Flickable.VerticalFlick。
90.qt qml-Table表格组件(支持表头表尾固定/自定义颜色/自定义操作按钮/排序)
抵抗时间扭曲，坚持做一件有意义的事
05-29 2654
qt qml-Table表格组件(支持表头表尾固定/自定义颜色/自定义操作按钮/插入排序)
QML的TableView中实现数据以不同的形式进行表现-对每列进行自定义
06-09
QML的tableView中的每列数据以不同的形式进行表现，例如单选框、ComBobox、进度条等进行显示，这样会使数据更加直观。该程序可以直接使用qmlscene进行运行，支持Qt5.5及其以上版本
QML自定义TableView数据的表现样式：列的委托
06-09
自定义QML中的TableView的数据表现样式，主要是对表格中每列的数据定义不同的表现形式，例如用单选框、ComBobox、进度条等形式对数据进行形象化的显示，对于熟悉TableView的使用有较大的帮助 ,本代码可以直接通过qmlscene运行，支持QT5.5及其以上版本
QML学习十八：TableView的简单使用（使用C++Model)
qq_35662333的博客
06-12 517
在QT下使用表格是想当的多，使用C++自定义Mode在TableView中显示方法和ListView操作方式类似，TableView下增加了很多表头等操作方便自定义表格。在此不涉及。本篇记录TableView显示C++的Model。
QML TableView Demo演示示例
06-09
QML中实现表格可以使用多种方式，比如直接使用ListView，定义每一行delegate，或者自定义Rectangle，放到Flipable中组合使用。Qt Quick Control1中 从5.1版本开始就提供了表格控件，但是感觉不怎么好用，在Qt Quick Control2中 5.12版本开始又提供了一个专门用于做表格的控件TableView，相比于前面的方案，使用Tableview更加简单和直接。那么，接下来就看看Quick Control2 的TableView使用方法。 博客介绍：https://blog.csdn.net/luoyayun361/article/details/122361571
QML TableView 自定义与使用（QtQuick.Controls 2、标题绘制）
Jane_Yih的博客
02-06 1932
QML QtQuick.Controls 2 TableView的使用，自定义TableView控件(MyTableView)，涉及model/view、表头绘制、表头冻结拖拽、表头跟随表格内容移动、表格内容显示、拖拽表头调节表格行列宽度高度、滚动条显示等功能
qml导出到excel
04-09
qml的tableview数据导出到excel
QML类型：TableView
友善啊，朋友的博客
10-16 7360
一、描述 TableView 显示从内置 QML 类型（如 ListModel 和 XmlListModel）创建的模型中的数据，这些模型仅填充 TableView 中的第一列。要创建具有多列的模型，请使用 TableModel或继承 QAbstractItemModel 的 C++ 模型。 TableView 继承了 Flickable。这意味着虽然模型可以有任意数量的行和列，但在视口内通常只能看到表格的一部分。 一旦轻弹，新的行和列就会进入视口，而旧的会退出并从视口中移除。 移出的行和列被重新用于.
qml tableview 滚动条加宽_【QML Model-View】TableView 使用
weixin_39975529的博客
12-20 1099
TableView 就是 Qt Quick 为表格式呈现数据提供的组件。想必兄台用过 Excel，可以藉此想象下 TableView 的效果。TableView 与 ListView 类似，相比之下多了滚动条、挑选、可调整尺寸的表头等特性。 它的数据也通过 Model 来提供，你可以使用 ListModel、XmlListModel，也可以使用 C++ 中从 QAbstractltemModel...
QML QtQuick 2 TableView的使用：展示表格数据
龚建波
12-16 1万+
在Qt5.12中，QtQuick 2 添加了 TableView 组件，功能和 QtQuick Control 1 中的 TableView 类似，但是接口大不一样（QtQuick Control 1已经处于弃用状态，不建议使用）。Qt Creator中有两个 QtQuick 2 TableView 的示例，但是都不是数据类型的，参考起来不大方便，我也是别人的 Demo 以及 Qt 文档学习了下（参考链接文本主要是用代码演示TableView的基本操作，即数据的展示和编辑。
QML TableView 使用详解
u013873761的博客
05-31 1万+
目录 一、—个简单的TableView实例 二、TableViewColumn 属性讲解 三、定制表格外观 3.1 itemDelegate 3.2 rowDelegate 3.3 headerDelegate 3.4 定制表格外观后的示例 四、动态增删改查 TabelView TableView 就是 Qt Quick 为表格式呈现数据提供的组件。想必兄台用过 Excel，可以藉此想象下 TableView 的效果。 TableView 与 ListView 类似，相比之下多了滚动条、挑选、可调整尺寸
CMake-QML示例代码
03-26
这个"CMake-QML示例代码"压缩包显然是为了演示如何在CMake项目中集成和使用QML组件。下面我们将深入探讨这些关键知识点。 1. **CMake**： - **基本概念**：CMake是一种开源的、跨平台的自动化构建系统，它生成平台...
QML自定义表格
10-22
首先，QML中的表格控件通常使用`TableColumn`和`TableView`来实现。然而，标准的`TableView`可能无法满足所有复杂的应用场景，例如自定义单元格样式、自定义数据绑定或者复杂的交互功能。这时，我们需要自定义表格...
QML学习十七：TableView的简单使用
06-18 3587
QML学习
QML TableView 表格总结
最新发布
一个老菜鸟的学习分享
06-30 432
qml 的资料相对qt widget来说，还是偏少啊，无论从帮助文档还是从网上搜索。笔者项目中遇到的一些展示控件，需要用tableview来展示，总结了一下两种方式，都是基于Tableview来实现的，一种是基于 QtQuick.Controls 1.4 版本，一种是高版本 QtQuick 2.14。对业务代码进行了删除，只保留了跟表格有关的代码。几种最重要的几个属性就是。主要关注一下属性设置。
QML中动态增加表格数据
huzhifei的专栏
02-29 748
1.QML中的表格实现。
QT: QML TableView演示代码
FristLineCode的博客
02-03 1002
qml TableView
QML ListView几个常用且非常重要的属性
热门推荐
luoyayun361的专栏
10-27 2万+
前言 用 QML 开发界面的好处想必就不用多说了吧，可以总结为一个字：爽。 的确如此，用 QML 可以快速的开发出一些非常酷炫和复杂的界面，并且代码还非常简洁，可读性很强，容易理解。 今天要总结的是关于 ListView 中的一些常用的属性，非常实用，不过如果是刚接触 ListView 的话，可能会有些陌生（本人刚开始用的时候也是，然后翻遍了 Qt 帮助文档），所以这里汇总一些最常用的属性并介绍其...
qml中tableview表格的使用
06-28
### 回答1： 在QML中，可以使用TableView元素创建表格。使用model属性来指定表格的数据来源，其中的属性要使用TableModel类型。可以使用表头的visible属性和表头项来设置表格的表头。可以使用delegate属性和属性代理来设置表格中单元格的样式和内容。还可以使用resizeMode属性来设置表格的列宽自适应模式。最后，将TableView元素添加到适当的布局容器中来将表格放置在应用程序中。 ### 回答2： QML是一种基于Qt框架的声明式语言，用于快速开发并实现用户界面。其中，TableView就是一种常见的控件，用于展示多行多列的数据。 TableView的用法与其他控件类似，可以在QML文件中直接创建一个TableView： ``` TableView { // 设置表格的宽度和高度 width: 300 height: 200 // 设置表格的model（即数据），可以是Javascript中的数组或者ListModel等数据结构 model: ListModel { ListElement { name: "Tom"; age: 20 } ListElement { name: "Lucy"; age: 18 } ListElement { name: "Kate"; age: 22 } } // 设置表格的行和列的数量、宽度 TableViewColumn { role: "name"; title: "Name"; width: 100 } TableViewColumn { role: "age"; title: "Age"; width: 100 } } ``` 上述代码中，首先设置了TableView的宽度和高度，然后通过model属性设置了表格的数据。在这里，我们使用了ListModel，并将三个元素添加进去。接着，通过TableViewColumn设置了表格的列数以及每列进行展示的数据，例如第一列展示name，第二列展示age。 通过设置TableViewColumn还可以自定义每列的样式，例如： ``` TableViewColumn { role: "name" title: "Name" width: 100 delegate: Rectangle { color: "lightblue" border.color: "black" width: parent.width height: parent.height Text { text: styleData.value anchors.centerIn: parent } } } ``` 上述代码中，我们添加了一个Rectangle作为每列的样式，并且使用了Text组件来实现每个单元格的内容展示。 当然，除了上述基本用法以外，TableView还支持各种事件响应、滚动条控制等功能，可根据不同的需求进一步定制。总之，QML的TableView控件在展示多行多列的数据时非常实用，方便快捷易用。 ### 回答3： QML中的TableView有助于显示相对较大的表格数据。使用TableView时，您可以灵活地设置表格外观和排序规则。以下是如何使用TableView的一些示例。 首先，您需要导入QtQuick.Controls模块，以便可以使用TableView组件。 1. 基本用法 首先，在QML中创建一个TableView组件。然后，将表格列数据添加到model中。使用delegate设置每个单元格的外观。例如： ``` import QtQuick.Controls 1.4 TableView { TableViewColumn { role: "name" title: "Name" } TableViewColumn { role: "age" title: "Age" } model: ListModel { ListElement { name: "John" age: 30 } ListElement { name: "Mary" age: 40 } } delegate: Text { text: styleData.value } } ``` 在上面的例子中，我们定义一个表格，其中包含两列数据：name和age。model中包含两个元素，每个元素都包含名称和年龄。最后，我们将每个单元格的值设置为Text实例的文本属性。 2. SortDelegate和SortIndicator 可以使用SortDelegate和SortIndicator组件来为表格添加排序功能。SortDelegate将包含在表格的表头中。SortIndicator将指示按列排序的方向。 ``` import QtQuick.Controls 1.4 TableView { TableViewColumn { role: "name" title: "Name" sortIndicator: SortIndicator { column: 0 ascending: true } sortDelegate: Item { width: 10 Rectangle { anchors.fill: parent color: styleData.sortIndicatorColor } } } TableViewColumn { role: "age" title: "Age" sortIndicator: SortIndicator { column: 1 ascending: true } sortDelegate: Item { width: 10 Rectangle { anchors.fill: parent color: styleData.sortIndicatorColor } } } model: ListModel { ListElement { name: "John" age: 30 } ListElement { name: "Mary" age: 40 } } delegate: Text { text: styleData.value } } ``` 在上面的例子中，我们为每个列设置sortDelegate和sortIndicator，以便单击表头时实现升序和降序排序。 3. 带有扩展固定行的表格 也可以为表格添加一行或多行。 在这种情况下，表格将具有固定的标题行，而剩余的部分则可以滚动。 ``` import QtQuick.Controls 1.4 TableView { TableViewColumn { role: "name" title: "Name" } TableViewColumn { role: "age" title: "Age" } TableViewColumn { role: "email" title: "Email" } model: ListModel { ListElement { name: "John" age: 30 email: "john@example.com" } ListElement { name: "Mary" age: 40 email: "mary@example.com" } ListElement { name: "David" age: 35 email: "david@example.com" } ListElement { name: "Alice" age: 25 email: "alice@example.com" } } headerDelegate: Rectangle { height: 30 color: "gray" Text { text: model ? model.roleNames()[styleData.column] : "" font.bold: true anchors.centerIn: parent } } delegate: Text { text: styleData.value } } ``` 在此示例中，我们添加了一个headerDelegate，以显示在表格顶部的标题行。 headerDelegate设置了一个高度为30的矩形，其中包含TableColumn的标题。要添加固定行，我们将headerDelegate属性设置为Text，以便在表格顶部显示标题。 总结： 在QML中使用TableView可以轻松地显示表格数据。基本的TableView用法可以帮助您使用未排序或未分组的数据，但如果您需要更高级的功能，例如排序、固定行或多列滚动等，则可以使用SortDelegate和SortIndicator组件。最后，您还可以使用headerDelegate属性来为表格添加一个固定的标题行。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

luoyayun361

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值