Question

我遇到了一个问题，可以在附带的屏幕截图中看到

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

}

主页面或加载的页面上是否有问题？谢谢你的帮助...

Answer 1

问题在于anchors.fill: parent中的ObjectModel位。

此处parent不是ListView，而是ListView＆＃39; s contentItem，其隐式宽度为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"
    }
}

一般来说，您不应在代理中使用parent属性。

Answer 2

所以，在得到ddriver和Kevin Krammer（谢谢）的答案之后，我做了一个最小的工作示例。

我停止使用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"
        }
    }
}
}

以下是它的外观

QML填充父元素的宽度

2 个答案: