Forums

OverviewFelgo 2 Support (Qt 5) › How to show several pictures using swipe or tab

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #21765

    Nuno Carvalho

    Hi,

    Suppose I have this Felgo sample code but instead of one source, I want to include several pictures that should be displayed  one by one using swipe or a tab. How can I do that?

     App {
    
       NavigationStack {
    
         Page {
           title: "Hello Felgo"
    
           AppImage {
             // The image fills the page completely, this can cause distortion depending on the image size
             anchors.fill: parent
             source: "https://felgo.com/web-assets/girl.jpg"
           }
         }
       }
     }
    #21785

    Wasswa Geoffrey

    if you a carousel functionality, i can help you with this

    ImageSwipe.qml

    import QtQuick 2.0
    import QtQuick 2.9
    import QtQuick.Controls 2.2
    Item {
    
        property var imgs:[]; // hold an array of images
    clip: true
    
    // use a SwipeView to produce the swipe functionality
        SwipeView {
            id: view
            anchors.fill: parent
            currentIndex: indicator.currentIndex
         Component.onCompleted: {
             // create another qml Component and
         var comp = Qt.createComponent("qml.qrc/../Image.qml");
    
             // loop through the array
        for(var i = 0; i < imgs.length; i++) {
    
        var t = comp.createObject(view);
    
            // bind the image souce from our image.qml with the urls stored in the Array
            t.src = Qt.binding(function() { return imgs[i] });
    
            // add the create component to the swipi view
        view.addItem(t);
    
        }
    
    }
    
    
        }
    
        // indicators to show the number of avialable images
        PageIndicator {
            id: indicator
    background:Rectangle{
    width: parent.width
    height: parent.height
    color: "transparent"
    }
            count: view.count
            currentIndex: view.currentIndex
    delegate:Rectangle{
    implicitHeight: 4
    implicitWidth: 16
    radius: 1
    color: "#ffffff"
    scale: index===indicator.currentIndex?1:0.85
    opacity: index === indicator.currentIndex ? 0.8 : 0.45
    
    
             Behavior on opacity {
                 OpacityAnimator {
                     duration: 300
                 }
    
    }
    
    
        }
    anchors.bottom: view.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    
    }
    
    }
    

    Image.qml

    import QtQuick 2.0
    import QtQuick.Controls 2.2
    import QtQuick.Controls.Material 2.2
    
    Item {
        property var src ;// property to hold the image source
        width: 100
        height:100
    
    Rectangle {
       anchors.fill: parent
        color: "#e0e0e0"
        id: nameanc
        anchors.centerIn: parent
    
        Image {
            id:image
            anchors.fill: parent
            fillMode: Image.PreserveAspectCrop
            source: src
            asynchronous:true
            cache: false
    
            BusyIndicator{
            anchors.centerIn: parent
            Material.accent: "blue"
            running:image.status===Image.Loading
            }
        }
    
    }
    
    }
    
    

     

     

Viewing 2 posts - 1 through 2 (of 2 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