Home / ubuntu / Questions / 308088
Accepted
Dima
Asked: 2013-06-15 01:40:50 +0800 CST

How to make a centred, wrapped and padded container of elements in QML?

  • 772

I am trying to achieve an element which is vertically and horizontally centered on the page, has padded margins, and elements inside it are equally spaced and centered & wrapped (if needed). So in essence I'm trying to achive something like this:

Centred, wrapped and padded

But unfortunately, when the screen shrinks, the text doesn't preserve padding, nor stars to wrap.

Why you no wrap and missing padding

Ideally I'd want a one unit padding around both paragraphs of text & one unit spacing between the two paragraphs and all of them centred/wrapped.

I've tried calculating & setting width/height properties, but they didn't do anything.

Here is my 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
                }
            }
        }
    }
application-development

1 Answers

  1. Best Answer

    Your Item doesn't have width and height defined, so it takes the height of the children and the wrapping breaks.

    This code probably does what you want, but maybe you need to tweak some margins:

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

    If you want to keep the two Text items separate, you can also use a Column:

    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
                    }

                }
            }
        }
    }
}
    • 3