PageIndicator 布局不正确

Question

我有以下

QML

代码：

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

结果：

为什么PageIndicator布局不正确，即不是水平居中，我给了它

Layout

说明：

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

从代码中可以看出？

Answer 1

我错过了一些小细节：

QML 的 PageIndicator 的 属性，或者更好的是它的父级 ColumnLayout 附加属性 fillWidth 必须设置为

false

。