Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

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.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded