in my application I need track state of button and change it's icon. In Visual Studio all work, but on buildMashine states not found resourse and icon not show, I also tried use Binding, but not work.
RowLayout {
id: chatFileDeledate
property int stateFile: model.fileState
ToolButton {
id: btnFileDownload
width: 40
height: width
Rectangle {
id: rectOverlay
Image {
id: imageIcon
width: 30
height: width
anchors.centerIn: parent
fillMode: Image.Stretch
sourceSize.width: width
sourceSize.height: height
}
}
}
states: [
State {
when: stateFile == VSQmlChatTypes.NeedDownload
PropertyChanges { target: imageIcon; source: "qrc:/img/icons/file_transfer_download.svg"; }
},
State {
when: stateFile == VSQmlChatTypes.IsDownloading
PropertyChanges { target: imageIcon; source: "qrc:/img/icons/file_transfer_stop.svg"; } //process download
},
State {
when: stateFile == VSQmlChatTypes.DownloadSuccessful
PropertyChanges { target: imageIcon; source: "qrc:/img/icons/file_transfer_open.svg"; }
},
State {
when: stateFile == VSQmlChatTypes.StopDownload
PropertyChanges { target: imageIcon; source: "qrc:/img/icons/file_transfer_error.svg"; }
}
]
}
But if I make that
Image {
id: imageIcon
width: 30
height: width
anchors.centerIn: parent
fillMode: Image.Stretch
sourceSize.width: width
sourceSize.height: height
source: "qrc:/img/icons/file_transfer_download.svg"
}
and remove states icon will be show
Related
I am trying to call a reset function once after the animation is completed. But in the below given code , the animation starts after resetting the values
On Long press of the button I need to start an animation which basically acts as a progress bar, and once the animation is completed I need to call the reset() function.
I have tried the below given code , But here the animation starts once after the resetting of values are done.
Button {
id: button1
onPressAndHold: {
rectangle.visible = true
timer.restart()
}
}
Item {
id: rectangle
Behavior on width {
NumberAnimation {
duration: 1000
easing.type: Easing.InOutCubic
}
}
Image {
id: img
source: "somesource"
fillMode: Image.PreserveAspectCrop
}
}
Timer {
id: timer
repeat: true
interval: 50
onTriggered: {
rectangle.width = img.sourceSize.width * img.progress
if (rectangle.width <= img.sourceSize.width) {
timer.stop()
reset(values)
}
}
}
can you please let me know on how modify it such that the animation completes first and then the reset is done. Thank you in advance!
Ok, that really works for standalone Animation only that sounds a bit strange for me since the common usecase is using animations inside Behavior or State.
So you can use NumberAnimation.onRunningChanged or ScriptAction as #iam_peter said or use Transition.onRunningChanged as well:
Window {
height: 200
width: 600
visible: true
title: qsTr("Animation test")
RowLayout {
width: parent.width
height: 100
anchors.centerIn: parent
Button {
text: "start"
onClicked: {
testRect.state = "state2"
}
}
Rectangle {
id: testContainer
Layout.fillWidth: true
Layout.fillHeight: true
Rectangle {
id: testRect
height: 100
width: 0
color: "orange"
states: [
State {
name: "state1"
PropertyChanges {
target: testRect
width: 0
}
},
State {
name: "state2"
PropertyChanges {
target: testRect
width: testContainer.width
}
}
]
transitions: Transition {
NumberAnimation {
property: "width"
duration: 2000
easing.type: Easing.InQuad
}
onRunningChanged: {
if(running == false)
{
finishRect.color = "red";
}
}
}
}
}
Rectangle {
id: finishRect
Layout.preferredWidth: 100
color: "yellow"
width: 100
height: width
radius: width / 2
}
}
}
According to this post you have two options.
You can us the onRunningChanged handler and check if the animation is still running. If not call anything you want at that point.
Rectangle {
id: rect
width: 100; height: 100
color: "red"
Behavior on width {
NumberAnimation {
duration: 1000
onRunningChanged: {
if (!running)
console.log("Animation finished")
}
}
}
MouseArea {
anchors.fill: parent
onClicked: rect.width = 50
}
}
The other option would be to create a SequentialAnimation and add a SrcriptAction that runs after the NumberAnimation is completed.
Rectangle {
id: rect
width: 100; height: 100
color: "red"
Behavior on width {
SequentialAnimation {
NumberAnimation { duration: 1000 }
ScriptAction {
script: console.log("Animation finished")
}
}
}
MouseArea {
anchors.fill: parent
onClicked: rect.width = 50
}
}
I am trying to change scale property when I click on image, but I would like for it to change slowly. For now I have it instantly when I click on the image (the image gets bigger).
Here are my images:
Here I clicked on the first image and it is slightly bigger than the rest.
Here is my code:
width: 1920
height: 1080
visible: true
title: qsTr("Hello World")
color:'black'
XmlListModel {
id: xmlModel
source: "movies.xml"
query: "/Movies/Movie"
XmlRole { name: "id"; query: "id/string()" }
XmlRole { name: "name"; query: "name/string()" }
XmlRole { name: "year"; query: "year/number()" }
XmlRole { name: "rating"; query: "rating/string()" }
XmlRole { name: "path"; query: "path/string()" }
}
ScrollView{
width:parent.width
height: 400
clip: true
ListView {
id:list
spacing:20
width: parent.width; height: parent.width*0.5
anchors.verticalCenter: parent.verticalCenter
model: xmlModel
clip:true
orientation: ListView.Horizontal
delegate:
Rectangle{ id: rect; width: 300;height: 300; color:'gray'
Image{
id:id
anchors.fill: parent
source:path
fillMode: Image.PreserveAspectFit
scale:focus?1.2:1
MouseArea{
id:area1
width:parent.width
height: parent.height
anchors.fill:parent
Behavior on scale {
PropertyAnimation{ duration: 4000 }
}
onClicked: {
id.scale=1.2
}
//hoverEnabled: true
/*onEntered: {
// hobbit.scale=1.2
id.focus=true
}
onExited: {
// hobbit.scale=1
id.focus=false
}*/
}
}
So, in my code I have Behavior on scale part, but nothing changes. I tried different options and nothing. Any advice? Help would be greatly appreciated.
Move the Behavior object outside the MouseArea object.
Image {
id: img
scale: focus ? 1.2 : 1
Behavior on scale {
PropertyAnimation{ duration: 4000 }
}
MouseArea {
onClicked: {
img.scale = 1.2
}
}
}
I am new to QT QML, and I am planning to make a ListView with collapse with smooth animation. I saw this https://gist.github.com/elpuri/3753756 code. I tried adding PropertyAnimation during collapse and expand to the code. But failed, how should i make it work?
I was planning to add state and translation, but it is not working for two different components,
nestedModel.setProperty(index, "collapsed", !collapsed)
nestedModel.state = (collapsed.state === "COLLAPSED") ? "COLLAPSED" : "EXPANDED";
then for states and transitions,
delegate: Rectangle {
id: rect_change
color: "blue"
//height: 200
width: 300
border.color: "black"
border.width: 2
state: "COLLAPSED"
states: [
State {
name: "COLLAPSED"
PropertyChanges { target: rect_change; height: 0; }
},
State {
name: "EXPANDED"
PropertyChanges { target: rect_change; height: 200; }
}
]
transitions: [
Transition {
from: "EXPANDED"
to: "COLLAPSED"
PropertyAnimation { property: "height"; duration: 400; }
},
Transition {
from: "COLLAPSED"
to: "EXPANDED"
PropertyAnimation { property: "height"; duration: 400; }
}
]
}
For a simpler implementation, get rid of your states and transitions and just use a Behavior on height. You can change the Loader in the example that you linked to so it looks like this:
Loader {
id: subItemLoader
sourceComponent: subItemColumnDelegate
onStatusChanged: if (status == Loader.Ready) item.model = subItems
clip: true
height: collapsed ? 0 : subItems.count * 40
Behavior on height {
NumberAnimation {
duration: 400
}
}
}
I am currently working on a Video/Stream Management program for my university. The body of my application is a GridView. I implemented a playbar for each video so I can use my playback functions specifically for each member of the GridView. The Problem now is FullScreen. I couldn't find a showFullScreen() function like the one from Window. Now I came across this question and tried the first solution (States/Transitions) and it works the way it is intended except that I would need it to be able to go out of the parents scope.
Code:
GridView {
id: mainGrid
width: parent.width - (parent.width % cellWidth)
height: parent.height
anchors.centerIn: parent
Layout.fillHeight: true
Layout.fillWidth: true
cellWidth: 300
cellHeight: 300
focus: true
property bool newPlayStatus: true
model: VideoModel {
list: videoList
}
delegate: Component {
id: videoDelegate
Frame {
id: videoContainer
width: mainGrid.cellWidth
height: mainGrid.cellHeight
background: Rectangle {
anchors.centerIn: parent
width: parent.width
height: parent.height
color: "black"
}
VideoDummy {
id: video
list: model.video
videoUrl: model.url
anchors.centerIn: parent
focus: true
playStatus: mainGrid.newPlayStatus
}
onChildrenChanged: {
console.log("url: " + model.url)
}
Playbar {
id: localPlaybar
x: -12
y: mainGrid.cellHeight - 42
width: mainGrid.cellWidth
height: 30
}
Connections{
target:localPlaybar
onToggleFullscreen: {
videoContainer.state = videoContainer.state === "EXPANDED" ? "" : "EXPANDED"
}
}
states: [
State {
name: "EXPANDED"
PropertyChanges {
target: videoContainer
x: application.x
}
PropertyChanges {
target: videoContainer
y: application.y
}
PropertyChanges {
target: videoContainer
width: application.width
}
PropertyChanges {
target: videoContainer
height: application.height
}
}
]
transitions: [
Transition {
ParallelAnimation {
NumberAnimation {
target: videoContainer
property: "x"
duration: 350
}
NumberAnimation {
target: videoContainer
property: "y"
duration: 350
}
NumberAnimation {
target: videoContainer
property: "width"
duration: 350
}
NumberAnimation {
target: videoContainer
property: "height"
duration: 350
}
}
}
]
}
}
}
I excluded some parts of my code because it would only made it harder to see the important parts. application is the id for the ApplicationWindow.
Currently this code isn't scaling everything to the size/position it needs to be but that is something I would do if the general idea would work.
The problem is that the videoContainer isn't able to go out of it's parents space. Is there any way to do it? I could open up a new Window with the needed qml parts and make it showFullScreen() but I do not believe that this is a nice solution is it?
Thanks in advance!
I found a solution:
onToggleFullscreen: {
var i = videoContainer.mapFromGlobal(0,0)
videoContainer.x = i.x
videoContainer.y = i.y
videoContainer.width = application.width
videoContainer.height = application.height
}
With this I can resize and position it outside of its parent.
I am trying to animate the margin value change with animation in QML, but i cant. The animation is not working
This is my state
State {
name: "up"
PropertyChanges {
target: drag_line
anchors.topMargin: 50
}
And in the transition i tried
transitions: [
Transition {
to: "up"
NumberAnimation { properties: "margin" ;easing.type: Easing.InOutQuad;duration: 300 }
}
]
I also tried the number animation but it also didn't work. Is there any way, am i doing something wrong
The property is not margin but anchors.topMargin
This is my working example:
ApplicationWindow {
visible: true
width: 500
height: 500
Rectangle {
width: 100
height: 100
anchors.centerIn: parent
color: "red"
Rectangle {
id: iRect
color: "blue"
width: 40
height: 40
anchors.top: parent.top
states: [State {
name: "up"
when: iMouseArea.pressed
PropertyChanges {
target: iRect
anchors.topMargin: 50
}
}]
transitions: [
Transition {
to: "up"
NumberAnimation { properties:"anchors.topMargin"; easing.type: Easing.InOutQuad;duration: 300 }
}
]
}
MouseArea{
id: iMouseArea
anchors.fill: parent
}
}
}