Creating QML Controls From Scratch: PageDots

By Chris Cortopassi


Continuing our QML Controls from Scratch series, this time we implement PageDots. They are often used in conjunction with ListView.SnapOneItem to indicate what "page" is currently shown.

The public properties are page and pages to indicate the current page and total number of pages respectively. The dots are implemented with a Rectangle (configured as a circle) inside a Repeater.


import QtQuick 2.0

Item {
    id: root

// public
    property int page:  0 // current
    property int pages: 3 // total
// private
    width: 500;  height: 100 // default size
    Row {
        spacing: (root.width - pages * root.height) / (pages - 1)
        Repeater {
            model: pages
            delegate: Rectangle { // circle
                width:  root.height;  height: width
                radius: 0.5 * width
                color:  index == page? 'black': 'white'
                border.width: 0.05 * root.height



import QtQuick 2.0

ListView { // PageDots
    id: listView
    width: 250;  height: 100
    snapMode: ListView.SnapOneItem
    orientation: Qt.Horizontal
    model: 3
    delegate: Item {
        width: listView.width;  height: listView.height
        Text {
            text: index
            font.pixelSize: 0.9 * listView.height
            anchors.centerIn: parent
    onMovementEnded: listView.currentIndex = listView.indexAt(contentX, 0)
    PageDots {
        width: 0.25 * parent.width;  height: 0.1 * parent.height
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        page:  listView.currentIndex
        pages: listView.count



You should now be familiar with how to create PageDots. Next time we'll cover Tabs. The source code can be downloaded here.

Have a question or want to add to the conversation?

You must be logged in to continue.

Log in Register