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/XERBzSo 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.pngBut 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.