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


这个小程序原本是 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:"l="<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  
                }  
            }  
        ]  
    }  
} 

相关内容