[SLOVED] Horizontal RSS News animation + ListView + XmlListModel
-
Hello
I try write simple RSS horizontal news.
How can I add to my rss animation loop.
this is my qml app:
@import QtQuick 2.0
import QtQuick.XmlListModel 2.0Rectangle {
width: 800
height: 600
id: screenproperty string currentFeed: "wiadomosci.wp.pl/kat,1329,ver,rss,rss.xml" property bool loading: rssModle.status == XmlListModel.Loading XmlListModel { id: rssModle source: "http://" + screen.currentFeed query: "/rss/channel/item" XmlRole { name: "title"; query: "title/string()" } XmlRole { name: "description"; query: "description/string()" } } Rectangle { anchors.left: screen.left anchors.right: screen.right anchors.bottom: screen.bottom id : footerBlock height: 30 color: "black" ListView { width: parent.width height: parent.height orientation: ListView.Horizontal id : list model : rssModle delegate: textDelegate } } Component { id: textDelegate Row { id: row spacing: 30 Text { text: " - " + title + " - " color: "blue" font { bold: true; family: "Helvetica"; pointSize: 17 } } Text { text: description.replace(/<(?:.|\n)*?>/gm, '') color: "white" font { bold: true; family: "Helvetica"; pointSize: 17 } } } }
}
@Thanks for Your help
Darek -
Hi,
Did you check Animetion documentation from this "link":http://qt-project.org/doc/qt-5/qml-qtquick-animation.html? You can use "loops" property to set times animation will played. If you want to play animtion until you sopped it manually you should set loops value to "Animation.Infinite" something like this:
@
Rectangle {
width: 100; height: 100; color: "green"
RotationAnimation on rotation {
loops: Animation.Infinite
from: 0
to: 360
}
}
@ -
Hi,
I add this code in my app, it's work but animation is only in first news (item)
@import QtQuick 2.0
import QtQuick.XmlListModel 2.0Rectangle {
width: 800
height: 600
id: screen/*Rectangle { width: 100; height: 100; color: "green" RotationAnimation on x { loops: Animation.Infinite from: 0 to: 360 } }*/ property string currentFeed: "wiadomosci.wp.pl/kat,1329,ver,rss,rss.xml" property bool loading: rssModle.status == XmlListModel.Loading XmlListModel { id: rssModle source: "http://" + screen.currentFeed query: "/rss/channel/item" XmlRole { name: "title"; query: "title/string()" } XmlRole { name: "description"; query: "description/string()" } } Rectangle { anchors.left: screen.left anchors.right: screen.right anchors.bottom: screen.bottom id : footerBlock height: 30 color: "black" ListView { width: parent.width height: parent.height orientation: ListView.Horizontal id : list model : rssModle delegate: textDelegate } } Component { id: textDelegate Row { id: row spacing: 30 RotationAnimation on x { loops: Animation.Infinite from: 0 to: -10000 duration: 1000 } Text { text: " - " + title + " - " color: "blue" font { bold: true; family: "Helvetica"; pointSize: 17 } } Text { text: description.replace(/<(?:.|\n)*?>/gm, '') color: "red" font { bold: true; family: "Helvetica"; pointSize: 17 } id: opis } } }
}
@ -
[quote author="darbor" date="1416838669"]Hi,
I add this code in my app, it’s work but animation is only in first news (item)
[/quote]In your code you have a Rectangle which show ListView. If you want to animation all items from list you must apply this animation to Rectangle or ListView something like this:
@
ListView {
//Your code of list view to show news.NumberAnimation on x { loops: Animation.Infinite from: 0 to: -10000 }
}
@ -
Hi,
Yeaaa, it's work, but...
RSS news is dynamicaly and i don't know how can i calculate width of ListView to show all news and set properties "to:-xxxx" in NumberAnimation.
I my case i set this properties to static:@import QtQuick 2.0
import QtQuick.XmlListModel 2.0Rectangle {
width: 800
height: 600
id: screenproperty string currentFeed: "wiadomosci.wp.pl/kat,1329,ver,rss,rss.xml" property bool loading: rssModle.status == XmlListModel.Loading XmlListModel { id: rssModle source: "http://" + screen.currentFeed query: "/rss/channel/item" XmlRole { name: "title"; query: "title/string()" } XmlRole { name: "description"; query: "description/string()" } } Rectangle { anchors.left: screen.left anchors.right: screen.right anchors.bottom: screen.bottom id : footerBlock height: 30 color: "black" ListView { width: 10000 /* static width - this is to small to show all news*/ orientation: ListView.Horizontal id : list model : rssModle delegate: textDelegate NumberAnimation on x { loops: Animation.Infinite from: 0 to: -10000 /* static properties - how calculate width for all news rss*/ duration: 10000 } } } Component { id: textDelegate Row { id: row spacing: 30 Text { text: " - " + title + " - " color: "blue" font { bold: true; family: "Helvetica"; pointSize: 17 } } Text { text: description.replace(/<(?:.|\n)*?>/gm, '') color: "red" font { bold: true; family: "Helvetica"; pointSize: 17 } id: opis } } }
}
@ -
ListView has a contentWidth and contentHeight. You can use this property to get full size of your content in list view.
-
In my case data load from XmlListModel (asynch). I don't understand how set width ListView and "to: " after data loading.
Could You show me some code to understand. -
ListView has a signal which called when contentHeight was updated. You could subscribe this signal using code like this:
@
ListView {
id: listVIewDatas
//Your code of ListView
onContentHeightChanged: {
console.log("contentHeight: "+listVIewDatas.contentHeight);
}onContentWidthChanged: { console.log("contentWidth: "+listVIewDatas.contentWidth); }
}
@ -
Yeeaaaa. Finaly it work :)
Thanks for Your HelpIf someone has another idea, gladly I will know a new way.
code:
@import QtQuick 2.0
import QtQuick.XmlListModel 2.0Rectangle {
width: 800
height: 600
id: screenproperty string currentFeed: "wiadomosci.wp.pl/kat,1329,ver,rss,rss.xml" property bool loading: rssModle.status == XmlListModel.Loading XmlListModel { id: rssModle source: "http://" + screen.currentFeed query: "/rss/channel/item" XmlRole { name: "title"; query: "title/string()" } XmlRole { name: "description"; query: "description/string()" } onStatusChanged: { if (status == XmlListModel.Ready) { } } } Rectangle { anchors.left: screen.left anchors.right: screen.right anchors.bottom: screen.bottom id : footerBlock height: 30 color: "black" ListView { id : list //visible: rssModle.status == XmlListModel.Ready width: parent.width orientation: ListView.Horizontal model : rssModle delegate: textDelegate onContentWidthChanged: { list.width = list.contentWidth looper.to = -list.contentWidth looper.duration = list.contentWidth*6 looper.restart() } NumberAnimation on x { loops: Animation.Infinite id: looper from: footerBlock.width } } } Component { id: textDelegate Row { id: row spacing: 30 Text { text: " - " + title + " - " color: "blue" font { bold: true; family: "Helvetica"; pointSize: 17 } } Text { text: description.replace(/<(?:.|\n)*?>/gm, '') color: "red" font { bold: true; family: "Helvetica"; pointSize: 17 } id: opis } } }
}
@