[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?

[GüntherFelgo 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

[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.

[GüntherFelgo 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

[Wojciech]

Thank you, it works.

[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) ?

 

[GüntherFelgo 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