QML Qt4.7超炫经典实例1 源代码

本网站用的阿里云ECS,推荐大家用。自己搞个学习研究也不错
这个小程序原本是 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=”<!–  
body{color: black} img{display: none} a{color: red }  
–>body{color: black} img{display: none} a{color: red }

“+title+”

By:”+photoAuthor+”

“+description+”

”  
                        }  
                    }  
                    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” 
           

未经允许不得转载:演道网 » QML Qt4.7超炫经典实例1 源代码

赞 (0)
分享到:更多 ()

评论 0

评论前必须登录!

登陆 注册