I have a problem : when I change the property of an Item in Keys.onPressed, the property isn't updated on the graphic side, here is my code:
Rectangle {
id: rect
focus:true
visible: true
width: 1440
height: 900
Keys.onPressed: {
if (event.key == 65){
rect.color="#88ff88"
console.log("key pressed")
}
}
}
I get the log on the console, but the color of the rectangle stays white. Do you know why?
Related
I tried to show origin image size in QML Image component,code like:
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
id: imageRect
width: parent.width
height: parent.height
anchors.fill: parent
DragHandler {
acceptedButtons: Qt.RightButton
target: sourceImage
xAxis.enabled: true
yAxis.enabled: true
}
Image {
id: sourceImage
source: "qrc:/2.jpg"
width: sourceSize.width
height: sourceSize.height
MouseArea {
width:parent.width
height:parent.height
onClicked: {
print(mouse.x, mouse.y)
print(sourceImage.x, sourceImage.y)
}
}
}
}
}
but the image is not fit with the parent's size, how can i fit the image to its parent and keep image origin size?
By default, the Image component will automatically set width and height to source image contents. You use this if you don't want any scaling to occur.
In the following example, I render the original Image, the Hubble view of the Pillars of Creation. I put it inside a Flickable with ScrollBars so that you can pan the image.
import QtQuick
import QtQuick.Controls
Page {
property string mouseInfo
Flickable {
id: flickable
anchors.fill: parent
contentWidth: image.width + 20
contentHeight: image.height + 20
clip: true
ScrollBar.vertical: ScrollBar {
width: 20
policy: ScrollBar.AlwaysOn
}
ScrollBar.horizontal: ScrollBar {
height: 20
policy: ScrollBar.AlwaysOn
}
Image {
id: image
source: "https://www.arcgis.com/sharing/rest/content/items/d0ecaa3fd9ef45c8ad255989ef6ded07/data"
MouseArea {
anchors.fill: parent
onClicked: mouseInfo = `${mouseX},${mouseY}`;
}
}
}
footer: Frame {
Text {
text: "image: %1x%2 mouseInfo:%3".arg(image.width).arg(image.height).arg(mouseInfo)
}
}
}
You can Try it Online!
Is there a QML layout or some configuration that will automatically wrap QML items to the next row if the width of the next element exceeds the width of the specified layout?
When I use a QML GridLayout, the items just go off the edge of the window and are clipped:
GridLayout {
id: header_focused_container;
width: parent.width;
anchors.margins: 20;
Text {
text: "header_focused_container.width=" +
header_focused_container.width +
" and my width is =" + width
}
Rectangle { height:20; width:250; color: "red" }
Rectangle { height:20; width:250; color: "blue" }
Rectangle { height:20; width:250; color: "green" }
}
When I look at Qt's documentation page labeled "Scalability" I see very manual scaling going on. Basically, they're suggesting that I need compute the needed columns.
Is there some sort of layout type or configuration that will do auto-wrapping of the items?
You can use Flow:
import QtQuick 2.5
import QtQuick.Window 2.0
Window {
visible: true
width: 400
height: 200
Flow {
id: header_focused_container
anchors.fill: parent
Text {
text: "blah"
}
Rectangle { height:20; width:250; color: "red" }
Rectangle { height:20; width:250; color: "blue" }
Rectangle { height:20; width:250; color: "green" }
}
}
I'm trying to understand the functionality of Behavior by animating a small Rectangle when it's property changes.
Consider the following example:
import QtQuick 2.4
import QtQuick.Controls 1.2
Item {
width: 600
height: 80
Rectangle {
id: rect
color: "red"
width: 20
height: 20
property int xval: 0
Behavior on xval {
NumberAnimation {
target: rect
property: "x"
to: rect.xval
duration: 2000
easing.type: Easing.InOutQuad
}
}
}
Button {
anchors.bottom: parent.bottom
onClicked: { rect.xval=250 }
}
}
Here I'm trying to animate the x property of the Item rect on Button Click. But it doesnot animate. Now if you replace
to: rect.xval
with
to: 400
The Rectangle animates as expected on Button Click. All I want to do is to animate the Rectangle using the value set by the user. Am I missing something ?
You don't need a extra property to animate a property.
Behavior on foo will animate foo whenever it changes its value and make it the implicit property of inner Animations.
Your code can simply be
Item {
width: 600
height: 80
Rectangle {
id: rect
color: "red"
width: 20
height: 20
Behavior on x {
NumberAnimation {
duration: 2000
easing.type: Easing.InOutQuad
}
}
}
Button {
anchors.bottom: parent.bottom
onClicked: { rect.x=250 }
}
}
How do i detect clicks outside Window {} in QML ?
Rectangle {
id: topLevel
height: 400; width: 400
Window {
id: windowObj
color: "blue"
height: 200; width: 200
onActiveChanged { console.trace(); visible = false; }
}
Component.onCompleted: windowObj.visible = true
}
Suppose I click on some part of topLevel outside windowObj.
onActiveChanged works on Windows but not on MAC.
{Using: QtQuick 2.1, QtQuick.Window 2.1, QML/Qt 5.2.0}
Put a MouseArea in your topLevel Rectangle and let the event pass through
Rectangle {
id: topLevel
MouseArea{
anchors.fill : topLevel
propagateComposedEvents : true
onClicked : console.log("clickoutside");
}
Window {
id: windowObj
color: "blue"
height: 200; width: 200
onActiveChanged { console.trace(); visible = false; }
}
}
I am building a Qt5 application based on Qt-Quick 2 for the UI. I have an issue while displaying a ListView with an highlight component. When I scroll the ListView the highlight rectangle is visible outside of the ListView and I can't find a way to avoid it.
Here is an example of the issue with a minimal QML file:
import QtQuick 2.0
Rectangle {
width: 360; height: 600
ListView {
width: 350; height: 200
anchors.centerIn: parent
id: myList
model: myModel
highlight: highlightBar
delegate: Item {
width: 400; height: 20
Text { text: name }
MouseArea {
id: mArea
anchors.fill: parent
onClicked: { myList.currentIndex = index; }
}
}
}
Component {
id: highlightBar
Rectangle {
width: parent.width; height: 20
color: "#FFFF88"
}
}
ListModel {
id: myModel
}
/* Fill the model with default values on startup */
Component.onCompleted: {
for(var i = 0; i < 100; i++) {
myModel.append({ name: "Big Animal : " + i});
}
}
}
Is there a way to "limit" a component to its parent borders or to hide the highlight component while scrolling?
As reported by the documentation:
Note: Views do not enable clip automatically. If the view is not clipped by another item or the screen, it will be necessary to set clip: true in order to have the out of view items clipped nicely.
Hence, what you are experiencing is a common behaviour and you should either 1) clip the view via other Items (e.g. a header Rectangle and a footer Rectangle with z:infinite or simply set the clip property to true, i.e.
ListView{
//...
clip:true
//...
}
Clipping has some perfomance disavantages which can greatly affect the application as it grows. Hence, its usage, especially outside the views scenario, should be evaluated carefully.