Qt 父元素的QML填充宽度

我有一个问题，可以在附加的屏幕截图上看到

有一个ApplicationWindow，它有标题和用于水平布局的ListView。列表中的每一项都应该是一页申请表。不幸的是，没有正确设置基页的宽度来填充其父页的宽度（白色背景，而不是灰色背景）

这是主页的代码，它应该加载登录页面-如图所示

ApplicationWindow {
id: root_window
title: Style.applicationName
visible: true
color: "white"
width: Style.windowWidth
height: Style.windowHeight    

ColumnLayout {
    id: root_layout
    spacing: 0
    width: root_window.width
    height: root_window.height

    SmonHeader {
        id: smon_user_app_header
        height: Style.headerHeight
        anchors.top: parent.top
        Layout.alignment: Qt.AlignLeft
        Layout.fillWidth: true
    }

    Component.onCompleted: {
        console.log("Main width: " + width);
    }

    ListView {
        id: navigation

        width: parent.width
        height: parent.height
        orientation: ListView.Horizontal
        interactive: true // disable manual pageChange

        snapMode: ListView.SnapOneItem // while moving to right, finish move
        highlightRangeMode: ListView.StrictlyEnforceRange // mouse gesture make currentIndex change
        highlightMoveDuration: 400 // speed up pages change (swap)

        model: ObjectModel {
            /* First page with login capabilities */
            Login {
                id: login_module
                width: root_layout.width
                height: root_layout.height
            }
        }
    }
}

/* Private function definition*/
function init_database()
{
    var database = Storage.LocalStorage.openDatabaseSync(Style.databaseName, Style.databaseVersion, Style.databaseDescr, Style.databaseSize);
    smonDatabase.startDatabase(Style.databaseName);
}

Component.onCompleted: {
    init_database();
}
}

这是登录页面的基础

import QtQuick 2.4
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Dialogs 1.2

import "../"
import "./common"

Rectangle {
id: login_page
// why parent.width is not set ?
anchors.fill: parent
//width: parent.width
//Layout.fillWidth: true

property string credentials_title: qsTr("Přístupové údaje")
property string available_devices: qsTr("Dostupné servery")
property string identity_title: qsTr("Identita")
property string password_title: qsTr("Heslo")
property string domain_title: qsTr("Doména")
property string infoLine_title: qsTr("Zapamatovat přihlašovací údaje")
property string username_title: qsTr("Jméno");

Component.onCompleted: {
    console.log("Login width: " + login_page.width);
    control.cancelEnabled = false
}

ColumnLayout{
    id: navigation
    spacing: Style.spacing
    anchors.left: parent.left
    anchors.leftMargin: Style.defaultAnchors
    Layout.fillWidth: true
    anchors.fill: parent
    width: parent.width

    Text {
        id: title
        //anchors.top: parent.top
        //anchors.left: parent.left
        font.pointSize: Style.fontSizeHeading

        text: credentials_title
    }

    ColumnLayout{
        id: navigationLogin
        spacing: Style.spacing
        anchors.left: parent.left
        anchors.leftMargin: Style.defaultAnchors
        Layout.fillWidth: true
        Layout.bottomMargin: Style.bottomMargin
        width: (parent.width - 4*Style.defaultAnchors)

        GridLayout {
            id: input_login
            rowSpacing: Style.denseSpacing
            columns: 2
            columnSpacing: Style.spacing
            anchors.left: parent.left
            anchors.leftMargin: Style.defaultAnchors
            width: 200

            Text {
                id: user_name
                font.pointSize: Style.fontSizeSubHeading

                text: username_title
            }

            SmonComboBox {
                id: user
                width: parent.width

                value: smonRole.user
                object: smonRole
                prop: "user"
                isEditable: true
                dataModel: smonRole.userData
                selectedIndex: smonRole.userNameSelected
            }

            Text {
                id: password_name
                font.pointSize: Style.fontSizeSubHeading

                text: password_title
            }

            SmonTextField {
                id: password
                width: parent.width
                type: "password"

                object: smonRole
                prop: "pass"
                value: smonRole.pass

                onEnterPressed: {
                    user.enabled = false
                    password.enabled = false
                    //control.okEnabled = false
                    control.okEnabled = false
                    control.cancelEnabled = true

                    smonRole.save();
                    smonCommunication.connect();
                }

                onValueChanged: {
                    if(password.value !== "")
                    {
                        control.okEnabled = true
                    }
                    else
                    {
                        control.okEnabled = false
                    }

                }
            }
        }

        ColumnLayout {
            id: scanning
            spacing: Style.denseSpacing
            anchors.left: parent.left
            //Layout.fillWidth: true



            RowLayout {
                id: slider_component

                Text {
                    id: scanningHeader
                    font.pointSize: Style.fontSizeSubHeading

                    text: qsTr("Perioda vyhledávání zařízení");
                }

                Text {
                    id: value
                    font.pointSize: Style.fontSizeInfo
                    anchors.left: scanningHeader.right
                    anchors.leftMargin: Style.defaultAnchors
                    width: 30

                    text: slider.value
                }
            }

            Slider {
                id: slider
                minimumValue: 2
                maximumValue: 30
                Layout.fillWidth: true
                stepSize: 1

                value: smonCommunication.scanPeriod

                onValueChanged: {
                    smonCommunication.scanPeriod = slider.value;
                }
            }
        }

        SmonControlPanel {
            id: control
            width: parent.width
            okEnabled: smonRole.user != "" && smonRole.pass != ""
            okVisible: true
            cancelVisible: true

            onSignalOk: {
                // hide content
                user.enabled = false
                password.enabled = false
                control.okEnabled = false
                control.cancelEnabled = true

                smonRole.save();
                smonCommunication.connect();
            }

            onSignalCancel: {
                // show content again
                password.enabled = true
                user.enabled = true
                //domain.enabled = true
                control.cancelEnabled = false
                control.okEnabled = true

                //smonConnection.logout();
                smonCommunication.disconnect();
                smonRole.disconnected();
            }
        }
    }

    Text {
        id: favourite
        font.pointSize: Style.fontSizeHeading

        text: available_devices
    }

    ListView{
        id: servers
        Layout.fillHeight: true
        width: parent.width

        model: smonCommunication.devicesList

        delegate: Rectangle {
            id: serverList
            height: 80
            width: parent.width

            ColumnLayout{
                Text {
                    id: serverName
                    text: modelData.bluetooth_name
                }

                Text {
                    id: rssi
                    text: modelData.bluetooth_rssi
                }
            }

            MouseArea {
                id: bt_device
                anchors.fill: parent

                onClicked: {
                    if(smonCommunication.btCanConnect === true)
                        smonCommunication.connect(index);
                }
            }
        }
    }
}

MessageDialog {
    id: errorDialog
    standardButtons: StandardButton.Cancel | StandardButton.OK
    visible: false;

    informativeText: smonCommunication.errorMessage

    onInformativeTextChanged: {
        errorDialog.visible = true;
    }
}

}

---

主页或加载的页面上是否存在问题？谢谢你的帮助……

所以，在德瑞弗和凯文·克拉默（谢谢）的回答之后，我做了一个简单的工作示例

我停止使用ColumnLayout，并尽可能地将所有内容设置为最佳

这是密码

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1
import QtQml.Models 2.1

ApplicationWindow {
id: root_window
title: "Hello world"
visible: true
color: "white"
width: 480
height: 520

Rectangle {
    id: smon_user_app_header
    height: 50
    color: "blue"
    width: parent.width
}

ListView {
    id: navigation

    orientation: ListView.Horizontal
    interactive: true // disable manual pageChange

    snapMode: ListView.SnapOneItem // while moving to right, finish move
    highlightRangeMode: ListView.StrictlyEnforceRange // mouse gesture make currentIndex change
    highlightMoveDuration: 400 // speed up pages change (swap)

    anchors.top: smon_user_app_header.bottom
    anchors.bottom: root_window.bottom

    width: parent.width
    height: 400

    model: ObjectModel {
        /* First page with login capabilities */
        Rectangle{
            id: one
            anchors.fill: parent
            color: "red"
        }
    }
}
}

下面是它的外观

---

您的问题在于

锚。fill:parent

位在

对象模型中

这里的
父视图
不是ListView，而是
ListView
，它恰好具有100px的隐式宽度

在您的最小示例中，类似这样的内容应该可以工作：

model: ObjectModel {
    /* First page with login capabilities */
    Rectangle{
        id: one
        //anchors.fill: parent <- parent is not navigation
        width: navigation.width
        height: 50
        color: "red"
    }
}

model:ObjectModel{
/*具有登录功能的第一页*/
长方形{
身份证号码：1
//anchors.fill:parent这是比你期望的更多的代码，如果有人愿意帮助你，你会愿意阅读。最好给出一个最小的例子来说明你的问题，这将增加获得帮助的机会。请记住，在使用布局时，是布局管理对象的大小，所以你不应该使用宽度/高度但是附加的布局属性。您的主页指定了一个包含两个子项的列布局，但其中一个子项的大小与完整布局的大小相同。因此，要么它太大，要么您需要的不是列布局