I have a simple QuickControls2 QML design where an image should stretch horizontally to fill the application window and maintain its aspect ratio. But when I run my program, the image doesn't scale/stretch.
Is the problem that the image is smaller than the current window size and QT doesn't upscale/increase the size of the image? Is there a setting to make QT resize the image to fill the width regardless of image size?
Can you let me know what is wrong and how I can fix it?
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ApplicationWindow {
id: applicationWindow
visible: true
width: 640
height: 480
title: qsTr("Scroll")
ColumnLayout {
id: mainLayout
anchors.fill: parent
Image {
id: imagePane
Layout.fillWidth: true
fillMode: Image.PreserveAspectFit
source: "placeholder.jpg"
}
}
}
Try this:
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ApplicationWindow {
id: applicationWindow
visible: true
width: 640
height: 480
title: qsTr("Scroll")
ColumnLayout {
id: mainLayout
anchors.fill: parent
Image {
id: imagePane
Layout.preferredWidth: parent.width
Layout.preferredHeight: parent.height
fillMode: Image.PreserveAspectFit
source: "placeholder.jpg"
}
}
}
Using Image.PreserveAspectFit, image is scaled uniformly to fit without cropping ,
Now since you are not filling Layout height, image can't scale beyond it's implicit height.
As your requirement is to make QT resize the image to fill the width regardless of image size means you accept to crop the image beyond the height limit, in which case you need to use:
fillMode: Image.PreserveAspectCrop
Related
I'm trying to make two group boxes appear next to each other so that each one occupies 50% of the window. However, it looks like the width of each GroupBox is somehow changed depending on the GroupBox title length.
If the GroupBox title is the same for both GroupBox's, it will be 50% of the window. If they are not the same, the GroupBox with the longer title will occupy more of the screen.
It doesn't make sense to me for this to happen, how can I fix it so the length of the title doesn't effect the size of the GroupBox in a layout?
Here's sample code to reproduce the issue...
AppGroupBox.qml
import QtQuick 2.0
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.12
GroupBox {
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
spacing:0
label.x: 0
}
AppRowLayout.qml
import QtQuick 2.0
import QtQuick.Layouts 1.12
RowLayout {
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
spacing: 0
}
main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
Window {
width: 640
height: 480
visible: true
AppRowLayout {
anchors.fill: parent
AppGroupBox {
title: "Short Name"
Layout.fillWidth: true
}
AppGroupBox {
title: "Much Longer Name"
Layout.fillWidth: true
}
}
}
Qt will distribute the free space relative to the Layout.preferredWidth (or implicitWidth if that isn't defined). So, a group box with a longer title will get more space by default, as its implicitWidth is larger.
The solution is to use a fixed preferredWidth for all elements in the RowLayout:
GroupBox {
...
Layout.preferredWidth: 50 // or any other fixed value.
Layout.minimumWidth: implicitWidth // OPTIONAL: may be usefull on small screens to ensure the box is not made smaller than the title width
...
}
Note on attached properties:
Layout.alignment is an attached property available on the children of a Layout (RowLayout, GridLayout or ColumnLayout). Setting it directly inside a RowLayout object is useless (except when the RowLayout itself is a child of another Layout item.
I'm fairly new to QML/Qt. Basically I would like to know how to apply a blur to the inside of the white rectangle seen on the photo below and only the inside so that it blurs the part of the background image within the rectangle. I tried doing this in a normal Qt project but don't think its possible without using QML.
It's possible. Use ShaderEffectSource item:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.12
import "qrc:/"
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Image {
id: bug
anchors.fill: parent
width: 32
height: 32
source: "qrc:/Original_bug.png"
ShaderEffectSource{
id: shader
sourceItem: bug
width: 128
height: 128
anchors{
right: parent.right
rightMargin: 32
verticalCenter: parent.verticalCenter
}
sourceRect: Qt.rect(x,y, width, height)
}
GaussianBlur {
anchors.fill: shader
source: shader
radius: 8
samples: 4
}
}
}
Using sourceRect property you can specify an area to be blurred.
There are some issues when resizing the source image. This example works good only for static one.
I've faced with a very strange behaviour for ApplicationWindow. Here is my code :
import QtQuick 2.12
import QtQuick.Controls 2.5
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("App test")
Rectangle {
width : parent.width/2
height : parent.height/2
anchors.centerIn: parent
color : "red"
}
}
I press maximize window button, then minimize and see the following picture:
Then again maximize and minimize and things seems to get worse :
What am I doing wrong?
I have a TextArea. If I set padding constantly padding working normally.
import QtQuick 2.9
import QtQuick.Controls 2.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
TextArea{
font.pixelSize: 20
anchors.fill: parent
wrapMode: TextArea.Wrap
leftPadding: 100 //*parent.width/640
rightPadding: 100 //*parent.width/640
}
}
If I uncomment lines above then I have strange behavior.
What am I doing wrong?
Screenshot
It seems to be a bug, probably some updates are missing, when setting up the width of the contentItem of the ApplicationWindow, so the line lengths are not calculated properly.
If you write:
leftPadding: {
console.log(parent, parent.width)
return 100 * parent.width/640
}
You can see, that the parent.width is initially set to 0 and then changes to 640. When this change happens, there must be something going wrong with the signals.
A resize of the window will update the line lengths, so the proper layout is restored. You might try to file a bugreport on http://bugreports.qt.io to have it fixed.
Other than that, you may give an ID to your ApplicationWindow and use this instead of parent
import QtQuick 2.7
import QtQuick.Controls 2.0
ApplicationWindow {
id: win
visible: true
width: 640
height: 480
title: qsTr("Hello World")
TextArea{
font.pixelSize: 20
anchors.fill: parent
wrapMode: TextArea.Wrap
leftPadding: 100 * win.width/640
rightPadding: 100 * win.width/640
}
}
I have the following QML code:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
Window {
id: win
width: 1024
height: 768
visible: true
ScrollView {
id:scrollView
anchors.fill: parent
Rectangle{
id:rect
z:5
color:"red"
width: 2048
height: win.height
border{
color: "black"
width: 2
}
}
}
}
In this code the larger Rectangle makes the horizontal scrollbar correctly appear. However, since the scrollbar takes some height from the window, the vertical scrollbar appears too.
How can I make the Rectangle fill only available space in my ScrollView so that vertical scrollbar won't show up? Using something like win.height - <someNumber> is not acceptable. Adding verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff is also not acceptable cause it hides some content on bottom of rect.
Generally speaking ScrollView is not meant for such usage. It is more a container to lay out items and have them shown through the provided scrollbar. Binding loops can pop here and there if bindings are not properly set. Also Flickable + a custom scrollbar (e.g. the ones available here) can perfectly fit your needs.
That said, viewport property provides the desired (cross-platform) workaround for the problem. The documentation states:
The viewport determines the current "window" on the contentItem. In other words, it clips it and the size of the viewport tells you how much of the content area is visible.
Hence the height of the child Item can be set according to the height of the viewport. A final simple example with an Image (cute kitty incoming) would look like this:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
Window {
id: win
width: 300
height: 300
visible: true
ScrollView {
id:scrollView
anchors.fill: parent
Image{
height: scrollView.viewport.height
source: "http://c1.staticflickr.com/9/8582/16489458700_c9d82954b7_z.jpg"
}
}
}