Application freezes when using ColumnLayout in a view loaded by a loader

[ChriD]

Hi

I have a Problem with any type of Layout Control in a "subView"
If i load following qml into a Loader Object which is present in the main.qml
The app stucks and doesnt react any more. I dont know what i am doing wrong
If i remove the ColumnLayou from the view.qml it works.
If use the columnLayout in the main.qml it works without any Problem.

viewQml

import QtQuick 2.5
import QtQuick.Layouts 1.2
 
 
Rectangle {
    color: guiTheme.view.backgroundColor
    anchors.fill: parent
 
    ColumnLayout
    {
        anchors.fill: parent
        spacing : 0
 
 
        Text {
 
            anchors.top: parent.top
            anchors.topMargin: 20
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.right: parent.right
            anchors.rightMargin: 20
 
            horizontalAlignment: Text.AlignJustify
            wrapMode: Text.Wrap
 
            text: qsTr("Test")
 
            color: guiTheme.view.standardTextColor
            font.pixelSize: guiTheme.app.standardTextSize
            font.family: guiTheme.app.fontFamily
        }
 
 
    }
 
 
}

import QtQuick 2.5
import QtQuick.Layouts 1.2


Rectangle {
    color: guiTheme.view.backgroundColor
    anchors.fill: parent

    ColumnLayout
    {
        anchors.fill: parent
        spacing : 0


        Text {

            anchors.top: parent.top
            anchors.topMargin: 20
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.right: parent.right
            anchors.rightMargin: 20

            horizontalAlignment: Text.AlignJustify
            wrapMode: Text.Wrap

            text: qsTr("Test")

            color: guiTheme.view.standardTextColor
            font.pixelSize: guiTheme.app.standardTextSize
            font.family: guiTheme.app.fontFamily
        }

   
    }


}

To copy to clipboard, switch view to plain text mode 

Main.qml

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Window 2.0
 
ApplicationWindow {
 
    Loader {
        id: loaderViewContainer
        anchors.fill: parent
        focus: true
        source: viewControllerObject.currentQmlViewPath / contains above qml
    }
}

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Window 2.0

ApplicationWindow {

    Loader {
        id: loaderViewContainer
        anchors.fill: parent
        focus: true
        source: viewControllerObject.currentQmlViewPath / contains above qml
    }
}

To copy to clipboard, switch view to plain text mode 

The main qml is loaded with the QQmlApplicationEngine.load(...)

Any suggestions?
THANKS!

---

Added after 21 minutes:

Okay....
The Problem is this code

anchors.right: parent.right
 anchors.rightMargin: 20
 
wrapMode: Text.Wrap

anchors.right: parent.right
 anchors.rightMargin: 20

wrapMode: Text.Wrap

To copy to clipboard, switch view to plain text mode 

Wehn i am removing the wrapMode it works....?!?!
Of course this will lokk bad if i have Long text...

[anda_skoa]

Using anchors in a child of a column layout is almost certainly wrong, after all it is the main purpose of the layout to arrange its children.
This should actually have triggered a warning on the application's console output.

Cheers,
_

[ChriD]

Okay.. i found a Solution
I added a rectangle as a parent to the text and create the anchors there

Rectangle
        {
            anchors.top: parent.top
            anchors.topMargin: 20
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.right: parent.right
            anchors.rightMargin: 20
 
            Text {
 
                width: parent.width
 
                horizontalAlignment: Text.AlignJustify
                wrapMode: Text.Wrap
                text: qsTr("Bitte wählen sie hier das System mit dem sie die Applikation verbinden wollen")
 
                color: guiTheme.view.standardTextColor
                font.pixelSize: guiTheme.app.standardTextSize
                font.family: guiTheme.app.fontFamily
            }
        }

Rectangle
        {
            anchors.top: parent.top
            anchors.topMargin: 20
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.right: parent.right
            anchors.rightMargin: 20

            Text {

                width: parent.width

                horizontalAlignment: Text.AlignJustify
                wrapMode: Text.Wrap
                text: qsTr("Bitte wählen sie hier das System mit dem sie die Applikation verbinden wollen")

                color: guiTheme.view.standardTextColor
                font.pixelSize: guiTheme.app.standardTextSize
                font.family: guiTheme.app.fontFamily
            }
        }

To copy to clipboard, switch view to plain text mode 

---

Added after 4 minutes:

Addd.. didnt se your answer before my post @anda_skoa
So i shouldnt Event anchors rectangles in the column Layout and should use

Layout.alignment: Qt.AlignCenter
        Layout.preferredWidth: 40
        Layout.preferredHeight: 40

Layout.alignment: Qt.AlignCenter
        Layout.preferredWidth: 40
        Layout.preferredHeight: 40

To copy to clipboard, switch view to plain text mode 

?

[anda_skoa]

So i shouldnt Event anchors rectangles in the column Layout and should use

Layout.alignment: Qt.AlignCenter
        Layout.preferredWidth: 40
        Layout.preferredHeight: 40

Layout.alignment: Qt.AlignCenter
        Layout.preferredWidth: 40
        Layout.preferredHeight: 40

To copy to clipboard, switch view to plain text mode 

?

Yes. Using anchors inside a layout or positioner makes not sense at all.

In fact it will create conflicting positioning and sizing hooks.

Cheers,
_

[ChriD]

Okay i understand.
But im having big Troubles using the ColumnLayout with a Text with word wraps. If i do not define any height for the text (i dont know the height of course)
The documentation of the layouts is always with fixed height...

Maybe you can give me a short example how to use the ColumnLayout to have the 3 textControls with word wrap?
I dont get the Point with the dynamic height of the text controls.

---

Added after 10 minutes:

At least i can do it with Column Object and by Setting the height of the parent rectangle of the text by usinf testId.height
But i think this is no good solution

Column
    {
        spacing: 2
 
        anchors.fill: parent
        anchors.topMargin: 20
        anchors.leftMargin: 20
        anchors.rightMargin: 20
 
        Rectangle
        {
            height: textId.height
            width: parent.width
            color: "green"
 
            Text {
                id: textId
                width: parent.width
 
                horizontalAlignment: Text.AlignJustify
                wrapMode: Text.Wrap
                text: qsTr("Bitte wählen sie hier das System mit dem sie die Applikation verbinden wollen")
 
                color: guiTheme.view.standardTextColor
                font.pixelSize: guiTheme.app.standardTextSize
                font.family: guiTheme.app.fontFamily
            }
        }
 
 
        Rectangle
        {
            height: textId2.height
            width: parent.width
            color: "blue"
 
            Text {
 
                width: parent.width
                id: textId2
                horizontalAlignment: Text.AlignJustify
                wrapMode: Text.Wrap
                text: qsTr("lorem ipsum test 2 test 3 test 4 lorem ipsum holla die waldfee")
            }
        }
    }

Column
    {
        spacing: 2

        anchors.fill: parent
        anchors.topMargin: 20
        anchors.leftMargin: 20
        anchors.rightMargin: 20

        Rectangle
        {
            height: textId.height
            width: parent.width
            color: "green"

            Text {
                id: textId
                width: parent.width

                horizontalAlignment: Text.AlignJustify
                wrapMode: Text.Wrap
                text: qsTr("Bitte wählen sie hier das System mit dem sie die Applikation verbinden wollen")

                color: guiTheme.view.standardTextColor
                font.pixelSize: guiTheme.app.standardTextSize
                font.family: guiTheme.app.fontFamily
            }
        }


        Rectangle
        {
            height: textId2.height
            width: parent.width
            color: "blue"

            Text {

                width: parent.width
                id: textId2
                horizontalAlignment: Text.AlignJustify
                wrapMode: Text.Wrap
                text: qsTr("lorem ipsum test 2 test 3 test 4 lorem ipsum holla die waldfee")
            }
        }
    }

To copy to clipboard, switch view to plain text mode 

[anda_skoa]

I am not sure I understand, this looks fine.
You are using these rectangles to have some background color behind the text elements?

Cheers,
_

[ChriD]

In fact i don't need the rectangles. I'm only playing around how all gets together and how it behaves
If i remove the rectangles the 2 texts will be shown as i expected
If i keep the rectangles and i do not provide any height to them, the texts will overlapp on the same Position.

First i found that a Little bit confusing but now i think i get the point.
Of course the rectangle will not automatically set its height to its children. There are only a view objects like column, row, flow, grid,... that will do so.

Thank you for your help!

[velorums]

Use Item instead of Rectangle.