QML TableView表格使用示例

前言

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下载


  • 18
    点赞
  • 87
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
### 回答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还支持各种事件响应、滚动条控制等功能,可根据不同的需求进一步定制。总之,QMLTableView控件在展示多行多列的数据时非常实用,方便快捷易用。 ### 回答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: "[email protected]" } ListElement { name: "Mary" age: 40 email: "[email protected]" } ListElement { name: "David" age: 35 email: "[email protected]" } ListElement { name: "Alice" age: 25 email: "[email protected]" } } 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属性来为表格添加一个固定的标题行。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

luoyayun361

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

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

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

打赏作者

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

抵扣说明:

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

余额充值