一、前言
针对最新版本 TableView 如何设置表头,在新版中直接继承 Flickable 所以各项效果更加完备,由于需要频繁弹出和压入数据以保证资源的最大利用,官方建议不太适合静态类型的 delegate
新版中,使用 index 进行数据索引,不再使用 styleData 关键字
二、示例
TableView {
anchors {
top: parent.top
bottom: bottomCheckGroup.top
left: parent.left
right: parent.right
topMargin: 0
leftMargin: 0
rightMargin: 0
bottomMargin: 2
}
id: tableView
//QML 新出的设置行宽和列宽的方式,如果需要某一行隐藏,只需要将这一行返回值设置为 0 即可
//具体看官方文档
columnWidthProvider: function (column) { return __headWidth; }
rowHeightProvider: function (column) { return 25; }
leftMargin: rowsHeader.implicitWidth
topMargin: columnsHeader.implicitHeight
model: MyAdjustModel {
id: table_model
}
ScrollBar.horizontal: ScrollBar{}
ScrollBar.vertical: ScrollBar{}
clip: true
//用于关闭拖动效果
boundsBehavior: Flickable.OvershootBounds
reuseItems: false
delegate: SysTableViewDelegate {
}
//左上角内容
SysTableLeftTopMaskDelegate {
}
//列头部 利用 Repeater 自动重复生成
//SysTableTextColumnsHeaderDelegate 是本人自定义变量需要替换
//新版 TableView 使用 index 进行数据索引
Row {
id: columnsHeader
y: tableView.contentY
z: 2
Repeater {
model: tableView.columns > 0 ? tableView.columns : 1
SysTableTextColumnsHeaderDelegate{
width: tableView.columnWidthProvider(modelData)
height: 65
color: __bordColor
titleWorkObj: table_model.getTitleParent(index)
}
}
}
//行头部
Column {
id: rowsHeader
x: tableView.contentX
z: 2
Repeater {
model: tableView.rows > 0 ? tableView.rows : 1
Rectangle {
width: 60
height: tableView.rowHeightProvider(modelData)
color: __bordColor
Label {
anchors.fill: parent
anchors {bottomMargin: 2}
anchors.centerIn: parent
text: table_model.headerData(modelData, Qt.Vertical)
color: '#7785a9'
font.pixelSize: 15
padding: 10
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
background: Rectangle { color: "white" }
}
}
}
}
ScrollIndicator.horizontal: ScrollIndicator { }
ScrollIndicator.vertical: ScrollIndicator { }
}
三、图示