Как показать линии сетки в Qt Quick TableView?

Question

Я пытаюсь сделать TableView (QtQuick.Controls) показать линии сетки (горизонтальные и вертикальные). Я играл со стилем, делегатами item/row/header, но не смог найти, как это сделать. Возможно ли использование встроенных функций, или я должен каким-то образом реализовать его самостоятельно?

EDIT

В настоящее время в конечном итоге с этим кодом:

 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, которые действуют как линии в обоих ваших элементов и ряда делегатов. По существу, вы привязываете прямоугольник соответствующим образом и даете ему ширину 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" 
      } 
     }