Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Grid highlight behing Item rect delegate .
Forum Updated to NodeBB v4.3 + New Features

Grid highlight behing Item rect delegate .

Scheduled Pinned Locked Moved QML and Qt Quick
4 Posts 2 Posters 965 Views 1 Watching
  • 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 Offline
    R Offline
    rafaelSorel
    wrote on last edited by
    #1

    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
    0
    • shavS Offline
      shavS Offline
      shav
      wrote on last edited by
      #2

      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
      0
      • R Offline
        R Offline
        rafaelSorel
        wrote on last edited by
        #3

        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
        0
        • shavS Offline
          shavS Offline
          shav
          wrote on last edited by
          #4

          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
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved