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. Overlaying elements in a ListView
Forum Updated to NodeBB v4.3 + New Features

Overlaying elements in a ListView

Scheduled Pinned Locked Moved QML and Qt Quick
2 Posts 1 Posters 791 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.
  • S Offline
    S Offline
    sohail
    wrote on last edited by
    #1

    Hi there,

    I'm trying to overlay some elements onto a ListView but it seems that I cannot have them be overlaid relative to the ListView's contents, but the ListView itself. Here is the code:

    @import QtQuick 2.2
    import QtQuick.Layouts 1.0
    import QtQuick.Controls 1.2
    import QtQuick.Window 2.2

    Window {

    width: 300
    height: 600
    visible: true
    
    
    ScrollView {
        id: scroll
        clip: true
        anchors.fill: parent
    
        ListView {
            id: view
            model: 100
    
            // I want this rectangle to "hover" over the fifth and
            // sixth items below. This works, but when I scroll, it
            // stays in the same position
            Rectangle {
                width: view.width
                onYChanged: console.log(y)
                y: 5*30+20 // 1/2 in 5th item, 2/3 in 6 (just example)
                height: 30
                color: "blue"
            }
    
            delegate: Rectangle {
                height: 30
                width: view.width
                border.color: "black"
            }
        }
    }
    

    }
    @

    Here is the demo of the incorrect behaviour. What I'd like to have happen is the blue rectangle remain fixed over the fifth and sixth items in the ListView. Is there a way to make this happen?

    Thanks.

    !https://i.imgur.com/PAM6R1d.gif(incorrect behaviour)!

    1 Reply Last reply
    0
    • S Offline
      S Offline
      sohail
      wrote on last edited by
      #2

      I think I have a fix (code):
      @
      import QtQuick 2.2
      import QtQuick.Layouts 1.0
      import QtQuick.Controls 1.2
      import QtQuick.Window 2.2

      Window {

      width: 300
      height: 600
      visible: true
      
      
      Component {
          id: rect
          Rectangle {
              width: view.width
              height: 30
              color: "blue"
              y: 20*30+15
              z: 2
          }
      }
      
      ScrollView {
          id: scroll
          clip: true
          anchors.fill: parent
      
          ListView {
              id: view
              model: 100
      
              Component.onCompleted: {
                  rect.createObject(view.contentItem)
              }
      
              delegate: Rectangle {
                  height: 30
                  width: view.width
                  border.color: "black"
                  Label {
                      text: index
                      z: 3
                  }
              }
          }
      }
      

      }
      @

      Demo: !https://i.imgur.com/WSlGpjx.gif(demo)!

      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