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

概述：

在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：内容字体

功能：

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

getColumnWidth(index)获得index列宽度

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

 

使用方法：

新建或将DataTableView.qml添加到项目中，设置好model数据后将model赋予DataTabelView，设置相关需要属性

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.qml

DataTableView例子：点击下载DataTableView例子

源码：

import QtQuick 2.11
import QtQuick.Controls 2.4

ListView {
    id: listView
    clip: true
    header: headerView
    headerPositioning: ListView.OverlayHeader
    flickableDirection: Flickable.AutoFlickDirection
    boundsBehavior: Flickable.StopAtBounds
    contentWidth: headerList.length*columnsWidth
    ScrollBar.horizontal: ScrollBar {}
    ScrollBar.vertical: ScrollBar { }
    property var headerList: Object.keys(listView.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: "微软雅黑"
    delegate:listDelegate

    Component{
        id:headerView
        Rectangle{
            width: contentWidth
            height: headerHeight
            color: headerBackgroundColor
            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: 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
                        }
                    }
                }
            }
        }

    }

    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
    }
}