Grid highlight behing Item rect delegate .



  • 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 ?



  • 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
    }
    

    @



  • 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.



  • 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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.