Partager équitablement l'espace horizontal dans un QML Ligne

J'ai besoin de partager équitablement l'espace horizontal entre tous les "boutons" dans ma Ligne.
J'ai utiliser ce code avec un Répéteur.

Component {
    id: buttonComponent
    Rectangle {
        height: buttonRow.height
        width: buttonRow.width / buttonsRepeater.count
        color:  "#FFDDDD"
        Text {
            anchors.centerIn: parent
            text: model.text
        }
    }
}

Rectangle {
    color: "#DDDDDD"
    id: buttonBar
    height: 30
    anchors {
        bottom: parent.bottom
        left: parent.left
        right: parent.right
    }

    Row {
        id: buttonRow
        anchors.fill: parent
        Repeater {
            id: buttonsRepeater
            model: buttonsModel
            delegate: buttonComponent
        }
    }
}

Maintenant, je voudrais calculer la largeur idéale de la Ligne de telle sorte que tous mes bouton de textes s'affichent correctement.
Comment puis-je obtenir cette largeur idéale?

OriginalL'auteur Guid | 2013-05-16

  1. 2

    La largeur minimale d'un bouton lui-même est le implicitWidth propriété de son élément de Texte.

    Une solution à votre problème est peut-être ajouter du code dans le Composant.onCompleted gestionnaire, c'est à dire le code qui est exécuté après le répéteur a créé ses éléments, et ensuite la somme de ces implicitWidth propriétés de chacun de répétition de l'élément (que vous pouvez obtenir par le biais de sa itemAt(index) de la fonction).

    Ces types de mise en page dynamique est un peu lourd en QML encore, qui va faire beaucoup mieux dans Qt 5.1 avec l'introduction de Qt Quick Mises En Page

    OriginalL'auteur Thomas McGuire

  2. 3

    Si vous ne voulez pas utiliser de QtQuick.Les mises en page comme ils ne sont pas vraiment prêt encore, vous pouvez utiliser ceci :

    Rectangle {
    id: buttonBar;
    color: "#DDDDDD";
    height: 30;
    width: (buttonColumn.width + 20 + buttonRow.spacing) * buttonsRepeater.count;
    anchors {
        bottom: parent.bottom;
        left: parent.left;
    }

    Column {
        id: buttonColumn;
        visible: false;

        Repeater {
            model: buttonsModel;
            delegate: Text {
                text: model.text;
            }
        }
    }
    Row {
        id: buttonRow;
        anchors.fill: parent;

        property real itemWidth : ((width + spacing) / buttonsRepeater.count) - spacing;

        Repeater {
            id: buttonsRepeater;
            model: buttonsModel;
            delegate: Component {
                id: buttonDelegate;

                Rectangle {
                    height: parent.height;
                    width: parent.itemWidth;
                    color: "#FFDDDD";
                    border.width: 1;

                    Text {
                        anchors.centerIn: parent;
                        text: model.text;
                    }
                }
            }
        }
    }
}

    J'ai simplement utilisé une Colonne masquée pour calculer facilement largeur maximale des éléments de Texte, et ajouté un peu de rembourrage dans la largeur de la barre pour éviter unspaced texte.

    OriginalL'auteur TheBootroo