I am trying to create a smoothly changing list in QML, but the animations have an unexpected side effect. This is my toy code that moves around items every time the window is resized:
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
ListView {
id: listView1
x: 0
y: 0
width: parent.width
height: parent.height
onWidthChanged: {
model.move(0,1,2);
}
move: Transition {
SmoothedAnimation {
properties: "x,y"
duration: 1000
}
}
displaced: Transition {
SmoothedAnimation {
properties: "x,y"
duration: 1000
}
}
delegate: Item {
x: 5
onXChanged: {
console.log("x: ", x)
}
width: parent.width
height: 40
Text {
text: name
anchors.verticalCenter: parent.verticalCenter
font.bold: true
}
}
model: ListModel {
ListElement {
name: "Grey"
}
ListElement {
name: "Red"
}
ListElement {
name: "Blue"
}
}
}
}
Oddly enough, this is the output when I play around with that window:
QML debugging is enabled. Only use this in a safe environment.
qml: x: 0.7840000000000007
qml: x: 0
qml: x: 1.2960000000000003
qml: x: 0
qml: x: 1.2960000000000003
qml: x: 0
And it is not just temporary, some items change their x position permanently. Is this my fault?
Related
In my QML application I'm trying to create a grid of items that can be flipped at the press of a button. The backside of such an item should then fill a major part of the screen until it is flipped back.
Let's say I start off with the following view of my application
When I press the question mark button of the item in the center then the item is flipped and moved slightly. What I would expect to see after this is the following
The blue box is the backside of my item and it covers most of the screen. Pressing the 'X'-Button on the top right would again flip the item back.
However what I actually see after flipping the first time is the following
You can see that parts of the items in my grid are covered by my flipped item and parts are not.
The code I'm using is as follows
import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2
import QtQuick.Window 2.2
Window {
id: main
width: 640
height: 480
visible: true
title: qsTr("Hello World")
function absolutePos(item) {
var my_x = item.x
var my_y = item.y
if (item.parent !== null) {
var parent_pos = absolutePos(item.parent)
my_x += parent_pos.x
my_y += parent_pos.y
}
return {x: my_x, y: my_y}
}
GridLayout {
columns: 5; rows: 3
Repeater {
model: 15
delegate: Item {
width: main.width / 5 - 10
height: main.height / 3 - 10
Flipable {
id: flipable
anchors.fill: parent
property bool flipped: false
front: Rectangle {
anchors.fill: parent
border.color: "black"
border.width: 2
}
back: Rectangle {
id: backSide
width: 580; height: 400
property var absolute_pos: absolutePos(this)
border.color: "blue"
border.width: 2
Button {
anchors.top: parent.top
anchors.right: parent.right
text: "X"
width: 30; height: 30
onClicked: {
flipable.flipped = !flipable.flipped
}
}
}
transform: [
Rotation {
id: rotation
origin.x: flipable.width / 2
origin.y: flipable.height / 2
axis.x: 0; axis.y: 1; axis.z: 0
angle: 0
},
Translate {
id: translation
x: 0; y: 0
}
]
states: State {
name: "back"
PropertyChanges {
target: rotation
angle: 180
}
PropertyChanges {
target: translation
x: 490 - backSide.absolute_pos.x
}
PropertyChanges {
target: translation
y: 40 - backSide.absolute_pos.y
}
when: flipable.flipped
}
transitions: Transition {
ParallelAnimation {
NumberAnimation {
target: rotation
property: "angle"; duration: 300
}
NumberAnimation {
target: translation
property: "x"; duration: 300
}
NumberAnimation {
target: translation
property: "y"; duration: 300
}
}
}
}
Button {
anchors.top: parent.top
anchors.right: parent.right
text: "?"
width: 30; height: 30
onClicked: {
flipable.flipped = !flipable.flipped
}
}
}
}
}
}
I was already trying to achieve the effect by manually setting the parent of my Flipable to Window.contentItem so that it will always be above any other items. However this also doesn't fix the problem since the item will still cover the siblings following the current item.
Also I'm still hoping, there is a solution which doesn't require manipulating the z-order of my items in some arcane way.
I am not sure what you mean by "some arcane way", but changing the z property of your delegate is perfectly fine:
delegate: Item {
z: flipable.flipped ? 1 : 0
// ...
}
You will also probably want to hide the "?" button when flipped:
visible: !flipable.flipped
When the window opens you can see the Rectangle sliding out. I set the y property to the parent height so it should be initially outside of the window why is this being animated?
My guess it's because of the parent:height. Maybe because parent.height is not available at loading time and it's initially set to 0?
I have following example to reproduce:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
id: test;
y: parent.height;
states: [
State {
name: "slideOut"
PropertyChanges{
target: test;
y: parent.height;
}
},
State {
name: "slideIn"
PropertyChanges{
target: test;
y: 0;
}
}
]
Behavior on y {
NumberAnimation {
duration: 500;
}
}
color: "red";
width: parent.width;
height: parent.height;
}
MouseArea {
anchors.fill: parent;
onClicked: {
if(test.state == "slideIn") {
test.state = "slideOut";
} else {
test.state = "slideIn";
}
}
}
}
Your guess sounds spot on to me.
You should use transitions with states instead:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
id: test
y: parent.height
width: parent.width
height: parent.height
color: "red"
states: [
State {
name: "slideOut"
PropertyChanges {
target: test
y: parent.height
}
},
State {
name: "slideIn"
PropertyChanges {
target: test
y: 0
}
}
]
transitions: [
Transition {
NumberAnimation {
property: "y"
duration: 500
}
}
]
}
MouseArea {
anchors.fill: parent
onClicked: {
if (test.state == "slideIn") {
test.state = "slideOut"
} else {
test.state = "slideIn"
}
}
}
}
Another solution could be to use the enabled property of Behavior to only run the animation when the window is ready. I'm not sure which property you'd base it on though. Some ideas:
enabled: window.height > 0
enabled: window.active
Is there possible to use choreography animations in qml (in a REUSABLE manner)?
for example in StackView transitions from page1 to page2.
I tried following code, but ParentChange does not work as expected. This code just changes red rectangle's position.
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
StackView {
id: stack
anchors.fill: parent
initialItem: Page {
id: page1
Label {
text: qsTr("First page")
anchors.centerIn: parent
}
Rectangle {
id: rect
width: 50
height: 50
x: 600
y: 100
color: "red"
states: [
State {
when: stack.depth > 1
ParentChange { target: rect; parent: stack.currentItem; x: 100; y: 100; }
}
]
transitions: Transition {
ParentAnimation {
NumberAnimation { properties: "x,y"; duration: 1000 }
}
}
}
MouseArea {
anchors.fill: parent
onClicked: stack.push(page2)
}
}
Component {
id: page2
Page {
background: Rectangle { color: "yellow"; anchors.fill: parent }
Label {
text: qsTr("Second page")
anchors.centerIn: parent
}
}
}
}
Rectangle {
id: back
color: "blue"
width: 50
height: 50
radius: 25
MouseArea {
anchors.fill: parent
onClicked: stack.pop()
}
}
}
but the usage is not limited to StackView. It can be used in many other situations. (just like above link)
I'm working on a QML StackView that starts with a list of items to select from. Once selected I want to transition _.push(...) to a input form which has larger dimensions than the initialItem.
The only way I have trial-and-errored my way into a situation that works is by making the form Item a nested borderless window.
Q1. A nested window can't be the right type of concept to use for this... right ? there must be another way to do it. What is the right way ?
Q2. My goal after this is to have a transition animation that grows or shrinks between stacks of different sizes. Advice that doesn't preclude that would be best.
code
Main.qml :
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
ApplicationWindow {
property int itemHeight: 30
property int cornerRadius : 5
visible: true
color: "transparent"
flags: Qt.FramelessWindowHint
ListModel {
id: searchFacets
ListElement {
title: "Topics"
page: "content/TopicSearch.qml"
}
// ListElement {
// title: "Domains"
// }
}
StackView {
id: stackView
focus: true
initialItem: SearchFacets {
id: facets
}
delegate: StackViewDelegate {
pushTransition: StackViewTransition {
PropertyAnimation {
target: enterItem
property: "opacity"
from: 0
to: 1
}
}
}
}
}
Initial Item:
import QtQuick 2.3
Item {
height : listView.count * itemHeight
ListView {
id: listView
model: searchFacets
anchors.fill: parent
focus: true
highlightFollowsCurrentItem: false
highlight: Rectangle {
width: parent.width
height: itemHeight
radius : cornerRadius
color: "green"
opacity: 0.5
z:2
x: listView.currentItem.x;
y: listView.currentItem.y
Behavior on y {
SpringAnimation {
spring: 60
damping: 1.0
}
}
}
delegate: Component {
Item {
width: parent.width
height : itemHeight
Rectangle {
anchors.fill: parent
color: "#212126"
radius: cornerRadius
z:0
border.width: 2
border.color : "white"
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
console.log("clicked index: " + index)
listView.currentIndex = index
// listView.forceActiveFocus()
stackView.push(Qt.resolvedUrl(page))
}
}
Text {
text: title
font.pixelSize: 24
font.bold: true
z:1
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
color: "white"
antialiasing: true
}
}
}
}
}
Input Form:
import QtQuick 2.3
import QtQuick.Window 2.0
Item {
Window {
width: 400
height: 400
visible: true
flags: Qt.FramelessWindowHint
Rectangle {
anchors.fill: parent
visible: true
color: "red"
}
}
}
One possible solution is to update the size of the dimensions of the StackView in the click handler that causes the transition. I do not know if that causes any problems with animating the transition.
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
console.log("clicked index: " + index)
listView.currentIndex = index
var component = Qt.createComponent(page)
var res = component.createObject(stackView)
stackView.height = res.height
stackView.width = res.width
stackView.push(res)
}
}
I am trying to make an app which shows 3 pages at a time. The central page shows 3 rectangles displying sql query results 1-3 , the left page is a link to an image from query result 4, and the right page is also built from the same query and has a different layout. Now I am unable to fit these 3 pages into a listmodel and use pathview to make it look like a paginator, because all 3 pages are incongruent and not really a model, hence giving me error ListElement: cannot contain nested elements. I am pasting the code below. All i want is for the user to be able to flick between the pages, whether that involves a pathview or statechange with a decent transition to mimick flipping pages :
import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0
import "content"
Rectangle{
property ListModel mainModel
id: tripleView
visible: true
width: 800
height: 1400
PathView {
model: mainModel
delegate: mainDelegate
id: paginator
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
anchors.fill: parent
path: Path {
startX: -tripleView.width * mainModel.count / 2 + tripleView.width / 2;
startY: tripleView.height / 2
PathLine {
x: tripleView.width * mainModel.count /2 + tripleView.width / 2
y: tripleView.height * .5 }
}
}
Component {
id: mainDelegate
Rectangle {
width: tripleView.width
height: tripleView.height
}
}
ListModel {
id: regionsModel
ListElement {
name: "Stomach"
}
ListElement {
name: "Lung"
}
ListElement {
name: "Colorectal"
}
ListElement {
name: "Pancreas"
}
ListElement {
name: "Urinary Bladder"
}
}
ListModel {
id: mainModel
ListElement{
Rectangle{
id: tnmPage
width: parent.width
height: container.height
Rectangle {
id: menu
z: 2
width: parent.width ;
height: 75
Component {
id: appDelegate
Rectangle {
width: genericText.width + 10; height: parent.height
id: wrapper
color: PathView.isCurrentItem ? "yellow" : "white"
Text {
id: genericText
height: parent.height
font.pointSize: 12
verticalAlignment: Text.AlignVCenter
// anchors.topMargin: wrapper.top
color: wrapper.PathView.isCurrentItem ? "red" : "black"
text: name
}
MouseArea {
// width:parent.width; height: parent.height
anchors.fill: parent
hoverEnabled: true
onClicked: {
var List = mWindow.printi(name)
t.content = List[1]
node.content = List[2]
mets.content = List[3]
view.currentIndex = index
}
}
}
}
PathView {
id: view
width: 2500
height: parent.height
anchors.rightMargin: 18
anchors.bottomMargin: 0
anchors.leftMargin: -18
anchors.topMargin: 0
anchors.fill: parent
// anchors.bottom: parent.bottom
// anchors.top: parent.top
// preferredHighlightBegin: .1
// preferredHighlightEnd: .6
highlightRangeMode: PathView.StrictlyEnforceRange
// anchors.rightMargin: 0
// anchors.bottomMargin: 0
// anchors.leftMargin: 2
// anchors.topMargin: -71
z: 1
highlight: Component {
Rectangle {
color: "yellow"
visible: PathView.onPath
}
}
focus: true
model: regionsModel
delegate: appDelegate
path: Path {
startX: 0; startY: view.height *.5
PathLine { x: menu.width; y: view.height * .5 }
}
}
}
Flickable {
id: flick
anchors.topMargin: menu.bottom
width: parent. width
height: parent. height - menu.height
contentWidth: parent.width+200
contentHeight: container.height // this is calculated on amount of text
PinchArea {
width: Math.max(flick.contentWidth, flick.width)
height: Math.max(flick.height, flick.height)
pinch.minimumScale: 0.5
pinch.maximumScale: 3
property real initialWidth
property real initialHeight
x: 0
y: 0
//![0]
onPinchStarted: {
initialWidth = flick.contentWidth
initialHeight = flick.contentHeight
flick.interactive = false
}
onPinchUpdated: {
t.fontSize = t.size*pinch.scale
node.fontSize = node.size * pinch.scale
mets.fontSize = mets.size * pinch.scale
}
onPinchFinished: {
flick.returnToBounds()
flick.interactive = true
}
Rectangle {
id: container
MouseArea {
anchors.fill: parent
onDoubleClicked: {
t.fontSize = 12
node.fontSize = t.size
mets.fontSize = t.size
}
}
anchors.top: flick.top
width: parent.width
height: t.height + node.height + mets.height
StageBox {
id: t
anchors.top: container.top
color: "#6acbd3"
}
StageBox {
id: node
anchors.top: t.bottom
color: "#1fd77b"
}
StageBox {
id: mets
anchors.top: node.bottom
color: "blue"
}
}
}
}
}
}
I realise the code above is lengthy, but i think it will give some idea about what i am trying to achieve. The examples i have found so far have simple pages displaying images and no nesting. Thank you for your help.
Try QML type VisualItemModel http://qt-project.org/doc/qt-4.8/qml-visualitemmodel.html#details .good luck
I have managed a hack. Experimentally implemented in colored rectangles, this flickable behaves as a 3-page app starting at mid page and allowing flicking horizontally to access neighbouring pages. It works and I am sure with some tweaking it can suit similar applications as mine. Comments invited
import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0
Rectangle {
state: "baseState"
id: mainScreen
width: 400
height: 600
Text {
z:2
id: logTxt
height: 10
width: 20
function log(txt){
text = txt+"\n"
}
}
Flickable {
boundsBehavior: StopAtBounds
id: flick
y: 48
onContentXChanged: {
if(flick.contentX>100 && mainScreen.state=="baseState" && flick.flickingHorizontally){
logTxt.log(flick.contentX)
mainScreen.state="State1"
}
if(flick.contentX<-100 && mainScreen.state=="baseState" && flick.flickingHorizontally){
mainScreen.state="State2"
logTxt.log(flick.contentX)
}
if(flick.contentX>100 && mainScreen.state=="State2" && flick.flickingHorizontally ){
mainScreen.state="baseState"
logTxt.log(flick.contentX)
flick.contentX=0
}
if(flick.contentX<-100 && mainScreen.state=="State1" && flick.flickingHorizontally){
logTxt.log(flick.contentX)
mainScreen.state="baseState"
flick.contentX=0
logTxt.log(flick.contentX)
Timer
}
}
interactive: true
width: 400
height: 600
transformOrigin: Item.Center
flickableDirection: Flickable.HorizontalFlick
Rectangle {
width: 600
height: 600
id: container
Rectangle {
id:two
visible: false
x: 0
z:3
height: 600
width: 400
color: "grey"
}
Row{
id: testGrid
x:0
visible: true
y: 0
z: 3
width:600
height: 600
Rectangle {
id: a
anchors.top:parent.top
color:"#f6f7b1"
visible: true
z: 3
height: parent.height
width: 200
}
Rectangle {
id: b
anchors.top:parent.top
color:"#ffebeb"
visible: true
height: parent.height
width: 200
}
Rectangle {
id: c
y: -35
anchors.top:parent.top
color:"#b1d5f7"
height: parent.height
width: 200
}
}
Rectangle {
id: three
visible: false
z:2
x:0
height: parent.height
width: 400
color: "#028000"
}
}
}
states: [
State {
name: "State1"
PropertyChanges {
target: testGrid
visible: false
}
PropertyChanges {
target: two
visible: true
}
PropertyChanges {
target: three
visible: false
}
},
State {
name: "State2"
PropertyChanges {
target: testGrid
visible: false
}
PropertyChanges {
target: three
visible: true
}
PropertyChanges {
target: two
visible: false
}
},
State {
name: "baseState"
PropertyChanges {
target: testGrid
visible: true
}
PropertyChanges {
target: three
visible: false
}
PropertyChanges {
target: two
visible: false
}
}
]
}