1

How do you determine the combined width of the components in a Row {}?

The width of the row itself will not work, as I need to set its spacing:, and using this property will create a loop error. It is also an active property, so setting it with

Component.onCompleted{} 

will also not suffice.

Any suggestions?

1 Answer 1

1

Why do you think it does not work?

The following snippet of code works correctly for me:

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    id: root
    width: units.gu(100)
    height: units.gu(100)

    Row {
        id: row
        spacing: 2
        Rectangle { color: "red"; width: 50; height: 50 }
        Rectangle { color: "green"; width: 20; height: 50 }
        Rectangle { color: "blue"; width: 50; height: 20 }
    }

    Component.onCompleted: {
        console.log(row.width)
    }
}

I see 124 displayed on the console (50+2+20+2+50). So the Row width gives you not only the width of each combined elements but also takes into account the spacing between them.

If you need the width of the combined elements without the spacing, you can use the following method:

console.log(row.width - (row.children.length - 1)*row.spacing)

Update:

To only get the width of the components within the row you need to iterate over all the children:

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    id: root
    width: units.gu(100)
    height: units.gu(100)

    Row {
        id: row
        spacing: 2
        Rectangle { color: "red"; width: 50; height: 50 }
        Rectangle { color: "green"; width: 20; height: 50 }
        Rectangle { color: "blue"; width: 50; height: 20 }

        property var children_width

        Component.onCompleted: {
            children_width = Qt.binding(function() { var i, w=0; for (i in children) {w += children[i].width}; return w });
        }

    }

    Component.onCompleted: {
        console.log(row.children_width)
    }
}

The new children_width property value is 120.

3
  • Issue is; I am trying to set the spacing based on the width of the row, or rather, the width of the components within the row.
    – Anon
    Oct 3, 2014 at 19:16
  • @Akiva: I've updated my answer, you should not have any binding loop error with that code. Oct 6, 2014 at 7:51
  • Wow very clever. Ah; nice to see you finally have some gold badges there :P Keep up the good work!
    – Anon
    Oct 6, 2014 at 9:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .