Como fazer um contêiner centralizado, empacotado e preenchido de elementos no QML?

Question

Estou tentando conseguir um elemento que seja centralizado na vertical e na horizontal na página, tenha margens preenchidas e os elementos dentro dele estejam igualmente espaçados e centralizados & amp; embrulhado (se necessário). Então, em essência, estou tentando conseguir algo assim:

Mas, infelizmente, quando a tela encolhe, o texto não preserva o preenchimento nem as estrelas.

Idealmente, eu gostaria de um preenchimento de uma unidade em torno de ambos os parágrafos de texto & amp; espaçamento de uma unidade entre os dois parágrafos e todos eles centrados / embrulhados.

Eu tentei calcular & amp; definindo propriedades width / height, mas eles não fizeram nada.

Aqui está o meu código:

    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

Seu item não tem largura e altura definidas, por isso, ele leva em conta a altura das crianças e as quebras de quebra automática.

Este código provavelmente faz o que você quer, mas talvez você precise ajustar algumas margens:

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

Se você quiser manter os dois itens de texto separados, você também pode usar uma coluna:

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
                    }

                }
            }
        }
    }
}