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. Qml blur effect on scrollview
Forum Updated to NodeBB v4.3 + New Features

Qml blur effect on scrollview

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 2 Posters 315 Views
  • 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.
  • A Offline
    A Offline
    AmirCH
    wrote on 24 Jun 2021, 21:10 last edited by AmirCH
    #1

    i want to add blur effect at the bottom of scrollview like this:download.jpeg
    i wrote this code with Qml but does not work correctly. could you please tell me where is the problem and how can i fix this ?

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Layouts 1.12
    import QtGraphicalEffects 1.0
    
    ApplicationWindow {
        id: window
        width: 480
        height: 520
        visible: true
        title: qsTr('Blur List')
        color: 'black'
        ScrollView {
            id: view
            anchors.fill: parent
            Column {
                spacing: 15
                width: view.width - 10
                anchors.centerIn: parent
                Repeater {
                    model: 30
                    delegate: Rectangle {
                        width: view.width - 5
                        height: 50
                        radius: 10
                        color: 'orange'
                    }
                }
            }
        }
        ShaderEffectSource {
            id: shader
            width: view.width
            height: 80
            anchors.bottom: parent.bottom
            sourceItem: view
            sourceRect: Qt.rect(x, y, width, height)
        }
        FastBlur {
            id: fastBlur
            anchors.fill: shader
            source: shader
            radius: 20
        }
    }```
    1 Reply Last reply
    0
    • M Offline
      M Offline
      Markkyboy
      wrote on 26 Jun 2021, 18:18 last edited by Markkyboy
      #2

      Here's something close to your description/image/code. But not with ScrollView, your image shows a numbered list, this is ListView or similar.

      import QtQuick 2.12
      import QtQuick.Controls 2.12
      import QtQuick.Layouts 1.12
      import QtGraphicalEffects 1.0
      
      ApplicationWindow {
          id: window
          width: 540
          height: 540
          visible: true
          title: qsTr('Blur list bottom')
      
          ListView {
              id: view
              model: 30
              spacing: 2
              anchors.fill: parent
      
              delegate: Rectangle { id: bar
                  width: view.width; height: 80; radius: 10
                  LinearGradient {
                      anchors.fill: bar
                      start: Qt.point(500, 0)
                      end: Qt.point(0, 0)
                      gradient: Gradient {
                          GradientStop { position: 0.0; color: "darkblue" }
                          GradientStop { position: 1.0; color: "green" }
                      }
                  }
                  Label { x: 10; text: index; font.pixelSize: 24; color: "white"; anchors.verticalCenter: parent.verticalCenter }
              }
          }
          ShaderEffectSource {
              id: effectSource
              sourceItem: view
              width: parent.width
              height: 100
              sourceRect: Qt.rect(x,y, width, height)
              anchors.bottom: view.bottom
          }
      
          FastBlur{
              anchors.fill: effectSource
              source: effectSource
              radius: 100
          }
      
          Label { text: "Some layout here"; color: "white"; font.pixelSize: 18; anchors.centerIn: effectSource }
      }
      

      amirch.JPG

      Don't just sit there standing around, pick up a shovel and sweep up!

      I live by the sea, not in it.

      1 Reply Last reply
      0

      1/2

      24 Jun 2021, 21:10

      • Login

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