How to use layout for custom QML item?

ManhNT

Hi, I describe my problem here: https://pastebin.com/fiu5dn1J
Can anyone give me some suggestions?

mostefa

Hi @ManhNT

According to the Qt doc

http://doc.qt.io/qt-5/qml-qtquick-flow.html#details

The Flow item automatically positions the child *Text* items side by side

I think that, this why it worked for you with Text element

The doc also says:

If an item within a Flow is not visible, or if it has a width or height of 0, the item will not be laid out and it will not be visible within the Flow. Also, since a Flow automatically positions its children, a child item within a Flow should not set its x or y positions or anchor itself with any of the anchor properties.

I think that you need to specify width and height for your custom items,

Here is my tested sample (work after test)

TestItem.qml

Item {
    id: testItem
    property string text: value
    height: 100
    width: 100

    Text {
        text: testItem.text
        width: parent.width
        height: parent.height
    }
}

main.qml

Flow {
        spacing: 10

        TestItem
        {
            text: "one"
        }
        TestItem
        {
            text: "two"
        }
        TestItem
        {
            text: "three"
        }
    }

Hope this can help you,,

Best regards !

ManhNT

Hi @mostefa, setting width and height for the item solved the problem.
Thank you very much.