QML 自定义TableView控件(在ListView基础上实现类似QTableView功能)

喵喵叫的猴

已于 2022-02-08 09:57:54 修改

阅读量5.9k

点赞数 14

分类专栏： QML 作品展示文章标签： qml

于 2021-01-13 15:53:06 首次发布

本文链接：https://blog.csdn.net/zjgo007/article/details/112568656

版权

QML 同时被 2 个专栏收录

49 篇文章 36 订阅

订阅专栏

作品展示

10 篇文章 0 订阅

订阅专栏

概述：

在Qt5.12以前的版本中，对于数据的显示控件有 QtQuick.Controls 2中的ListView， QtQuick.Controls 1中的TableView，而 QtQuick.Controls 1的控件风格和操作习惯不符合QML的整体风格，因此我在ListView的基础上制作了TableView，提供了类似于QTableView中只需要提供model，表头、表数据等等由控件自动绑定相应属性，且控件在保留ListView所有属性的同时，添加了自定义表头,表头默认宽度、表头颜色、字体颜色、表头高度、内容高度、单独设置各列宽度，横纵滚动条等功能。如图：

控件属性：

headerList:表头列表（当不设置该数组时，控件默认表头为model中列名称）

columnsWidth：默认列宽度

headerHeight：表头高度

rowsHeight：内容行高度

headerTextColor：表头字体颜色

headerBackgroundColor：表头背景颜色

headerTextSize：表头字体大小

headerFontFamily：表头字体

backgroundColor：内容背景行颜色

alternateBackgroundColor：内容交替行颜色

gridColor：网格线颜色

gridPoint：网格线粗细

textColor：内容字体颜色

textSize：内容字体大小

textFontFamily：内容字体

scrollBarBgColor：滚动条背景色

scrollBarColor：滚动滑块颜色

scrollBarHorizontalVisible：横滚动条是否显示

scrollBarVerticalVisible：纵滚动条是否显示

功能：

setColumnWidth(index,width)设置单独列宽度

getColumnWidth(index)获得index列宽度

clear()清除表中数据

setHeaderList(list)设置表头显示内容

其他属性及功能参考ListView文档

使用方法：

新建或将DataTableView.qml添加到项目中，设置好model数据后将model赋予DataTabelView，设置相关需要属性，当数据内容需要更新前，使用clear()函数清空之前表格中已加载的数据

ListModel{
    id:listModel
    ListElement{
        PARTNO:"20201130"
        PLACE:"小山村"
        ADDRESS:"265454"
        JD:"105.0265"
        WD:"26.3265"
        BACKUP:" 2020-11-30 09:59:19"
    }
    ListElement{
        PARTNO:"20201130"
        PLACE:"大山村"
        ADDRESS:"265454"
        JD:"105.0265"
        WD:"26.3265"
        BACKUP:" 2020-11-30 09:59:19"
    }
}

DataTableView {
    id: dataListView
    anchors.fill: parent
    columnsWidth: 110
//    headerList: ["日期","地点","地址","经度","纬度","备注"]//不自己设置时，表头使用model数据列名
    model:listModel
}

设置单独列列宽：

DataTableView {
    id: dataListView
    anchors.fill: parent
    columnsWidth: 110
    headerList: ["日期","地点","地址","经度","纬度","备注"]//不自己设置时，表头使用model数据列名
    model:listModel
    Component.onCompleted: {
        var c2 = dataListView.getColumnWidth(2)
        var c5 = dataListView.getColumnWidth(5)
        dataListView.setColumnWidth(2,c2-50)
        dataListView.setColumnWidth(5,c5+100)
    }
}

DataTableView.qml下载链接：点击下载DataTableView.qmlhttps://download.csdn.net/download/zjgo007/14363605

DataTableView例子GitHub：DataTableView(Demo)https://github.com/zjgo007/QmlDemo/tree/master/DataTableViewhttps://github.com/zjgo007/QmlDemo/tree/master/DataTableView

如果想将C++中的SQL数据Model在该TableView中展示，参看我关于将Sql Models传递给Qml中使用的文章：在QML中使用SQL Modelhttps://blog.csdn.net/zjgo007/article/details/112673115

使用方法为将C++中暴露给Qml的model直接赋值给TableView的model属性即可。

QmlSqlQueryModel下载GitHub:QmlSqlQueryModelhttps://github.com/zjgo007/QmlDemo/tree/master/DataTableViewhttps://github.com/zjgo007/QmlDemo/tree/master/DataTableView

源码：

import QtQuick 2.11
import QtQuick.Controls 2.4

ListView {
    id: listView
    clip: true
    header: headerView
    headerPositioning: ListView.OverlayHeader
    flickableDirection: Flickable.AutoFlickDirection
    contentWidth: headerList.length*columnsWidth
    ScrollBar.horizontal: ScrollBar {}
    ScrollBar.vertical: ScrollBar { }
    property var headerList: model.isSqlModel?model.getHeaderList():Object.keys(model.get(0)).reverse()
    property int columnsWidth: 100
    property int headerHeight: 40
    property int rowsHeight: 30
    property color headerTextColor:"#1c262b"
    property color headerBackgroundColor: "turquoise"
    property int headerTextSize: 13
    property string headerFontFamily: "微软雅黑"
    property color backgroundColor: "#cc7fc7df"
    property color alternateBackgroundColor: "#cc17719b"
    property color gridColor: "#99999999"
    property int gridPoint: 1
    property color textColor: "ghostwhite"
    property int textSize: 11
    property string textFontFamily: "微软雅黑"
    boundsBehavior: Flickable.StopAtBounds

    move: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }

    Component{
        id:headerView
        Rectangle{
            width: contentWidth
            height: headerHeight
            color: headerBackgroundColor
            z:15
            property var headerRepeater: headerRepeater
            Row{
                Repeater{
                    id:headerRepeater
                    model:headerList
                    Label{
                        width: columnsWidth
                        height: headerHeight
                        color: headerTextColor
                        text:headerList[index]
                        font.bold: true
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                        font.family: headerFontFamily
                        font.pointSize: headerTextSize
                        background: Rectangle{
                            color: "#00000000"
                            border.color: gridColor
                            border.width: gridPoint
                        }
                    }
                }
            }
        }
    }
    Component{
        id:listDelegate
        Rectangle{
            width: contentWidth
            height: rowsHeight
            color: index%2 ==0 ? backgroundColor:alternateBackgroundColor
            property var myModel: model
            property var modelColumnsList: listView.model.isSqlModel?listView.model.getHeaderList():Object.keys(listView.model.get(0)).reverse()//低版本报错时修改本属性
            Row{
                Repeater{
                    id:delegateRepeater
                    model:headerList
                    Label{
                        width: listView.headerItem.headerRepeater.itemAt(index).width
                        height: rowsHeight
                        color: textColor
                        text:myModel[modelColumnsList[index]]
                        font.bold: true
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                        font.family: textFontFamily
                        font.pointSize: textSize
                        elide:Text.ElideRight
                        background: Rectangle{
                            color: "#00000000"
                            border.color: gridColor
                            border.width: gridPoint
                        }
                    }
                }
            }
        }

    }
    delegate:listDelegate


    function setColumnWidth(index,width){
        var headerItem = listView.headerItem.headerRepeater.itemAt(index)
        contentWidth = contentWidth - headerItem.width+width
        headerItem.width = width
    }

    function getColumnWidth(index){
        var headerItem = listView.headerItem.headerRepeater.itemAt(index)
        return headerItem.width
    }

}

部分版本会出现问题：text:myModel[modelColumnsList[index]] 会报错误 Unable to assign a function to a property of any type other than var。原因是因为在低版本Quick的ListMode中使用get()方法得到的数据对象，该数据对象除了包含列表头数据，还有其他属性数据，导致了无法直接通过数据对象内容获取到绑定表数据内容，解决办法为新增属性modelCacheList，并修改modelColumnList属性值，如下：
property var modelCacheList: Object.keys(listView.model.get(0)).reverse()
property var modelColumnsList:modelCacheList.splice(modelCacheList.length/2+1,modelCacheList.length)