PageIndicator is not laid out correctly

Question

I have following QML code:

import QtQuick 2.9
import QtQuick.Window 2.3
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.2
import QtQuick.Extras 1.4

Window
{
    id: uePOSClientSettingsScreen

    color: "white"
    title: qsTr("Settings")
    modality: Qt.WindowModal
    flags: Qt.Dialog

    width: 800
    height: 400

    visible: true

    ColumnLayout
    {
        spacing: 4
        anchors.fill: parent

        SwipeView
        {
            id: uePOSClientSettingsSwipeView

            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignHCenter|Qt.AlignTop

            currentIndex: uePOSClientSettingsScreenPageIndicator.currentIndex

            Page
            {
                title: qsTr("General Settings")

                ColumnLayout
                {
                    anchors.fill: parent

                    Rectangle
                    {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter

                        color:"red"
                    }   // Rectangle
                }   // ColumnLayout
            }   // Page

            Page
            {
                title: qsTr("Internet Connection Settings")

                ColumnLayout
                {
                    anchors.fill: parent

                    Rectangle
                    {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter

                        color:"green"
                    }   // Rectangle
                }   // ColumnLayout
            }   // Page

            Page
            {
                title: qsTr("Database server Settings")

                ColumnLayout
                {
                    anchors.fill: parent

                    Rectangle
                    {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter

                        color:"blue"
                    }   // Rectangle
                }   // ColumnLayout
            }   // Page

            Page
            {
                title: qsTr("FARS server Settings")
            }   // Page

            Page
            {
                title: qsTr("Printer Settings")
            }   // Page
        }   // SwipeView

        PageIndicator
        {
            id: uePOSClientSettingsScreenPageIndicator

            Layout.fillWidth: true
            Layout.fillHeight: false
            Layout.alignment: Qt.AlignHCenter|Qt.AlignBottom

            interactive: true

            count: uePOSClientSettingsSwipeView.count

            currentIndex: uePOSClientSettingsSwipeView.currentIndex
        }   // PageIndicator
    }   // ColumnLayout
}   // Window

Result:

Why is the PageIndicator not laid out correctly, i.e., is not horizontally centered, I gave it Layout instructions:

Layout.fillWidth: true
Layout.fillHeight: false
Layout.alignment: Qt.AlignHCenter|Qt.AlignBottom

as you can see from the code?

Answer 1

I've missed tiny detail:

QML's PageIndicator's property, or better it's parent ColumnLayout attached property fillWidth must be set to false.