Working with .ui.qml files

Question

In Qt 5.4, the template when creating a new "QtQuick UI File" generates two files: MyScreen.qml and MyScreen.ui.qml.

The MyScreen.ui.qml file seems to be for UI only, since Qt Creator suggests you should only edit it in design mode. That implies that I should be creating UI objects (labels, buttons, etc...) there and somehow referring to them in the MyScreen.qml file where the logic would go. In principle this sounds great but, unfortunately Qt doesn't come with any examples of how to work with these 2 files.

Here are the contents of those files:

MyScreen.qml:

import QtQuick 2.4

MyScreen {
}

MyScreen.ui.qml (I added the Text label in design mode):

import QtQuick 2.4

Item {
    width: 400
    height: 400

    Text {
        id: text1
        x: 144
        y: 151
        width: 103
        height: 31
        text: qsTr("Text")
        font.pixelSize: 12
    }
}

I tried instantiating a MyScreen for use in a StackView (see below), but (unsurprisingly) I don't see the label.

main.qml :

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2

Window {
    visible: true
    StackView {
        id: stack
        anchors.fill: parent
        initialItem: myscreen
    }

    MyScreen {
        id: myscreen
        anchors.fill: parent
    }
}

Any pointers for a QML newbie?

Answer 1

When creating QtQuick UI File in QtCreator, you should name "Component name" and "Component form name" differently.

MyScreen.qml creates a MyScreen component, however in the implementation:

MyScreen { /* ... */}

MyScreen creates itself recursively.

In this case, MyScreen.ui.qml creates a MyScreen component in the project. At the same time, the code in MyScreen.qml, which auto-generated by QtCreator, uses the component MyScreen created by MyScreen.ui.qml. Unfortunately, MyScreen is also the name of MyScreen.qml and makes it creates itself recursively at runtime.

Use different names can solve the problem. For example, rename MyScreen.ui.qml to MyScreenForm.ui.qml.