QML disappearing objects - qt

Question

I have issue with disappearing item. If there is just "loginBox" - it looks fine:
But when i'm adding "savedAccountsBox", "loginBox" disappears, there is just "savedAccountsBox":
Also the structur seems to be fine:
What is wrong?
This is my code:
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

If an object is declared within another object's definition without declaring it as a value for a particular property, it is assigned to default property value.
Tab's default property is sourceComponent. In your case, you assign loginBox to default property, and then immediately overwrite it with savedAccountsBox. To fix it, you should wrap your two GroupBox into one Item.
Tab {
title: "Accounts"
Item {
GroupBox {
id: loginBox
}
GroupBox {
id: savedAccountsBox
}
}
}
P.S. You should prefer anchoring and layouts rather than absolute positioning.

Answer 2

I recommend removing the absolute positioning and dimensioning and using Layouts instead. http://doc.qt.io/qt-5/qtquicklayouts-index.html
Here an example of your code working
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"
}
}
}
}