如何在Qt Quick TableView中顯示網格線？

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

一種方法是創建作爲兩個您的項目和行代表線矩形對象。基本上，你恰當地錨定矩形，並給它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" 
      } 
     }