I have a ListView with ColumnLayout delegates containing images that could be of any size. I want each delegate to occupy the least possible width and height they can, only defining a certain maximum width, but I can't get images to size right instead of being centered in a box (shown by the gray rectangles here):
My code is this:
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
ApplicationWindow {
id: window
width: 640
height: 800
visible: true
color: "black"
ListView {
id: listView
anchors.fill: parent
model: 3
delegate: ColumnLayout {
width: listView.width
Label {
text:
"Lorem ipsum dolor sit amet, consectetuer adipiscing " +
"Aenean commodo ligula eget dolor. Aenean massa."
color: "white"
wrapMode: Text.Wrap
font.pixelSize: 22
Layout.maximumWidth: listView.width / 2
}
Image {
asynchronous: true
source: "https://picsum.photos/1024/256"
fillMode: Image.PreserveAspectFit
Layout.maximumWidth: listView.width / 2
Rectangle { anchors.fill: parent; color: "#222"; z: -1 }
}
}
}
}
I can get the right behavior when using Column instead of ColumnLayout and replacing the Layout.maximumWidth lines by width: Math.min(implicitWidth, listView.width / 2), as shown below, but I need to use layouts in my project:
The blank space before after image is because of fillMode: Image.PreserveAspectFit, it tries to keep the aspect ratio of image (i.e image width/ image height). You should use fillmode: Stretch to fill the space completely.
Related
I am not able to increase height of Rectangle (or RowLayout) wrapped around Text item that could dynamically change (chat message for example).
I tried bunch of approaches (Text.paintedHeight, childrenRect ...) but everything looks funky when text is wrapped.
My goal is display chat messages, stretch them according their wrapped text height.
Thanks for any input.
import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 900
height: 500
ColumnLayout {
width: parent.width
spacing: 2
RowLayout {
id: rowLayout
spacing: 3
Rectangle {
height: 50
width: 50
color: "red"
}
Rectangle {
id: rectangle
width: 50
color: "green"
Layout.fillHeight: true
Layout.fillWidth: true
Text {
id: element
text: "If the GridLayout is resized, all items in the layout will be rearranged. It is similar to the widget-based QGridLayout. All visible children of the GridLayout element will belong to the layout. If you want a layout with just one row or one column, you can use the RowLayout or ColumnLayout. These offer a bit more convenient API, and improve readability.\n\nBy default items will be arranged according to the flow property. The default value of the flow property is GridLayout.LeftToRight.\n\nIf the columns property is specified, it will be treated as a maximum limit of how many columns the layout can have, before the auto-positioning wraps back to the beginning of the next row. The columns property is only used when flow is GridLayout.LeftToRight."
anchors.rightMargin: 10
anchors.leftMargin: 10
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
wrapMode: Text.WordWrap
clip: false
font.pixelSize: 12
}
}
}
}
}
You have to specify the implicitHeight and implicitWidth for Rectangle (and Item for that matter).
Rectangle {
id: rectangle
width: 50
color: "green"
Layout.fillHeight: true
Layout.fillWidth: true
implicitWidth: element.implicitWidth
implicitHeight: element.implicitHeight
Text {
id: element
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
wrapMode: Text.WordWrap
clip: false
font.pixelSize: 12
}
}
Please note that your current setup with anchors.margins is slightly conflicting here, since that is not counted in the implicitHeight/Width, so I left them out.
Another option would be to set the background for a Label (from QtQuick.Controls) to your desired Rectangle, that will then be stretched properly:
Label {
leftPadding: 10
rightPadding: 10
...
background: Rectangle {
color: "green"
}
}
In my opinion this would give you easier control about the position of your text.
I am trying to use fontSizeMode in qml in order to fix big text in rectangle.
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle
{
color: "Red"
height:50
width:50
Text { text: "Hello"; fontSizeMode: Text.Fit; minimumPixelSize: 5; font.pixelSize: 50 }
}
}
My aim is to shrink text size if text is bigger than rectangle and a minimum pixel size is given as shown in program. But text is not shrinking. How can I solve this problem?
got the answer I should use width:parent.width height:parent.height to make it work
working code:
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle
{
color: "Red"
height:50
width:50
Text {
width:parent.width
height:parent.height
text: "Hello"; fontSizeMode: Text.Fit; minimumPixelSize: 5; font.pixelSize: 50 }
}
Trying different code combinations and partially solving my problem I came across a behavior that I can not quite explain. So to the point, When I create a simple TextArea without Scrollview it looks like this:
RowLayout {
id: rowLayout
Rectangle{
height: 50
width: 295
TextArea {
id: textArea
text: (" message...")
wrapMode: Text.WrapAnywhere
anchors.fill: parent
}
}
Text area creates a default background. And now I want to do TextArea with ScrollView ALSO with the default TextArea background but it comes out something like that :
RowLayout {
id: rowLayout
Rectangle{
height: 50
width: 295
ScrollView {
id: scrollView1
anchors.fill: parent
TextArea {
id: textArea
text: (" message...")
wrapMode: Text.WrapAnywhere
}
}
}
The only chance to set the default TextArea background is set implicitHeight,implicitWidth but then after entering the text into a TextArea until the scrollbar appears, the background extends over the entire length by going behind the other components like this :
RowLayout {
id: rowLayout
Rectangle{
//color: "#00000000"
height: 50
width: 295
ScrollView {
id: scrollView1
anchors.fill: parent
TextArea {
id: textArea
text: (" message...")
wrapMode: Text.WrapAnywhere
implicitHeight: 50
implicitWidth: 295
}
}
}
So the only thing I want is a scrollable textarea but with this black default background and NOT my background which I can do with rectangle.
Can anyone take a look?
Thank you :)
I tried do my best. Check the example below, hope it will help =)
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ApplicationWindow {
visible: true
width: 400
height: 400
RowLayout {
width: 295
height: 50
anchors.centerIn: parent
ScrollView {
Layout.fillHeight: true
Layout.fillWidth: true
background: Rectangle { color: "black" }
TextArea {
id: messageField
placeholderText: qsTr("message...")
color: "white"
wrapMode: TextArea.WrapAnywhere
}
}
}
}
Result:
I'm new of qml.
I'm starting to develop a little application with a custom item.
when I try to use in application anchor.top: first_item.bottom, to position the rectangles of the custom component, one below the other doesn't work.
content file main.qml:
import QtQuick 2.5
Item
{
id:main_screen
Rectangle
{
width: 300
height: 60
id: text_content
color: "DarkGray"
opacity: 0.9
border.color: "blue"
border.width: 3
radius: 5
z:6
Text {
id: titleText
width: parent.width
height: parent.height
font.pointSize: 20
font.family: "Arial"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: "Test - title"
color: "White"; style: Text.Raised;
}
}
//..................This rectangle is shown below main_screen... so is OK
Custom_item
{
id:first_item
anchors.top: main_screen.bottom
}
//..................This rectangle is not shown below first_item... but it shown on absolute top, in overlap of retangle title
Custom_item
{
id:second_item
anchors.top: first_item.bottom
}
//..................This rectangle is not shown below second_item... but it shown on absolute top, in overlap of retangle title
Custom_item
{
id:third_item
anchors.top: second_item.bottom
}
}
content file Custom_item.qml
import QtQuick 2.5
Item
{
id:testComponent
Rectangle
{
width: 300
height: 60
id: text_content
color: "DarkGray"
opacity: 0.9
border.color: "blue"
border.width: 3
radius: 5
z:6
}
}
what am I doing wrong ?
Thanks
The problem lies within the dimensions of the objects your are anchoring to.
Though the Rectangles have a width and a height, the enclosing Item has none, so it is basically 0 pixels in height and width, while the Rectangle protrudes it.
If you don't have any reason for enclosing the Rectangle within the Item, I'd reccomend you, to take the Rectangle itself as the toplevel element of the file.
Reasons for having the Item might be those:
Hiding the Rectangles properties
Having multiple children for the Item that are logically siblings to the Rectangle
... other reasons might exist ;-)
Nevertheless, you need to make sure, that the toplevel item has always the right dimensions. So you should set the width and height, better the implicitWidth and implicitHeight in component declarations.
Example 1: Without an Item
import QtQuick 2.5
Rectangle {
id: root
width: 300
height: 60
color: "DarkGray"
opacity: 0.9
border.color: "blue"
border.width: 3
radius: 5
z:6
}
Example 2: With Item
import QtQuick 2.5
Item {
id:testComponent
implicitHeight: 60 // < This
implicitWidth: 300 // < and that are important to have the dimensions
Rectangle {
id: text_content
anchors.fill: parent
color: "DarkGray"
opacity: 0.9
border.color: "blue"
border.width: 3
radius: 5
z:6
}
}
You are anchoring all the Rectangle's to the Item hence you are not getting the desired result. Simple change the id of the top Rectangle as follows
Item
{
id: root
Rectangle
{
id:main_screen
...
}
}
I have a centered rectangle with a drop shadow behind it and some text within it.
import QtQuick 2.5
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
Window {
visible: true
width: 800; height: 640
Rectangle{
id: centerRect
width: parent.width * 0.7; height: parent.height * 0.7
anchors{
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
radius: 7
border.color: "#C0C0C0"
Text{
text: "Hello World!"
font.pixelSize: 0.07 * parent.height
anchors{
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
}
}
DropShadow
{
anchors.fill: centerRect
horizontalOffset: 1; verticalOffset: 1
radius: 5
samples: 11
color: "#CDCDCD"
source: centerRect
}
}
When I resize the window the text becomes slightly blurred or out of focus. I thought it may have been an issue with how I'm scaling the font pixel size to the rectangle height but the problem is the same with static values. If I remove the drop shadow effect the text's visibility is fine when I resize the window.
How can I maintain good text visibility when using a drop shadow and resizing the window? I'm using Qt 5.5.1 on OpenSUSE Leap 42.1 (Plasma 5.5.5).
Solution 1: Use DropShadow only for the background rectangle and draw the text on top of that.
Solution 2: Use integral width and height for the centerRect. The graphical effect renders the centerRect first into a texture. If the source width or height are not integers, the texture size will not correspond to the original item size. When painting the texture, texture coordinates will not hit the pixel positions accurately and some interpolation is needed.
For me, the simplest is to move the Text out of centerRect, so it will not be its child obj, so not influced by the side effect of DropShadow.
eg:
move the text outside and modify its conditioning like below:
Text{
text: "Hello World!"
font.pixelSize: 0.07 * centerRect.height
anchors.centerIn: centerRect
}