Well today I’m going to show you how to make an Image Slider in QML step by step , And you will see how easy it is .
I will assume that you already Install and run basic QML Projects but nothing more .
What we are going to build is something like this :
The first thing we want is a swipeview so we can swipe image left and right, making swipe view in QML is pretty easy :
SwipeView{
id:slider
anchors.fill:parent
clip:true//setting it make item outside of view invisible
property var model : ListModel{}//make empty model
Repeater {
model:slider.model
Image{
width: slider.width
height: slider.height
source:image //we use this name in ListModel
fillMode: Image.Stretch
}
}
}
The tricky part is to make a property name model for showing data, so we can fill the model from outside of slider .
And for Items inside of slider we use Repeater , Repeater is basically repeat components inside it (in this case Image ) base on the model you give it, so now we can have unlimited number of image side by side.
Making slider is finished :) and now it’s time to give it some data.
For this example we can use append function of ListModel :
Component.onCompleted: {
//just a bunch of random image from internet
//keep in mind the key name is "image" and should be same as what we use in Repeater slider.model.append({image:"http://www.shropshiresgreatoutdoors.co.uk/wp-content/uploads/2015/08/Prices-Dingle-400x400.jpg"}) slider.model.append({image:"http://1.bp.blogspot.com/-6PYPT11obnA/Tlc9KFGj1HI/AAAAAAAAFUc/5I_IeithKZ8/s400/Latest-Nature.jpg"}) slider.model.append({image:"http://www.shropshiresgreatoutdoors.co.uk/wp-content/uploads/2015/08/Prices-Dingle-400x400.jpg"}) slider.model.append({image:"http://1.bp.blogspot.com/-6PYPT11obnA/Tlc9KFGj1HI/AAAAAAAAFUc/5I_IeithKZ8/s400/Latest-Nature.jpg"})}
Component.OnCompleted is a function whichs run after instantiating components, and it’s a great place to fill models with data.
Now Let’s add those page indicator on the bottom of the slider:
PageIndicator {
anchors.top: slider.bottom //anchor to bottom of slider
x:(parent.width-width)/2 //make it horizontally center
currentIndex: slider.currentIndex //current item?
count: slider.count //how many items?
}
I’s pretty easy too , we use Qt’s PageIndicator component for it and give it two necessary parameter “currentIndex” and “count”
That’s it , now we have a hand made cross platform Image Slider that you can use on android/ios/windows/… with just few lines of code.
The Complete code is :
import QtQuick 2.0
import QtQuick.Controls 2.2ApplicationWindow {
visible: true
width: 400
height: 600
title: qsTr("Image Slider") SwipeView{
id:slider
anchors.top: parent.top
anchors.topMargin:verticalMargin
height: parent.height/1.7
width: height
x:(parent.width-width)/2//make item horizontally center
property var model :ListModel{}
clip:true Repeater {
model:slider.model
Image{
width: slider.width
height: slider.height
source:image
fillMode: Image.Stretch
}
}
} PageIndicator {
anchors.top: slider.bottom
anchors.topMargin: verticalMargin
x:(parent.width-width)/2
currentIndex: slider.currentIndex
count: slider.count
}Component.onCompleted: {
slider.model.append({image:"http://www.shropshiresgreatoutdoors.co.uk/wp-content/uploads/2015/08/Prices-Dingle-400x400.jpg"}) slider.model.append({image:"http://1.bp.blogspot.com/-6PYPT11obnA/Tlc9KFGj1HI/AAAAAAAAFUc/5I_IeithKZ8/s400/Latest-Nature.jpg"}) slider.model.append({image:"http://www.shropshiresgreatoutdoors.co.uk/wp-content/uploads/2015/08/Prices-Dingle-400x400.jpg"}) slider.model.append({image:"http://1.bp.blogspot.com/-6PYPT11obnA/Tlc9KFGj1HI/AAAAAAAAFUc/5I_IeithKZ8/s400/Latest-Nature.jpg"})
}
}