I have a problem with a Rectangle that should contain Text. Text should be in the Rectangle defined but it goes beyond it.
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle
{
id:listRest
width: parent.width/2.7
height: parent.height/2.5
color: "dimgray"
anchors.left: parent.left
anchors.topMargin: Math.round(parent.height)/12
anchors.margins: Math.round(parent.width)/50
Text {
anchors.fill: parent
anchors.centerIn: parent
text: qsTr("QML (Qt Modeling Language) is a user interface markup language. It is a declarative language for designing user interface–centric applications.")
}
}
}
How can I get Text to be only in Rectangle?
By default, the Text will display its content as it is. So, if the text doesn't contain enough new line and it's too long, the text will be display outside the rectangle.
Use wrapMode: Text.WordWrapto wrap the text in the bounds of the rectangle and
elide: Text.ElideRight to elide the text if it's too long to fit in the rectangle.
Using a wrapMode (a max width)
Or maybe a simple solution that is not elegant, but work. Use "\n" for a new line when is it possible without other over-complicated methods if is just only for a simple small text line.
Related
In QML my ComboxBox has items with large words which cannot be fully displayed in the textfield.
When opening the drop-down the items are getting cut at the right end. For that I use elide: Text.ElideRight. This works fine.
But when I select an item and it is getting displayed on the ComboBox, the Text is "scrolled" to the right and I cannot see the beginning. But I have to see the beginning of the display-text and not the end.
I tried several things with my contentItem-delegate, but thats just for the Items in the DropDown-List and not for the ComboBox-own TextField when the Popup ist closed.
The selected Item has the cursor at the right and the text is scrolled to the right. I want it to be scrolled to the left and maybe cut it at the right end.
Maybe using the proper contentItem? This is working for me.
import QtQuick 2.5
import QtQuick.Controls 2.2
import QtQuick.Window 2.2
Window {
visible: true
width: 300
height: 300
ComboBox {
width: 300
contentItem: Text {
text: parent.displayText
font.family: "Arial";
font.pixelSize: 39;
verticalAlignment: Text.AlignVCenter;
horizontalAlignment: Text.AlignLeft;
elide: Text.ElideRight
}
model: ListModel {
id: model
ListElement { text: "This is an example 0123456789 0123456789" }
ListElement { text: "Another example with long text" }
ListElement { text: "Last example" }
}
}
}
I am posting because I want a text the be wrap into a rectangle (if the text is too long, it will be cut and the end of it won't be display)
For now I tried with :
Rectangle {
id: form
property alias px: form.x
property alias py: form.y
property alias pheight: form.height
property alias pwidth: form.width
property ItemControl itemControl
color: itemControl.backgroundColor
border.width: 1
border.color: itemControl.color
radius: 1
Text {
id: text_field
height: parent.height
width: parent.width
anchors.centerIn: parent
text:itemControl.text
color: itemControl.color
font.pixelSize: 16
font.family: robotoMono.name
font.bold: false
wrapMode: text_field.WordWrap
maximumLineCount: 1
}
}
But I don't have the expected result. The text is still continuing after the end of the rectangle. Does anyone knows how to compel the text into the rectangle ?
You used Text.WordWrap but the text only contains one word (the . and underscores aren't treated as word separators). Text.Wrap and Text.WrapAnywhere may be more appropriate in this case. Moreover, maximumLineCount: 1 will limit Text to only show one line.
Consider making the font smaller, the rectangle larger, or redesign the UI for this bit.
I am using Qt 5.15 Quick 2 QML to create a row of custom buttons in a window. When I have a standalone custom button things appear to work fine, but when I put them in a RowLayout there appears to be severe clipping and artifacting issues.
A minimum reproducible example might look like:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
RowLayout
{
anchors.fill:parent
anchors.margins: 25
Button
{
text: "Click Me"
Layout.fillWidth: true
}
CustomButton
{
text: "That Boy Don't Glow Right"
}
Button
{
x: 100; y:100
text: "Click Me"
Layout.fillWidth: true
}
}
}
with the custom control
import QtQuick 2.0
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
Button {
id: control
text: "Click Me"
Glow {
anchors.fill: control
radius: 64
spread: 0
samples: 128
color: "red"
source: control
visible: true
}
}
with example output:
One potential fix is to add change the Glow to
Glow {
anchors.fill: control
width: parent.width
height:parent.height
x:control.x
y:control.y
parent: control.parent
...
But this doesn't seem right. First, it's not obvious to me where parent.width and control.x and control.parent are bound from and what happens in single and multiple nesting. If a CustomButton is placed inside another control with id control, would it rebind the property? And it appears if a RowLayout is placed inside a RowLayout, then it would require parent: control.parent.parent. In my actual code there is some non-trivial positioning to allow margins for a drop shadow, too, and the CustomButton is in another container so the actual code that works is: x:control.x + parent.pad/2 and parent:control.parent.parent.parent which is, frankly, ridiculous and assumes that non-standard fields in the parent are always available.
Is there a better way? Was hoping I could keep the button's ability to glow itself.
According to the docs:
"Note: It is not supported to let the effect include itself, for instance by setting source to the effect's parent."
So it's fortunate that you were able to get your example to work at all. One way to avoid using the parent as a source is to point the Glow object at the Button's background object:
Button {
id: control
Glow {
source: control.background
}
}
I'm learning to use Qt and QML. Right now, I'm trying to use a ListView, and I mostly got it to work, except for this one little visual bug.
When I run the code, at first it looks fine. But if I scroll a little bit, the top item disappears completely. It only appears again when scrolling back enough so that it is entirely within bounds. In the mean time, there's only a ugly blank spot in the list. That happens with every item when it goes over the top bound.
I want the items to be partially drawn. The library is clearly capable of doing this, since this problem doesn't happen in the lower bound, but I simply cannot figure out how to do it.
Here's a simplified version of my code:
import QtQuick 2.12
import QtQuick.Controls 2.12
ApplicationWindow {
id: window
width: 360
height: 520
visible: true
title: "Qml.Net"
ListView {
anchors.fill: parent
spacing: 100
model: ["#111111", "#222222", "#333333", "#444444", "#555555", "#666666"]
delegate: Item {
Rectangle {
width: 400
height: 100
color: modelData
Text {
anchors.centerIn: parent
text: modelData
}
}
}
}
}
And here are some pictures of the problem. First image is correct, second image shows the error. Also, notice how the bottom item is correctly drawn.
Correct at first
Wrong after a little bit of scrolling
Qt 5.12
The problem is caused by the "spacing" property that is unnecessary in your case. The solution is to remove that property and rewrite the logic as follows:
import QtQuick 2.12
import QtQuick.Controls 2.12
ApplicationWindow {
id: window
width: 360
height: 520
visible: true
title: "Qml.Net"
ListView {
anchors.fill: parent
model: ["#111111", "#222222", "#333333", "#444444", "#555555", "#666666"]
delegate: Rectangle {
width: parent.width
height: 100
color: modelData
Text {
anchors.centerIn: parent
text: modelData
}
}
}
}
I am trying to create a button like control in QML which displays an image and also some text under it. My current attempt stands as follows:
Item {
id: button
width: 30
height: 100
property alias text: buttontext
signal clicked
Image {
id: visualImage
anchors.fill: parent
source: "qrc:/images/test.png"
}
Text {
id: buttontext
font.bold: true
text: "Test"
}
}
This has a lot of problems unfortunately. So, at the moment, I am specifying the width and height of the item but this should be calculated based on the width and height of the image and the text. Also, the text is shown at the top and inside the image where I would like to position the text under the image, centered with image horizontally with some margins.
You must use anchors in the Image and in the Text. Example:
Item {
id: button
width: 30
height: 100
property alias text: buttontext
signal clicked
Image {
id: visualImage
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: buttontext.top
source: "qrc:/images/test.png"
}
Text {
id: buttontext
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
font.bold: true
text: "Test"
}
}
Since QtQuick.Controls 2.3 (Qt 5.10), display property was introduced:
This property determines how the icon and text are displayed within the button.
For your case it's AbstractButton.TextUnderIcon
Something I have done in the past as a workaround for this,
create a Rectangle{……} which holds all the 'Button' items, (Text/Image Ect),
It may not be the prettiest way but there is a few variations
Create the 'Image' and 'text' externally (photoshop whatever you choose) then fill your Rectangle with the content, then also set a MouseArea { onClicked {……}} event to that,
Make a Column/Grid/Row within the Rectangle and position your items using that method