Forums

OverviewFelgo 2 Support (Qt 5) › Adding AppImage objects dynamically

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #16753

    Wojciech

    I try to develop image gallery based on Quick2.SwipeView (images come from ajax call). When I prepare swipe view with static 5 app images it works great. But I have troubles with doing it dynamically. Do you have any snipnet how to add appimages to any container on the fly?

    #16754

    Günther
    Felgo Team

    Hi!

    You can have a look at the Qt documentation to see how to create objects dynamically: Dynamic Object Creation from Javascript

    The following example uses this mechanism to add Rectangles with a random color to a SwipeView:

    import Felgo 3.0
    import QtQuick 2.0
    import QtQuick.Controls 2.1
    
    App {
      SwipeView {
        id: swipeView
        anchors.fill: parent
      }
    
      AppButton {
        anchors.horizontalCenter: parent.horizontalCenter
        text: "Add Item"
        onClicked: rectComponent.createObject(swipeView, { color: utils.randomColor() })
      }
    
      Component {
        id: rectComponent
        Rectangle { }
      }
    
      AppText {
        anchors.centerIn: parent
        text: (swipeView.currentIndex + 1)+" of "+swipeView.count
        z: 1
      }
    }
    

    Was this what you were looking for?

    Best,
    GT

    #16755

    Wojciech

    Thank you, yes, it works as I needed.

    I have SwipeView in a Page component, that I show when clicking on SimpleRow from search results.

    On which event of page (or other component) I should fire filling the gallery? Now I have it as in your example: after clicking on a button, but I want to have it just after showing detail page.

    Regards,

    W.

    #16758

    Günther
    Felgo Team

    There are signals for the Page you can use, for example Page::onPushed, which is fired when the page is pushed onto a NavigationStack.

    Another possible solution is using the Component.onCompleted signal, that is fired when the Page is created by the QML Engine. Component.onCompleted is available for every Item in QML to e.g. run some initialization code.

    Best,
    Günther

    #16761

    Wojciech

    Thank you, it works.

    #16844

    Wojciech

    I have to other problems:

    1. I’ve added dinamically several AppImages to SwipeView as here:
            Quick2.SwipeView {
              id: imgSwipeView
              width: scroll.width/2
              height: width / 1.2
              anchors.bottom: parent.bottom
              anchors.horizontalCenter: parent.horizontalCenter
            }

    scroll is a Flickable above SwipeView. I want my image gallery be only on half width of the screen, in horizontal center and only one image visible at the moment (rest conrolled by swipping or page control). But I get: three images seen at the moment, justified to left. How to fix it?

    2. My AppImage objects have MouseArea connected to PictureViewer.show() – it works well: clicked image is enlarged and then can by easilly closed. But is it possible to zoom it manualy in PictureViewer to see details of the photo (as in a phone photo gallery just by finger gestures) ?

     

    #16847

    Günther
    Felgo Team

    Hi Wojciech,

    QML Items show all parts of their child items even if they are outside of the Item’s bounds configured by width/height. So when using a SwipeView with width: scroll.width/2, the image-parts that are outside of the view-area will also be visible. To cut off the images to the left and right of swipe-view, set

    Quick2.SwipeView {
      // ...
      clip: true // cut off content if outside of item view area
    }

     

    The PictureViewer does not support the pinch-to-zoom feature at the moment. You can have a look at the RoomPage.qml of Qt World Summit demo app, which shows an AppImage and uses a Flickable and PinchArea to allow flicking and pinch-to-zoom.

    Best,
    Günther

     

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