c/c++语言开发共享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     } }  

c/c++开发分享QML 自定义TableView控件(在ListView基础上实现类似QTableView功能)地址：https://blog.csdn.net/zjgo007/article/details/112568656