Grid highlight behing Item rect delegate .

rafaelSorel

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 ?

shav

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
}

@

rafaelSorel

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.

shav

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.