QML消失的对象

Question

我对消失的项目有疑问。如果只有“loginBox” - 它看起来很好： 但是当我添加“savedAccountsBox”时，“loginBox”消失了，只有“savedAccountsBox”： 结构似乎也很好：

有什么问题？ 这是我的代码：

ApplicationWindow {
    id: applicationWindow1
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }


    GridLayout {
            anchors.fill: parent
            //anchors.margins: 20
            //rowSpacing: 20
            //columnSpacing: 20
            //flow:  width > height ? GridLayout.LeftToRight : GridLayout.TopToBottom

            TabView {
                Layout.fillWidth: true
                Layout.fillHeight: true
                Tab {
                    title: "Accounts"

                    GroupBox {
                        id: loginBox
                        x: parent.width * 0.05
                        y: parent.height * 0.05
                        width:  parent.width * 0.4
                        height: parent.height * 0.9
                        title: "Login"

                        TextArea {
                            id: textArea1
                            x: parent.width * 0.125
                            y: parent.height * 0.125
                            width:  parent.width * 0.15
                            height: parent.height * 0.07
                        }
                    }

                    GroupBox {
                        id: savedAccountsBox
                        x: parent.width * 0.6
                        y: parent.height * 0.05
                        width:  parent.width * 0.3
                        height: parent.height * 0.9
                        title: "Saved Accounts"

                        ListView {
                            id: listView1
                            x: parent.width * 0.1
                            y: 0
                            displayMarginBeginning: -50
                            //anchors.centerIn: parent
                            width:  parent.width * 0.5
                            height: parent.height * 0.7
                            spacing: 10
                            scale: 1.6
                            delegate: Item {
                                x: 5
                                width: 80
                                height: 40
                                Row {
                                    id: row1
                                    spacing: 10
                                    Rectangle {
                                        width: 40
                                        height: 40
                                        color: colorCode
                                    }

                                    Text {
                                        text: name
                                        font.bold: true
                                        anchors.verticalCenter: parent.verticalCenter
                                    }
                                }
                            }

                            model: ListModel {
                                ListElement {
                                    name: "Grey"
                                    colorCode: "grey"
                                }

                                ListElement {
                                    name: "Red"
                                    colorCode: "red"
                                }

                                ListElement {
                                    name: "Blue"
                                    colorCode: "blue"
                                }
                            }
                        }
                    }

                }




                Tab {
                    title: "Blue"
                }
                Tab {
                    title: "Green"
                }
            }
    }
}

Answer 1

如果在另一个对象的定义中声明了一个对象而没有将其声明为特定属性的值，则将其赋值为default property值。 Tab的默认属性为sourceComponent。在您的情况下，您将loginBox分配给默认属性，然后立即使用savedAccountsBox覆盖它。要修复它，您应该将两个GroupBox包装成一个Item。

Tab {
    title: "Accounts"
    Item {
       GroupBox {
           id: loginBox
       }
       GroupBox {
           id: savedAccountsBox
       }
    }
}

P.S。您应该更喜欢锚定和布局而不是绝对定位。

Answer 2

我建议删除绝对定位和尺寸标注，改为使用布局。 http://doc.qt.io/qt-5/qtquicklayouts-index.html

这是您的代码工作示例

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1

ApplicationWindow {
    id: applicationWindow1
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    menuBar: MenuBar {
        Menu {
            title: qsTr("File")
            MenuItem {
                text: qsTr("Exit")
                onTriggered: Qt.quit();
            }
        }
    }


    GridLayout {
        anchors.fill: parent

        TabView {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Tab {
                title: "Accounts"

                RowLayout {

                    GroupBox {
                        id: loginBox
                        title: "Login"

                        TextArea {
                            id: textArea1
                        }
                    }

                    GroupBox {
                        id: savedAccountsBox
                        title: "Saved Accounts"
                        Layout.fillHeight: true

                        ListView {
                            id: listView1
                            anchors.fill: parent
                            spacing: 10
                            delegate: Item {
                                width: row1.width
                                height: row1.height
                                Row {
                                    id: row1
                                    spacing: 10
                                    Rectangle {
                                        width: 40
                                        height: 40
                                        color: colorCode
                                    }

                                    Text {
                                        text: name
                                        font.bold: true
                                        anchors.verticalCenter: parent.verticalCenter
                                    }
                                }
                            }

                            model: ListModel {
                                ListElement {
                                    name: "Grey"
                                    colorCode: "grey"
                                }

                                ListElement {
                                    name: "Red"
                                    colorCode: "red"
                                }

                                ListElement {
                                    name: "Blue"
                                    colorCode: "blue"
                                }
                            }
                        }
                    }
                }

            }




            Tab {
                title: "Blue"
            }
            Tab {
                title: "Green"
            }
        }
    }
}