PageDots

Creating QML Controls From Scratch: PageDots

By Chris Cortopassi

PageDots

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.

PageDots.qml

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

 

Test.qml

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

 

Summary

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