How to centre text?



  • 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});///////
                    }
                }
            }
        }
    }
    


  • @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.



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

    So I should not use Screen.width property?



  • @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.



  • 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



  • @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.



  • 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.



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



  • @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



  • @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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.