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?
I've missed tiny detail:
QML's PageIndicator's property, or better it's parent ColumnLayout attached property fillWidth must be set to false
.