QML Row vs. RowLayout

Question

I'm trying to write a topbar for my application that should contain mainly the app logo (a small image) and the app title (just text). Moreover, I'd like this topbar to automatically resize according to the window's height.

I'm new to QML, but I suppose that I should wrap these components inside a Row or a RowLayout component. This is my sample code:

import QtQuick 2.0
import QtQuick.Layouts 1.0

Rectangle
{
    id: mainwindow
    width: 1024
    height: 600

    Row
    {
        id: rowlayout
        height: logoimage.height
        spacing: 5

        property int count: 3

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

        Image
        {   
            id: logoimage
            source: "qrc:/images/resources/images/icon.png"
            height: mainwindow.height / 20
            anchors.top: parent.top
            anchors.left: parent.left
        }   
        Text
        {   
            id: logotext
            text: qsTr("This is my logo text")
            font.pixelSize: parent.height
            font.family: "Sans Serif"
            height: parent.height
            verticalAlignment: Text.AlignVCenter
            anchors.top: parent.top
            anchors.left: logoimage.right
        }
        /*
        Rectangle
        {
            id: otherrect
            height: parent.height
            color: "lightgreen"
            anchors.top: parent.top
            anchors.left: logotext.right
            anchors.right: parent.right
        }
        */
    }
}

I tell to the Row component that its height should follow the logo's height, and to the Image (logo) component that its height should be 1/20th of the Rectangle (mainwindow) component.

Using a Row container, the code behaves as expected but I get an annoying warning (QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row. Row will not function.) and I have to do a lot of anchoring. Conversely, if I use a RowLayout container, I can remove most of the anchors but the Image completely ignores its height attribute (but the text still resizes correctly). So the questions are:

1. is this a bug of the RowLayout component? I'm using Qt-5.1.0-Beta with Android support, so this could be an explanation
2. how can I use a Row component without using anchors in its children and thus avoid the warning?
3. I'm missing something important or I'm almost on the right track but I have to bear with this beta of Qt until a stable version is released?

Answer 1

You need to give a width to your layout if you want it to strecht its children, either with width: parent.width, or better, with anchors { left: parent.left; right: parent.right } and no anchors on vertical lines inside childrens of the layout.

Answer 2

1) NO, it is no a bug of RowLayout 2) Consider that RowLayout is preferred to Row because is most expressive for components placing. The Row component is better that Rowlayout only for graphics or animation apps 3) The stable version is now available, but your errors are not bugs ;)

Answer 3

You said that you get the expected behavior with Row, so you should probably use it. The warning that Row is giving is asking you to remove the vertical anchors (top and bottom) from its child elements.

The Row element provides horizontal (left and right) anchor-like behavior for its child elements, but it doesn't mind if you use top and bottom anchors (notice that top and bottom were not in the warning).

In other words remove "anchors.left" and/or "anchors.right" lines from "logoimage", "logotext", and "otherrect" (if you plan on uncommenting it at some point), but not the "anchors.top" lines, and that should stop the warning and keep the correct behavior.

An alternative is to just remove the Row element and use Item or FocusScope (if you plan on having input elements in your "top bar" area), which will not try to take over anchoring operations, and that may be a better fit for you if you really like anchors.