QML 3D Demo

来源：互联网发布：linux 根目录挂载编辑：程序博客网时间：2024/06/11 04:53

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://hi.csdn.net/attachment/201007/27/4920523_1280246207RSd0.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></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
                }
            }
        ]
    }
}