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：内容字体
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{qt listview
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
var c2 = ColumnWidth(2)
var c5 = ColumnWidth(5)
dataListView.setColumnWidth(2,c2-50)
dataListView.setColumnWidth(5,c5+100)
}
}
使⽤⽅法为将C++中暴露给Qml的model直接赋值给TableView的model属性即可。
源码：
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.HeaderList():Object.(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.width: gridPoint
}
}
}
}
}
}
Component{
id:listDelegate
Rectangle{
width: contentWidth
height: rowsHeight
color: index%2 ==0 ? backgroundColor:alternateBackgroundColor
property var myModel: model
property var modelColumnsList: del.HeaderList():Object.(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.width: gridPoint
}
}
}
}
}
}
delegate:listDelegate
function setColumnWidth(index,width){
var headerItem = listView.headerItem.headerRepeater.itemAt(index)
contentWidth = contentWidth - headerItem.width+width

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。