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
}
}
}
}