Comment créer un conteneur d'éléments centré, enveloppé et capitonné dans QML?

Question

J'essaie d'obtenir un élément centré verticalement et horizontalement sur la page, doté de marges matelassées et d'éléments à l'intérieur de celui-ci équidistants, centrés et enveloppés (si nécessaire). Donc, en substance, j'essaie de réaliser quelque chose comme ceci:

Mais malheureusement, lorsque l’écran est réduit, le texte ne conserve ni le rembourrage ni les étoiles à lier.

Idéalement, je souhaiterais une unité de remplissage autour des deux paragraphes de texte et une unité d'espacement entre les deux paragraphes, tous centrés/enveloppés.

J'ai essayé de calculer et de définir les propriétés largeur/hauteur, mais ils ne faisaient rien.

Voici mon code:

    Tab {
        objectName: "Tab2"

        title: i18n.tr("Title")
        page: Page {
            anchors.fill: parent
            Item {
                anchors.centerIn: parent
                Text {
                    id: text1
                    text: "orem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in mollis purus"
                    wrapMode: Text.Wrap
                    width: parent.width
                    horizontalAlignment: Text.AlignHCenter
                }
                Text {
                    text: "Etiam sagittis fringilla quam, eget accumsan libero pulvinar ac."
                    wrapMode: Text.Wrap
                    width: parent.width
                    anchors {
                        top: text1.bottom
                        topMargin: units.gu(2)
                    }
                    horizontalAlignment: Text.AlignHCenter
                }
            }
        }
    }

Answer 1

Votre article n'a pas de largeur ni de hauteur définies, il prend donc la hauteur des enfants et des pauses d'emballage.

Ce code fait probablement ce que vous voulez, mais vous devez peut-être ajuster quelques marges:

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    width: 800
    height: 600
    Tabs {
        Tab {
            objectName: "Tab2"

            title: i18n.tr("Title")
            page: Page {
                Item {
                    anchors.fill: parent
                    Text {
                        anchors {
                            left: parent.left
                            right: parent.right
                            verticalCenter: parent.verticalCenter
                        }
                        id: text1
                        text: "orem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in mollis purus\n\n" +
                              "Etiam sagittis fringilla quam, eget accumsan libero pulvinar ac."
                        wrapMode: Text.Wrap
                        horizontalAlignment:Text.AlignHCenter
                    }
                }
            }
        }
    }
}

Si vous souhaitez que les deux éléments de texte soient séparés, vous pouvez également utiliser une colonne:

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    width: 800
    height: 600
    Tabs {
        Tab {
            objectName: "Tab2"

            title: i18n.tr("Title")
            page: Page {
                Column {
                    spacing: units.gu(2)
                    anchors {
                        left: parent.left
                        right: parent.right
                        verticalCenter: parent.verticalCenter
                    }
                    Text {
                        anchors {
                            left: parent.left
                            right: parent.right
                        }
                        id: text1
                        text: "orem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in mollis purus"
                        wrapMode: Text.Wrap
                        horizontalAlignment:Text.AlignHCenter
                    }

                    Text {
                        anchors {
                            left: parent.left
                            right: parent.right
                        }
                        id: text2
                        text: "Etiam sagittis fringilla quam, eget accumsan libero pulvinar ac."
                        wrapMode: Text.Wrap
                        horizontalAlignment:Text.AlignHCenter
                    }

                }
            }
        }
    }
}