我正在尝试让 TableView (QtQuick.Controls) 显示网格线(水平和垂直)。我玩过风格、项目/行/标题代表,但找不到怎么做。是否可以使用内置功能,或者我必须以某种方式自己实现它?
编辑
目前以以下代码结束:
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.2
import "global.js" as Global
TableView {
SystemPalette {
id: palette
colorGroup: SystemPalette.Active
}
Component.onCompleted: {
for(var i=0; i<columnCount; ++i){
getColumn(i).movable = false
}
}
style: TableViewStyle {
frame: Rectangle {
border.width: 0
}
rowDelegate: Rectangle {
clip: true
color: styleData.selected ? palette.highlight :
(styleData.alternate ? Global.gridRowAlternatingBackgroundColor : Global.gridRowBackgroundColor)
height: dp(35)
RowLayout {
spacing: 0
Repeater {
model: columnCount
Rectangle {
color: "transparent"
border.width: dp(0.5)
border.color: Global.gridSeparatorLineColor
height: dp(35)
x: (index == 0 ? 0 : sumWidths(index)) - flickableItem.contentX
width: getColumn(index).width
function sumWidths(colIx){
var result = 0
for(var i=0; i<colIx; ++i){
result += getColumn(i).width
}
return result
}
}
}
}
}
itemDelegate: Rectangle {
clip: true
anchors.fill: parent
border.width: dp(0.5)
border.color: Global.gridSeparatorLineColor
color: styleData.selected ? palette.highlight :
((styleData.row+1)%2==0 ? Global.gridRowAlternatingBackgroundColor : Global.gridRowBackgroundColor)
Rectangle {
anchors.fill: parent
color: "transparent"
anchors.leftMargin: dp(10)
MyText {
text: styleData.value
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: styleData.textAlignment
elide: styleData.elideMode
color: styleData.textColor
font.pixelSize: fdp(14)
}
}
}
headerDelegate: Rectangle {
clip: true
height: dp(45)
color: Global.gridHeaderBackgroundColor
border.width: dp(0.5)
border.color: Global.gridSeparatorLineColor
MyText {
text: styleData.value
anchors.centerIn: parent
font.pixelSize: fdp(15)
font.family: fontBold.name
font.weight: Font.DemiBold
}
}
}
}