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. How to disable the overlay items of list view on the other elements.
Forum Updated to NodeBB v4.3 + New Features

How to disable the overlay items of list view on the other elements.

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 767 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
    Subuday
    wrote on last edited by
    #1

    When I scroll, items of list view overlays and close the search field.
    0_1556998983074_Screenshot from 2019-05-04 22-39-32.png
    0_1556999060061_Screenshot from 2019-05-04 22-39-29.png

    Here my code:

    Item {
    
        TextField {
            id: searchField
            height: 100
            width: parent.width - searchFilter.width - 16
            anchors {
                top: parent.top
                left: parent.left
                topMargin: 8
                leftMargin: 8
            }
            placeholderText: qsTr("Search for relevant skills")
    
            onTextChanged: {
                filterModel.setFilterString(text);
            }
        }
    
    
        ComboBox {
            id: searchFilter
            anchors.left: searchField.right
            anchors.leftMargin: 8
            model: ListModel{
                id: filterMode
                ListElement {text: "Name"}
                ListElement {text: "Skills"}
            }
    
            onCurrentIndexChanged: {
                var mode = filterMode.get(currentIndex).text
                var role
                switch(mode) {
                case "Name":
                    console.log("Enter here");
                    role = "NameRole"
                    storage.setFilterRoleSlot(role)
                    break;
                case "Skills":
                    console.log("Enter here langs");
                    role = "LangRole"
                    storage.setFilterRoleSlot(role)
                    break;
                }
            }
        }
    
        Rectangle {
            id: mentors
            height: parent.height - searchField.height - 20
            width: searchField.width
            anchors {
               top: searchField.bottom
               left: parent.left
               topMargin: 8
               leftMargin: 8
            }
    
            ListView {
             id: mentorsList
             model: filterModel
             anchors.fill: parent
             spacing: 2
             cacheBuffer: 100
    
            delegate: Rectangle {
                 id: mentorInfo
                 height: 130
                 width: mentors.width
                 color: "#ffffff"
                 antialiasing: true
                 border {
                     width: 1
                     color: "#F9F9F9"
                 }
                 layer.enabled: false
                 layer.effect: DropShadow {
                     transparentBorder: true
                     horizontalOffset: 1
                     verticalOffset: 1
                     color: "#F2F2F2"
                 }
    
                 Image {
                     id: avatar
                     source: "image://avatar/" + userID
                     height: 80
                     width: 80
                     anchors {
                         top: parent.top
                         left: parent.left
                         topMargin: 20
                         leftMargin: 8
                     }
                     fillMode: Image.PreserveAspectCrop
                     layer.enabled: true
                     layer.effect: OpacityMask {
                         maskSource: mask
                     }
                 }
    
                 Rectangle {
                     id: mask
                     height: 80
                     width: 80
                     radius: 50
                     visible: false
                 }
    
                 Text {
                     id: nameTxt
                     text: name
                     font.family: "Roboto"
                     font.pointSize: 12
                     font.weight: Font.DemiBold
                     color: "#5caa15"
                     anchors {
                         top: parent.top
                         left: avatar.right
                         topMargin: 30
                         leftMargin: 8
                     }
                 }
    
                 Rectangle {
                     id: underline
                     height: 3
                     width: nameTxt.width
                     anchors {
                         top: nameTxt.bottom
                         left: avatar.right
                         leftMargin: 10
                     }
                     color: "#5caa15"
                     visible: false
                 }
    
                 Text {
                     id: aboutTxt
                     text: about
                     font.family: "Roboto"
                     font.pointSize: 10
                     anchors {
                         top: underline.bottom
                         left: avatar.right
                         topMargin: 8
                         leftMargin: 8
                     }
                 }
    
                 Rectangle {
                     height: 20
                     width: langsTxt.width
                     color: "#E6E6E6"
    
                     anchors {
                         top: aboutTxt.bottom
                         left: avatar.right
                         topMargin: 8
                         leftMargin: 8
                     }
    
                     Text {
                         id: langsTxt
                         text: langs
                         font.family: "Roboto"
                         font.pointSize: 10
                         font.weight: Font.ExtraLight
                         anchors.horizontalCenter: parent.horizontalCenters
                     }
                 }
    
                 MouseArea {
                     anchors.fill: parent
                     hoverEnabled: true
    
                     cursorShape: Qt.PointingHandCursor
    
                     onEntered: underline.visible = true
    
                     onExited: underline.visible = false
                 }
              }
         }
       }
    }
    
    
    raven-worxR 1 Reply Last reply
    0
    • S Subuday

      When I scroll, items of list view overlays and close the search field.
      0_1556998983074_Screenshot from 2019-05-04 22-39-32.png
      0_1556999060061_Screenshot from 2019-05-04 22-39-29.png

      Here my code:

      Item {
      
          TextField {
              id: searchField
              height: 100
              width: parent.width - searchFilter.width - 16
              anchors {
                  top: parent.top
                  left: parent.left
                  topMargin: 8
                  leftMargin: 8
              }
              placeholderText: qsTr("Search for relevant skills")
      
              onTextChanged: {
                  filterModel.setFilterString(text);
              }
          }
      
      
          ComboBox {
              id: searchFilter
              anchors.left: searchField.right
              anchors.leftMargin: 8
              model: ListModel{
                  id: filterMode
                  ListElement {text: "Name"}
                  ListElement {text: "Skills"}
              }
      
              onCurrentIndexChanged: {
                  var mode = filterMode.get(currentIndex).text
                  var role
                  switch(mode) {
                  case "Name":
                      console.log("Enter here");
                      role = "NameRole"
                      storage.setFilterRoleSlot(role)
                      break;
                  case "Skills":
                      console.log("Enter here langs");
                      role = "LangRole"
                      storage.setFilterRoleSlot(role)
                      break;
                  }
              }
          }
      
          Rectangle {
              id: mentors
              height: parent.height - searchField.height - 20
              width: searchField.width
              anchors {
                 top: searchField.bottom
                 left: parent.left
                 topMargin: 8
                 leftMargin: 8
              }
      
              ListView {
               id: mentorsList
               model: filterModel
               anchors.fill: parent
               spacing: 2
               cacheBuffer: 100
      
              delegate: Rectangle {
                   id: mentorInfo
                   height: 130
                   width: mentors.width
                   color: "#ffffff"
                   antialiasing: true
                   border {
                       width: 1
                       color: "#F9F9F9"
                   }
                   layer.enabled: false
                   layer.effect: DropShadow {
                       transparentBorder: true
                       horizontalOffset: 1
                       verticalOffset: 1
                       color: "#F2F2F2"
                   }
      
                   Image {
                       id: avatar
                       source: "image://avatar/" + userID
                       height: 80
                       width: 80
                       anchors {
                           top: parent.top
                           left: parent.left
                           topMargin: 20
                           leftMargin: 8
                       }
                       fillMode: Image.PreserveAspectCrop
                       layer.enabled: true
                       layer.effect: OpacityMask {
                           maskSource: mask
                       }
                   }
      
                   Rectangle {
                       id: mask
                       height: 80
                       width: 80
                       radius: 50
                       visible: false
                   }
      
                   Text {
                       id: nameTxt
                       text: name
                       font.family: "Roboto"
                       font.pointSize: 12
                       font.weight: Font.DemiBold
                       color: "#5caa15"
                       anchors {
                           top: parent.top
                           left: avatar.right
                           topMargin: 30
                           leftMargin: 8
                       }
                   }
      
                   Rectangle {
                       id: underline
                       height: 3
                       width: nameTxt.width
                       anchors {
                           top: nameTxt.bottom
                           left: avatar.right
                           leftMargin: 10
                       }
                       color: "#5caa15"
                       visible: false
                   }
      
                   Text {
                       id: aboutTxt
                       text: about
                       font.family: "Roboto"
                       font.pointSize: 10
                       anchors {
                           top: underline.bottom
                           left: avatar.right
                           topMargin: 8
                           leftMargin: 8
                       }
                   }
      
                   Rectangle {
                       height: 20
                       width: langsTxt.width
                       color: "#E6E6E6"
      
                       anchors {
                           top: aboutTxt.bottom
                           left: avatar.right
                           topMargin: 8
                           leftMargin: 8
                       }
      
                       Text {
                           id: langsTxt
                           text: langs
                           font.family: "Roboto"
                           font.pointSize: 10
                           font.weight: Font.ExtraLight
                           anchors.horizontalCenter: parent.horizontalCenters
                       }
                   }
      
                   MouseArea {
                       anchors.fill: parent
                       hoverEnabled: true
      
                       cursorShape: Qt.PointingHandCursor
      
                       onEntered: underline.visible = true
      
                       onExited: underline.visible = false
                   }
                }
           }
         }
      }
      
      
      raven-worxR Offline
      raven-worxR Offline
      raven-worx
      Moderators
      wrote on last edited by
      #2

      @Subuday
      what version of Qt?
      You may also want to set the clip property to true of the ListView item

      --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
      If you have a question please use the forum so others can benefit from the solution in the future

      1 Reply Last reply
      2
      • S Offline
        S Offline
        Subuday
        wrote on last edited by
        #3

        Thank you! It solved my problem!

        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