这个小程序原本是 gwibbersoft 这个哥们写的，在Youtube上看见了，觉得不错，源代码 git 下来看了看，由于他写得比较早，估计是QDeclarative项目内测的时候写的。在Qt4.6.x/Qt4.7Beta中用QmlViewer来打开就会出现一大堆错误。所以我就花了半个小时做了一些修改，让它在Qt4.7Beta中跑起来。并把源代码分享给大家。
随着QDeclarative项目的发展完善，很多声明做了大量的修改。从Qt4.6.x到Qt4.7就有很多地方改动。如果现在想学的朋友，直接从4.7开始学吧，估计Qt4.7发布的时候，无论是symbian s60 V5,还是symbian3.都会以Qt4.7作为标准。Qt4.7的发布，也标志着Nokia用Qt一统旗下symbian,Meego平台标准开发工具战略的成功，将给这两个平台带来全新的用户体验，吸引更多的开发人员开发更多优秀的软件。因为Qt经Nokia这两年的折腾，太具有吸引力了。
下一代Symbian,Meego的UI将用QML+Javascript来写。各种移动终端设备与 互联网内容进行 无缝整合的时候就变得非常容易。 我也是从去年12月份开始内测的时候我就关注QDeclarative项目的。 目前国内关于QDeclarative这个项目的相关文档很少。希望各大论坛积极推广这个优秀的开发工具。谢谢大家。
·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
import Qt 4.7
import org.webkit 1.0
Rectangle{
id: page
width: 960; height: 720
color: "#201F25"
Rectangle{
id: banner
width: parent.width-20
height: logo.height+20
anchors.horizontalCenter: parent.horizontalCenter
y: 10; radius: 10; z: 10
opacity: 0.9
gradient: Gradient{
GradientStop{position: 0; color: "#8B0504"}
GradientStop{position: 1; color: "black"}
}
Image{
id: logo
source:"http://www.linuxidc.com/upload/2010_08/linuxidcmeego.png"
anchors.verticalCenter: parent.verticalCenter;
x: 15
}
Text{
text: "Meego Flickr 图片"
color: "white"
font.bold: true
font.pixelSize: 48
style: "Raised"
styleColor: "black"
anchors.left: logo.right
anchors.leftMargin: 50
anchors.verticalCenter: parent.verticalCenter
}
}
Rectangle{
width: parent.width-20
anchors.horizontalCenter: parent.horizontalCenter
height: page.height-banner.height-30
y: banner.height+20
color: "#201F25"
XmlListModel{
id: feedModel
source: "http://api.flickr.com/services/feeds/photos_public.gne?"+(tags ? "tags="+commasep(tags)+"&" : "")+"format=rss2"
query: "/rss/channel/item"
namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";"
XmlRole { name: "title"; query: "title/string()" }
XmlRole { name: "imagePath"; query: "media:thumbnail/@url/string()" }
XmlRole { name: "description"; query: "description/string()" }
XmlRole { name: "photoAuthor"; query: "author/string()" }
}
GridView{
id: feedList
width: parent.width
height: parent.height+200
model: feedModel;
z: 0;
property bool selected: false
cellWidth: 300+10;
cellHeight: 169+10;
delegate:[
Image{
id: feedImage
source: imagePath
width: 300
height: 169
Rectangle{
id: imageTextBack;
anchors.fill: parent;
color: "black"
opacity: 0.8
visible: false
Text{
id: imageText
text: title
color: "white"
wrapMode: Text.WrapAnywhere
font.pixelSize: 24
font.bold: true;
anchors.fill: parent
horizontalAlignment: "AlignHCenter"
verticalAlignment: "AlignVCenter"
}
}
MouseArea{
id: imageRegion
anchors.fill: parent
onClicked:{
feedList.selected=true;
storyContent.html="<html><mce:style><!--
body{color: black} img{display: none} a{color: red }
--></mce:style><style mce_bogus="1">body{color: black} img{display: none} a{color: red }</style> <body><h1>"+title+"</h1><h3>By:"+photoAuthor+"</h3><p>"+description+"</p></body></html>"
}
}
states: [
State{
name: "hover"
when: imageRegion.containsMouse==true
PropertyChanges{target: imageTextBack; visible: true;}
}
]
}
]
transform: [
Rotation{
id: imageWall;
axis{x: 0; y: 1; z: 0}
angle: 0
}
]
}
Rectangle{
id: imageInfo
height: parent.height
width: parent.width-310
radius: 10; color: "white";
visible: false;
x: 1000
gradient: Gradient{
GradientStop{position: 0; color: "black"}
GradientStop{position: 1; color: "#1F1F1F"}
}
WebView{
id: storyContent
anchors.fill: parent;
smooth: true
html: ""
}
Rectangle{
id: buttonLogin
height: 30
width: 100
radius: 10
anchors.bottom: parent.bottom
anchors.bottomMargin: 5
anchors.horizontalCenter: parent.horizontalCenter
color: "#011C00"
gradient: Gradient{
GradientStop{position: 0; color: "#69FF65"}
GradientStop{position: 0.4; color: "#095606"}
GradientStop{position: 0.8; color: "#69FF65"}
GradientStop{position: 1; color: "#095606"}
}
MouseArea{
anchors.fill: parent
onClicked: {feedList.selected=false}
}
Text{
anchors.centerIn: parent
text: "Back"
font.bold: true
font.pixelSize: 12
color: "white"
style: "Raised"
styleColor:"black"
}
}
}
states: [
State{
name: "selected"
when: feedList.selected==true
PropertyChanges{target: imageWall; angle: 55}
PropertyChanges{target: feedList; width: 1200}
PropertyChanges{
target: imageInfo
visible: true;
x: page.width-width-15;
}
}
]
transitions:[
Transition{
reversible: true
NumberAnimation{
properties: "angle,x"
duration: 300
}
}
]
}
}