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

Я пытаюсь заставить 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
                    }
              }
           }

        }

qml qtquick2 qtquickcontrols
person Rovshan    schedule 08.12.2015    source источник
comment
Возможно, было бы проще использовать GridView или Repeater внутри RowLayout. Там вы можете дать делегатам вашей модели border. Вопрос в том, действительно ли вам нужен TableView?   -  person sk2212    schedule 08.12.2015

Ответы (1)


arrow_upward
0
arrow_downward

Один из подходов заключается в создании объектов 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"
           }
      }
person DanielJG    schedule 10.08.2016