Simple anchor bindings in QML

[tomy]

Hi all,

mani.qml:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 600; height: 400
    color: "linen"

    TLineEditV1 {
        id: input1
       // anchors.top: parent
        anchors.centerIn: parent
        text: "text 1"
    }
}

TLineEditV1:

import QtQuick 2.12

Rectangle {
    width: 96; height: input.height + 8
    color: "lightsteelblue"
    border.color: "gray"

   property alias text: input.text

    TextInput {
        id: input
        width: 100; height: 20
        anchors.fill: parent
        anchors.margins: 4
        focus: true
    }
}

The issue is that anchors.centerIn: parent in main.qml works fine but anchors.top: parent gives this error:

Unable to assign QQuickRootItem to QQuickAnchorLine

Why, please, and how to solve it?

[Shrinidhi Upadhyaya]

Hi @tomy , you need to write it like this:-

anchors.top: parent.top

• First thing is anchors.centerIn is a convenience anchor.

• anchors.centerIn expects a QQuickItem which means that, it should have some height or width, so based upon the height or width it anchors it, while anchors.top expects a QQuickAnchorLine, so i guess what it does is irrespective of height or width it positions itself with respect to the parent.

Anchors(Examples):-

anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom

Convenience Anchors(Examples):-

anchors.fill: parent
anchors.centerIn: parent

I guess you can have a look into this post, i have explained a bit[https://forum.qt.io/topic/103522/anchor-loop-with-layout-centerin/3]

Look into the documentation of anchors once[https://doc.qt.io/qt-5/qtquick-positioning-anchors.html]

[tomy]

@Shrinidhi-Upadhyaya

anchors.top: parent.top

What a silly mistake I made! I must have been out of my mind.
Thanks

[Pradeep P N]

Hi @tomy
Also prefer grouping the properties in QML ( Just the best practice )

        anchors {
            top: parent.top;
            left: parent.left;
            right: parent.right;
            bottom: parent.bottom;
        }

All the best.