QML 自定义TableView控件(在ListView基础上实现类似QTableView功能)
- 作者: 小白----------------
- 来源: 51数据库
- 2021-07-12
概述:
在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
}
}
?