Forums

OverviewFelgo 2 Support (Qt 5) › How to add scroll indicator into AppFlickable?

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #18724

    Niyazi

    Hi,

    I follow the Showcase examples. I try to test the examples creating a new project. In my new project AppFlickable { } works. But when I try to add scroll indicator I am getting error on the flickable: scroll, the project does not recognize the “flickable” key word.

    Error:  Cannot assign to non-existent property “flickable”

     

    Any help please?

     

    
    import QtQuick 2.0
    import QtQuick.Controls 1.2
    import Felgo 3.0
    import "../common"
    
    AppFlickable {
        id: scroll
        anchors.fill: parent
        contentHeight: content.height
     ***
     ***
     ***
    }
    
    // add scroll indicator
      ScrollIndicator {
        flickable: scroll
      }

     

    #18753

    Alex
    Felgo Team

    Does this example work for you:

    import QtQuick 2.0
    import QtQuick.Controls 1.2
    import Felgo 3.0
    
    App {
    
      NavigationStack {
    
        Page {
          id: page
          title: "AppFlickable"
    
          AppFlickable {
            id: flick
            anchors.fill: parent                // The AppFlickable fills the whole page
            contentWidth: contentColumn.width   // You need to define the size of your content item
            contentHeight: contentColumn.height
    
            // Using a Column as content item is very convenient
            // The height of the column is set automatically depending on the child items
            Column {
              id: contentColumn
              width: page.width // We only need to set the width of a column
    
              // We use a repeater to create 4 colored Rectangles
              Repeater {
                // We use a simple array of colors as model
                model: ["#eee","#ddd","#ccc","#bbb"]
    
                Rectangle {
                  color: modelData    // This will be "red", "green", ...
                  width: parent.width
                  height: dp(200)
                }
              }
            }
          }
          
          ScrollIndicator {
            flickable: flick
          }
        }
      }
    }
    

    Your error log output would make sense if you had e.g. import QtQuickControls 2.2, as there is also a ScrollIndicator type with a different API in this module. In such cases you can use a namespace to resolve the conflict, like this:

    import QtQuick 2.0
    import QtQuick.Controls 1.2
    import Felgo 3.0
    // if you dont specify a namespace with "as", this causes your error
    import QtQuick.Controls 2.2 as QQC2
    
    App {
    
      NavigationStack {
    
        Page {
          id: page
          title: "AppFlickable"
    
          AppFlickable {
            id: flick
            anchors.fill: parent                // The AppFlickable fills the whole page
            contentWidth: contentColumn.width   // You need to define the size of your content item
            contentHeight: contentColumn.height
    
            // Using a Column as content item is very convenient
            // The height of the column is set automatically depending on the child items
            Column {
              id: contentColumn
              width: page.width // We only need to set the width of a column
    
              // We use a repeater to create 4 colored Rectangles
              Repeater {
                // We use a simple array of colors as model
                model: ["#eee","#ddd","#ccc","#bbb"]
    
                Rectangle {
                  color: modelData    // This will be "red", "green", ...
                  width: parent.width
                  height: dp(200)
                  
                  // We use the namespace QQC2 now to use the Button from the right module
                  QQC2.Button {
                    anchors.centerIn: parent
                    text: "Qt Quick Controls 2 Button"
                  }
                }
              }
            }
          }
          
          ScrollIndicator {
            flickable: flick
          }
        }
      }
    }
    

    Does this help in your case?

    Cheers,
    Alex

    #18758

    Niyazi

    Thanks Alex,

    Using your line

          import QtQuick.Controls 2.2 as QQC2 

    it works. Adding  as QQC2  does the job. 🙂

Viewing 3 posts - 1 through 3 (of 3 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support