Como você determina a largura combinada dos componentes em uma Fileira {}?

Question

Como você determina a combinação width dos componentes em Row {} ?

O width da linha em si não funcionará, já que preciso definir seu spacing: e usar essa propriedade criará um erro de loop. Também é uma propriedade ativa, portanto, configurando-a com

Component.onCompleted{} 

também não será suficiente.

Alguma sugestão?

    

Answer 1

Por que você acha que isso não funciona?

O seguinte trecho de código funciona corretamente para mim:

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)
    }
}

Eu vejo 124 exibido no console (50 + 2 + 20 + 2 + 50). Portanto, a largura da linha fornece não apenas a largura de cada elemento combinado, mas também leva em consideração o espaçamento entre eles.

Se você precisar da largura dos elementos combinados sem o espaçamento, use o seguinte método:

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

Atualizar :

Para obter apenas a largura dos componentes na linha, é necessário iterar todos os filhos:

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)
    }
}

O novo valor da propriedade children_width é 120 .