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. List View Overlapping issue with the another components when scrolled
Forum Updated to NodeBB v4.3 + New Features

List View Overlapping issue with the another components when scrolled

Scheduled Pinned Locked Moved Solved QML and Qt Quick
6 Posts 3 Posters 2.1k Views 2 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.
  • AdithyaA Offline
    AdithyaA Offline
    Adithya
    wrote on last edited by
    #1

    I am using a List View in between two rectangles .When the list view is scrolled the ,it overlaps with the upper rectangle. Is there any way to resolve it

    NOTE: I know that making clip true will work but I am looking for some other solution to this

    The code as follows

    import QtQuick 2.9
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.5

    Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ListModel{
        id: listModel
        ListElement{name: "Adithya"}
        ListElement{name: "Ramesh"}
        ListElement{name: "RRNagara"}
        ListElement{name: "Adithya"}
        ListElement{name: "Ramesh"}
        ListElement{name: "RRNagara"}
        ListElement{name: "Adithya"}
        ListElement{name: "Ramesh"}
        ListElement{name: "RRNagara"}
    }
    Component {
        id : delComp
        Item{
            width: 100;height: 50
            Text{
                text: name;color: "black";font.pixelSize: 16; visible: true
                Component.onCompleted: {
                    console.log("Completed")
                }
            }
        }
    }
    
    Column{
        id: mainLayout
        width: parent.width
        height: 400
        Rectangle{
            id: firstRect
            width: parent.width
            height: 50
            z:2
            color: "yellow"
        }
    
        ListView{
            id: listView
            width: parent.width
            height: 300
            z:20
            flickableDirection: Flickable.VerticalFlick
            boundsBehavior: Flickable.StopAtBounds
    
            model: listModel
            delegate:delComp
    
            ScrollBar.vertical: ScrollBar{}
        }
    
        Rectangle{
            id: secondRect
            width: parent.width
            height: 50
            color: "yellow"
        }
    }
    

    }

    I have also uploaded the screenshot also

    0_1560403265859_ListViewScrollIssue.png

    J.HilkJ 1 Reply Last reply
    0
    • AdithyaA Adithya

      I am using a List View in between two rectangles .When the list view is scrolled the ,it overlaps with the upper rectangle. Is there any way to resolve it

      NOTE: I know that making clip true will work but I am looking for some other solution to this

      The code as follows

      import QtQuick 2.9
      import QtQuick.Window 2.2
      import QtQuick.Controls 2.5

      Window {
      visible: true
      width: 640
      height: 480
      title: qsTr("Hello World")

      ListModel{
          id: listModel
          ListElement{name: "Adithya"}
          ListElement{name: "Ramesh"}
          ListElement{name: "RRNagara"}
          ListElement{name: "Adithya"}
          ListElement{name: "Ramesh"}
          ListElement{name: "RRNagara"}
          ListElement{name: "Adithya"}
          ListElement{name: "Ramesh"}
          ListElement{name: "RRNagara"}
      }
      Component {
          id : delComp
          Item{
              width: 100;height: 50
              Text{
                  text: name;color: "black";font.pixelSize: 16; visible: true
                  Component.onCompleted: {
                      console.log("Completed")
                  }
              }
          }
      }
      
      Column{
          id: mainLayout
          width: parent.width
          height: 400
          Rectangle{
              id: firstRect
              width: parent.width
              height: 50
              z:2
              color: "yellow"
          }
      
          ListView{
              id: listView
              width: parent.width
              height: 300
              z:20
              flickableDirection: Flickable.VerticalFlick
              boundsBehavior: Flickable.StopAtBounds
      
              model: listModel
              delegate:delComp
      
              ScrollBar.vertical: ScrollBar{}
          }
      
          Rectangle{
              id: secondRect
              width: parent.width
              height: 50
              color: "yellow"
          }
      }
      

      }

      I have also uploaded the screenshot also

      0_1560403265859_ListViewScrollIssue.png

      J.HilkJ Offline
      J.HilkJ Offline
      J.Hilk
      Moderators
      wrote on last edited by
      #2

      @Adithya
      if you don't want to use clip, than don't set the z value of your ListView to 20.
      Leave it at 0 (the default) and the yellow border will be drawn after the list view -> no text from the delegates in the yellow area


      Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


      Q: What's that?
      A: It's blue light.
      Q: What does it do?
      A: It turns blue.

      AdithyaA 1 Reply Last reply
      0
      • J.HilkJ J.Hilk

        @Adithya
        if you don't want to use clip, than don't set the z value of your ListView to 20.
        Leave it at 0 (the default) and the yellow border will be drawn after the list view -> no text from the delegates in the yellow area

        AdithyaA Offline
        AdithyaA Offline
        Adithya
        wrote on last edited by
        #3

        @J.Hilk Yes, I was using trail and error method to find a solution . The issue is when scrolling it overlaps with the upper rectangle

        J.HilkJ 1 Reply Last reply
        0
        • AdithyaA Adithya

          @J.Hilk Yes, I was using trail and error method to find a solution . The issue is when scrolling it overlaps with the upper rectangle

          J.HilkJ Offline
          J.HilkJ Offline
          J.Hilk
          Moderators
          wrote on last edited by
          #4

          @Adithya

          Column{
                  id: mainLayout
                  width: parent.width
                  height: 400
                  Rectangle{
                      id: firstRect
                      width: parent.width
                      height: 50
                      z:1
                      color: "yellow"
                  }
          
                  ListView{
                      id: listView
                      width: parent.width
                      height: 300
                      z:0
                      flickableDirection: Flickable.VerticalFlick
                      boundsBehavior: Flickable.StopAtBounds
          
                      model: listModel
                      delegate:delComp
          
                      ScrollBar.vertical: ScrollBar{}
                  }
          
                  Rectangle{
                      id: secondRect
                      width: parent.width
                      height: 50
                      color: "yellow"
                      z:0
                  }
              }
          

          works fine


          Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


          Q: What's that?
          A: It's blue light.
          Q: What does it do?
          A: It turns blue.

          1 Reply Last reply
          4
          • Shrinidhi UpadhyayaS Offline
            Shrinidhi UpadhyayaS Offline
            Shrinidhi Upadhyaya
            wrote on last edited by Shrinidhi Upadhyaya
            #5

            Hi @Adithya ,

            • First thing is use Layouts, you can also use columns but using Layouts is better,so for more informaton about layouts[https://doc.qt.io/qt-5/qtquicklayouts-index.html]

            • Just set the clip property in ListView

            Here is your code with few changes:-

            ListModel{
                id: listModel
                ListElement{name: "Adithya"}
                ListElement{name: "Ramesh"}
                ListElement{name: "RRNagara"}
                ListElement{name: "Adithya"}
                ListElement{name: "Ramesh"}
                ListElement{name: "RRNagara"}
                ListElement{name: "Adithya"}
                ListElement{name: "Ramesh"}
                ListElement{name: "RRNagara"}
            }
            
            Component {
                id : delComp
                
                Item{
                    width: 100;height: 50
                    Text{
                        text: name;color: "black";font.pixelSize: 16; visible: true
                        Component.onCompleted: {
                            console.log("Completed")
                        }
                    }
                }
            }
            
            ColumnLayout{
                id: mainLayout
                width: parent.width
                height: 400
            
                Rectangle{
                    id: firstRect
            
                    Layout.fillWidth: true
                    Layout.preferredHeight: 50
                    color: "yellow"
                }
            
                ListView{
                    id: listView
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    flickableDirection: Flickable.VerticalFlick
                    boundsBehavior: Flickable.StopAtBounds
                    model: listModel
                    delegate:delComp
                    clip: true
                    ScrollBar.vertical: ScrollBar{}
                }
            
                Rectangle{
                    id: secondRect
            
                    Layout.fillWidth: true
                    Layout.preferredHeight: 50
                    color: "yellow"
                }
            }
            

            Sample Output:-

            0_1560404903740_440e3dbb-b89f-4596-b902-114e633157af-image.png

            Shrinidhi Upadhyaya.
            Upvote the answer(s) that helped you to solve the issue.

            1 Reply Last reply
            5
            • AdithyaA Offline
              AdithyaA Offline
              Adithya
              wrote on last edited by
              #6

              Thanks for the help!

              1 Reply Last reply
              1

              • Login

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