What is the difference between Row and RowLayout?

Question

This works as intended with Row, but not with RowLayout. Why? What is the difference between the two?

ApplicationWindow {    
    title: "Testing"
    width: 640
    height: 480

    //RowLayout {
    Row {        
        anchors.fill: parent

        Rectangle {
            id: rect1
            width: parent.width * 0.3
            height: parent.height
            color: "blue"
        }
        Rectangle {
            height: parent.height
            width: parent.width * 0.7
            color: "red"
        }
    }
}

You have more options using `RowLayout` like alignment. But it is preferred to use `Row` because performance. — S.M.Mousavi, Sep 27 '15 at 14:10
Possible duplicate of [QML Row vs. RowLayout](https://stackoverflow.com/questions/16914785/qml-row-vs-rowlayout) — CAMOBAP, Nov 25 '17 at 07:15

score 33 · Accepted Answer · answered Apr 07 '15 at 04:37

33

Row is a Item Positioner. Positioner items are container items that manage the positions of items in a declarative user interface.

RowLayout is part of Qt Quick Layouts. They manage both the positions and the sizes of items on a declarative user interface, and are well suited for resizable user interfaces.

Your code with RowLayout should look like this:

RowLayout{
    anchors.fill: parent
    spacing: 0
    Rectangle{
        Layout.fillHeight: true
        Layout.preferredWidth: parent.width * 0.3
        color: "blue"
    }
    Rectangle{
        Layout.fillHeight: true
        Layout.fillWidth: true
        color: "red"
    }
}

answered Apr 07 '15 at 04:37

Meefte

6,469
1
39
42

2

As an additional answer to Meefte's. Row is [Item Positioners](https://doc.qt.io/qt-5/qtquick-positioning-layouts.html), RowLayout is [Qt Quick Layouts](https://doc.qt.io/qt-5/qtquicklayouts-index.html). They behave in a similar way, but have two difference: - Item Positioners are also containers in their own right. - Qt Quick Layouts can resize their items. – lylhw13 Apr 11 '19 at 03:11
23

While it's the only answer, I don't feel this is a helpful answer. It just copies the documentation, which arguably does nothing to demystify the difference, so hence this questions. `Row` is an 'item positioner'. So what? `RowLayout` is part of QT Quick Layouts. Well, `Row` is also part of QTQuick. What are the ACTUAL and FUNDAMENTAL differences in concept and use?!?! – ortonomy Sep 07 '20 at 11:56

score 0 · Answer 2 · answered Feb 21 '23 at 07:18

I think

Row is a container which grows the size based on the children of Row, making them line up as a row, so the children of it shall have size.

RowLayout is the wrapper of its children, giving them the ability of row positioning and resizing based on the size of RowLayout, so RowLayout shall have its own size to help the children to position and resize.

What is the difference between Row and RowLayout?

2 Answers2

Linked