How to centre text?

Pyroxar

Hi
I would centre text. I used 'elide' property:

elide: Text.ElideMiddle

but it not work.
My code:

import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3

Item {
    width: Screen.width
    height: Screen.height
    ColumnLayout {
        width: parent.width
        height: parent.height
        spacing: 0
        anchors.right: parent.right
        anchors.left: parent.left
        anchors.top: parent.top

        ColumnLayout{
            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
            Layout.fillWidth: true;
            spacing: 0
            Text {
                Layout.topMargin: 70
                Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                text: "Lorem ipsum"
                font.pixelSize: 28
                color: "#212121"
                font.bold: true
            }
            Text { ////THIS TEXT
                Layout.topMargin: 50
                Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                Layout.preferredWidth: Screen.width*0.875
                //Layout.fillWidth: true
                text: "Maecenas orci odio, volutpat at purus ut, imperdiet eleifend est. Maecenas eleifend nunc et erat sollicitudin venenatis. Duis fringilla est dolor, sit amet aliquam ipsum posuere sed. Suspendisse interdum arcu non turpis ornare, euismod tempor leo aliquam. Vestibulum hendrerit justo quis enim lobortis euismod."
                wrapMode: Text.WordWrap
                font.pixelSize: 16
                color: "#424242"
                elide: Text.ElideMiddle
            }
        }
        ColumnLayout{
            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
            Layout.fillWidth: true;
            spacing: 30
            Button {
                Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                Layout.preferredWidth: 0.625*Screen.width
                text: "Stwórz profil"
                contentItem: Text {
                    text: parent.text
                    color: "white"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    elide: Text.ElideRight
                }

                background: Rectangle {
                    implicitHeight: 30
                    color: "#2196F3"
                    radius: 3

                }
                onClicked: {
                    pageLoader.setSource("qrc:/question.qml", {"parentLoader": pageLoader});//////
                }
            }
            Button {
                Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                Layout.preferredWidth: 0.625*Screen.width
                text: "Nie teraz"
                contentItem: Text {
                    text: parent.text
                    color: "#212121"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    elide: Text.ElideRight
                }

                background: Rectangle {
                    implicitHeight: 30
                    color: "transparent"
                    radius: 6

                }
                onClicked: {
                    pageLoader.setSource("qrc:/question.qml", {"parentLoader": pageLoader});///////
                }
            }
        }
    }
}

c64zottel

@Pyroxar Hi,

are you sure you want to use Screen?

That said, the following works:

Text { ////THIS TEXT
                Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                Layout.preferredWidth: Screen.width*0.3
                maximumLineCount: 1
                height: 20
                //Layout.fillWidth: true
                text: "Maecenas orci odio, volutpat at purus ut, imperdiet eleifend est. Maecenas eleifend nunc et erat sollicitudin venenatis. Duis fringilla est dolor, sit amet aliquam ipsum posuere sed. Suspendisse interdum arcu non turpis ornare, euismod tempor leo aliquam. Vestibulum hendrerit justo quis enim lobortis euismod."
                wrapMode: Text.WordWrap
                font.pixelSize: 16
                color: "#424242"
                elide: Text.ElideMiddle
            }

But make sure you fullscreen the window, otherwise you may not see the effect.

I design my components always in regard to the base component (the first one). That way, you can use the component in whatsoever environment.

Anyway, good luck.

Pyroxar

In this moment I have something like this:
http://imgur.com/a/XERBz

So I should not use Screen.width property?

c64zottel

@Pyroxar I have never used Qml on the phone. In principal, I would anchor the Item from outside with anchor.fill:parent
Then give the Item an id: base and always refer to that id.

So instead of:

Item {
    width: Screen.width
    height: Screen.height
...

I would use

Item {
id: base

And in the parent you use anchors.fill: parent, when you use your Item.

But as I said, I never used stuff on the phone
Try to remove
height: 20, since you have maximumLineCount.

Pyroxar

i understand but width of the text element in not important.
I would center the text. I used elide property because i read in the documentationon about this.
http://doc.qt.io/qt-5/qml-qtquick-text.html#elide-prop
"The text will only elide if an explicit width has been set." If i set width property for example on 600 (not Screen.width or smoething else) it still not working.

Elide not working i i don't know why

c64zottel

@Pyroxar If I take your code, and substitute the part I pasted earlier, I get the results you are looking for:
http://picpaste.com/pic-6iHEAQcU.png

But I have a big screen, thats why the picture is that big. If I remove further the line:

wrapMode: Text.WordWrap

(which makes no sense for ElideMiddle), get at exactly what you want:
Maecenas [..] Maec...or leo [..] euismod.

Try to replicate my results on your Desktop and see then if there is a different on the phone.

Eeli K

Edit: your problem may have been answered while I was keeping the text edit window open before I submitted.

@Pyroxar wrapMode and elide don't work together, naturally. But from your question it isn't clear what you want to achieve. Elide isn't for centering. What do you mean by "would centre text"?

You've got also some layout coding problems:

ColumnLayout {
        width: parent.width
        height: parent.height
        spacing: 0
        anchors.right: parent.right
        anchors.left: parent.left
        anchors.top: parent.top

You use both anchors and size, it would be better to just use anchors.fill.

Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
Layout.fillWidth: true;

Here AlignHCenter doesn't have effect because of fillWidth.
There may be more.

Pyroxar

I would like to achieve this effect.
http://imgur.com/a/RDrbj

c64zottel

@Pyroxar This is achieved by horizontalAlignment. Although, you got the WordWrap part right.

The following works:

Text { ////THIS TEXT
                anchors.top: parent.top
                anchors.left: parent.left
                Layout.preferredWidth: 400
                //Layout.fillWidth: true
                text: "Maecenas orci odio, volutpat at purus ut, imperdiet eleifend est. Maecenas eleifend nunc et erat sollicitudin venenatis. Duis fringilla est dolor, sit amet aliquam ipsum posuere sed. Suspendisse interdum arcu non turpis ornare, euismod tempor leo aliquam. Vestibulum hendrerit justo quis enim lobortis euismod.  Maecenas orci odio, volutpat at purus ut, imperdiet eleifend est. Maecenas eleifend nunc et erat sollicitudin venenatis. Duis fringilla est dolor, sit amet aliquam ipsum posuere sed. Suspendisse interdum arcu non turpis ornare, euismod tempor leo aliquam. Vestibulum hendrerit justo quis enim lobortis euismod."
                font.pixelSize: 16
                color: "#424242"
                horizontalAlignment: Text.AlignHCenter
                wrapMode: Text.WordWrap
            }

I added more text, just because my monitor is so wide. That's how it looks in action:
http://picpaste.com/pic-OjAMxQhQ.png

Eeli K

@Pyroxar Here is a simplified self-contained example main.qml:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true
    width: 240
    height: 240

    Item {
        anchors.fill: parent
        ColumnLayout {
            anchors.fill: parent
            ColumnLayout{
                Layout.fillWidth: true
                id: clo
                Text {
                    text: "Lorem ipsum"
                    horizontalAlignment: Text.AlignHCenter
                    Layout.fillWidth: true
                }
                Text { ////THIS TEXT
                    Layout.preferredWidth: clo.width*0.875
                    Layout.alignment: Qt.AlignHCenter
                    horizontalAlignment: Text.AlignHCenter
                    text: "Maecenas orci odio, volutpat at purus ut, imperdiet eleifend est. Maecenas eleifend nunc et erat sollicitudin venenatis. Duis fringilla est dolor, sit amet aliquam ipsum posuere sed. Suspendisse interdum arcu non turpis ornare, euismod tempor leo aliquam. Vestibulum hendrerit justo quis enim lobortis euismod."
                    wrapMode: Text.WordWrap
                }
            }
        }
    }
}

It's not always easy to find a working layout/positioning, actually it's sometimes the most time consuming task in coding a UI. This was made with help of the graphical Design mode of the Qt Creator by trial and error plus some prior understanding achieved from experience.