Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Grid highlight behing Item rect delegate .

    QML and Qt Quick
    2
    4
    725
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      rafaelSorel last edited by

      Hello Guys,

      I'm facing an issue regarding the Gird highlight. This is my piece of code, the problem is that the hightlight is behind the Rectangle in delegate component declaration. So I cannot see it :

      @
      ListModel {
      id: keyBoardItemModel
      //Template to Use
      ListElement {
      cellText: ""
      cellCornerText: ""
      }
      }

      Component {
              id: appDelegate
              Item {
                  width: 80
                  height: 80
                  Rectangle {
                      id: lettreCompRect
                      width: 80
                      height: 80
                      radius: 10
                      border.color: "grey"
                      border.width: 1
                      gradient: Gradient {
                          GradientStop { position: 0.0; color: "#585858" }
                          GradientStop { position: 1.0; color: "black" }
                      }
                  }
                  Text {
                      text: cellText
                      font.pointSize: 30
                      anchors.centerIn: lettreCompRect
                      color: "white"
                  }
                  Text {
                      text: cellCornerText
                      anchors.top: lettreCompRect.top
                      anchors.topMargin: marginBlock/2
                      anchors.left: lettreCompRect.left
                      anchors.leftMargin: marginBlock
                      font.pointSize: 18
                      color: "white"
                  }
              }
          }
      
      Component {
              id: highlightGridView
              Rectangle {
                  width: highlightGirdWidth
                  height: 80
                  radius: 10
                  gradient: Gradient {
                      GradientStop { position: 0.0; color: "#58D3F7" }
                      GradientStop { position: 1.0; color: "#0B4C5F" }
                  }
              }
          }
      
      GridView {
          id: keyBoardGridList
          anchors.left: keyBoardBackground.left
          anchors.right: keyBoardBackground.right
          anchors.top: keyBoardBackground.top
          anchors.bottom: keyBoardBackground.bottom
          cellWidth: 90
          cellHeight: 90
      
          focus :true
          model: keyBoardItemModel
          delegate: appDelegate
          highlight: highlightGridView
          interactive: false
       }
      

      @

      So How can I display the higlight rect above the delegate Rect ?

      1 Reply Last reply Reply Quote 0
      • S
        shav last edited by

        Hi,

        Please check the code:
        @
        ListModel {
        id: keyBoardItemModel
        //Template to Use
        ListElement {
        cellText: ""
        cellCornerText: ""
        }
        ListElement {
        cellText: ""
        cellCornerText: ""
        }
        ListElement {
        cellText: ""
        cellCornerText: ""
        }
        ListElement {
        cellText: ""
        cellCornerText: ""
        }
        ListElement {
        cellText: ""
        cellCornerText: ""
        }
        }

        Component {
        id: appDelegate
        Item {
        width: keyBoardGridList.cellWidth
        height: keyBoardGridList.cellHeight
        Rectangle {
        id: lettreCompRect
        anchors.centerIn: parent
        width: 80
        height: 80
        radius: 10
        border.color: "grey"
        border.width: 1
        gradient: Gradient {
        GradientStop { position: 0.0; color: "#585858" }
        GradientStop { position: 1.0; color: "black" }
        }
        }
        Text {
        text: cellText
        font.pointSize: 30
        anchors.centerIn: lettreCompRect
        color: "white"
        }
        Text {
        text: cellCornerText
        anchors.top: lettreCompRect.top
        // anchors.topMargin: marginBlock/2
        anchors.left: lettreCompRect.left
        // anchors.leftMargin: marginBlock
        font.pointSize: 18
        color: "white"
        }

                   MouseArea {
                      anchors.fill: parent
                      onClicked: {
                          keyBoardGridList.currentIndex = index;
                      }
                   }
               }
           }
        

        Component {
        id: highlightGridView
        Rectangle {
        x: keyBoardGridList.currentItem.x
        y: keyBoardGridList.currentItem.y
        width: keyBoardGridList.currentItem.width + 5
        height: keyBoardGridList.currentItem.height + 5
        z: keyBoardGridList.currentItem.z - 1

                   gradient: Gradient {
                       GradientStop { position: 0.0; color: "#58D3F7" }
                       GradientStop { position: 1.0; color: "#0B4C5F" }
                   }
                   Behavior on x { SpringAnimation { spring: 3; damping: 0.3 } }
                   Behavior on y { SpringAnimation { spring: 3; damping: 0.3 } }
               }
           }
        

        GridView {
        id: keyBoardGridList
        anchors.fill: parent
        cellWidth: 90
        cellHeight: 90

           focus :true
           model: keyBoardItemModel
           delegate: appDelegate
           highlight: highlightGridView
           highlightFollowsCurrentItem: true
           interactive: false
        }
        

        @

        Mac OS and iOS Developer

        1 Reply Last reply Reply Quote 0
        • R
          rafaelSorel last edited by

          Thaks for your reply ,
          But the same problem remains, as the highlight would be always in the back of delegate rect, and by having a little more reflex, I think it is normal that the highlight would be behind the delegate as it could hide the delegate contains if it was above it. So the solution would be to create a simple grid behind the GridView that simply contains rectangles and in the delegate only creates the text itself.

          1 Reply Last reply Reply Quote 0
          • S
            shav last edited by

            Oh.... You need to show highlight item on the top of you grid view delegate? If so you need to change the one value of highlight delegate from this:
            @
            z: keyBoardGridList.currentItem.z - 1
            @

            to:
            @
            z: keyBoardGridList.currentItem.z + 1
            @

            But in this case content of you grid item behind highlight item could be hidden.

            Mac OS and iOS Developer

            1 Reply Last reply Reply Quote 0
            • First post
              Last post