QML 消失的对象答案

【问题标题】：QML disappearing objectsQML 消失的对象
【发布时间】：2015-01-28 17:18:31
【问题描述】：

我对消失的项目有疑问。如果只有“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"
                }
            }
    }
}

【问题讨论】：

我建议您使用编辑器而不是设计器。像“width: parent.width * 0.4”这样的东西在 QML 中不是很好的编码风格，所以手动编写正确的代码会好得多。

标签： qt qml

【解决方案1】：

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

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

附：您应该更喜欢锚定和布局而不是绝对定位。

【讨论】：

【解决方案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"
            }
        }
    }
}

【讨论】：