Question

我正在尝试让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
                    }
              }
           }

        }

Answer 1

一种方法是创建Rectangle对象，这些对象在item和row委托中充当行。基本上你适当地锚定矩形并给它宽度为1创建一条线。例如：

itemDelegate: Rectangle {
           //include the rest of your itemDelegate code...

           Rectangle {
               anchors {
                   right: parent.right
                   top: parent.top
                   bottom: parent.bottom
               }
               width: 1
               color: "black"
           }
       }

类似地，行委托也可以这样做：

rowDelegate: Rectangle {
           //include the rest of your rowDelegate code...

           Rectangle {
               anchors{
                   right: parent.right
                   left: parent.left
                   bottom: parent.bottom
               }
               height: 1
               color: "black"
           }
      }

如何在Qt Quick TableView中显示网格线？

1 个答案: