zoukankan      html  css  js  c++  java
  • QML 入门

    学习资料:

    https://doc.qt.io/qt-5/qmlreference.html

    https://www.qter.org/forum.php?mod=viewthread&tid=193

    QtCreator IDE Example (非常好的学习材料,官方Demo ,值得学习~)

    Demo:

    01 红绿灯:

    https://doc.qt.io/qt-5/qtscxml-trafficlight-qml-dynamic-example.html 

    代码:

    https://files.cnblogs.com/files/zach0812/%E5%8A%A8%E6%80%81%E7%BA%A2%E7%BB%BF%E7%81%AF.zip

    效果:

    02 动画足球:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    
    
    Window {
        id: root
        visible: true
        title: qsTr("Hello World")
         800
        height: 600
        property int duration: 3000
    
        Rectangle {
            id: sky
             parent.width
            height: 400
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#0080FF" }
                GradientStop { position: 1.0; color: "#66CCFF" }
            }
        }
        Rectangle {
            id: ground
            anchors.top: sky.bottom
             parent.width
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#1aee1a" }
                GradientStop { position: 1.0; color: "#00803F" }
            }
        }
    
        Image {
            id: ball
            x: 20; y: 240
            source: "images/soccer_ball.png"
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    ball.x = 20; ball.y = 240
                    anim.restart()
                }
            }
        }
        ParallelAnimation {
            id: anim
            SequentialAnimation {
                // ... our Y1, Y2 animation
                NumberAnimation {
                    target: ball
                    properties: "y"
                    to: 20
                    duration: root.duration * 0.4
                    easing.type: Easing.OutCirc
                }
                NumberAnimation {
                    target: ball
                    properties: "y"
                    to: 240
                    duration: root.duration * 0.6
                    easing.type: Easing.OutBounce
    
                }
            }
            NumberAnimation { // X1 animation
                target: ball
                properties: "x"
                to: 400
                duration: root.duration
            }
            RotationAnimation {
                target: ball
                properties: "rotation"
                from:0
                to: 720
                duration: root.duration*1.1
            }
        }
    }
    main.qml

    效果图:

    03 动态添加和移除元素:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    
    
    Window {
        id: root
        visible: true
        title: qsTr("Hello World")
         800
        height: 600
    
    
        Rectangle {
             480
            height: 300
            color: "yellow"
            ListModel {
                id: theModel
                ListElement { number: 0 }
                ListElement { number: 1 }
                ListElement { number: 2 }
                ListElement { number: 3 }
                ListElement { number: 4 }
                ListElement { number: 5 }
                ListElement { number: 6 }
                ListElement { number: 7 }
                ListElement { number: 8 }
                ListElement { number: 9 }
            }
            Rectangle {
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                anchors.margins: 20
                height: 40
                color: "darkGreen"
                Text {
                    anchors.centerIn: parent
                    text: "Add item!"
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        theModel.append({"number": ++parent.count});
                    }
                }
                property int count: 9
            }
            GridView {
                anchors.fill: parent
                anchors.margins: 20
                anchors.bottomMargin: 80
                clip: true
                model: theModel
                cellWidth: 45
                cellHeight: 45
                delegate: numberDelegate
            }
            Component {
                id: numberDelegate
                Rectangle {
                    id: wrapper
                     40
                    height: 40
                    color: "lightGreen"
                    Text {
                        anchors.centerIn: parent
                        font.pixelSize: 10
                        text: number
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            if (!wrapper.GridView.delayRemove)
                                theModel.remove(index);
                        }
                    }
                    GridView.onRemove: SequentialAnimation {
    
                        PropertyAction { target: wrapper; property: "GridView.delayRemove"; value: true }
                        NumberAnimation { target: wrapper; property: "scale"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
                        PropertyAction { target: wrapper; property: "GridView.delayRemove"; value: false }
                    }
                    GridView.onAdd: SequentialAnimation {
                        NumberAnimation { target: wrapper; property: "scale"; from: 0; to: 1; duration: 250; easing.type: Easing.InOutQuad }
                    }
                }
            }
        }
    
    
    }
    main.qml

    效果图:

    04 Shape Shift:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    
    
    Window {
        id: root
        visible: true
        title: qsTr("Hello World")
         800
        height: 600
    
    
        Item {
             300
            height: 480
            ListView {
                id: listView
                anchors.fill: parent
                delegate: detailsDelegate
                model: planets
            }
            ListModel {
                id: planets
                ListElement { name: "Mercury"; imageSource: "images/mercury.jpeg"; facts: "Mercury is the smallest planet in the Solar System. It is the closest planet to the sun. It makes one trip around the Sun once every 87.969 days." }
                ListElement { name: "Venus"; imageSource: "images/venus.jpeg"; facts: "Venus is the second planet from the Sun. It is a terrestrial planet because it has a solid, rocky surface. The other terrestrial planets are Mercury, Earth and Mars. Astronomers have known Venus for thousands of years." }
                ListElement { name: "Earth"; imageSource: "images/earth.jpeg"; facts: "The Earth is the third planet from the Sun. It is one of the four terrestrial planets in our Solar System. This means most of its mass is solid. The other three are Mercury, Venus and Mars. The Earth is also called the Blue Planet, 'Planet Earth', and 'Terra'." }
                ListElement { name: "Mars"; imageSource: "images/mars.jpeg"; facts: "Mars is the fourth planet from the Sun in the Solar System. Mars is dry, rocky and cold. It is home to the largest volcano in the Solar System. Mars is named after the mythological Roman god of war because it is a red planet, which signifies the colour of blood." }
            }
            Component {
                id: detailsDelegate
                Item {
                    id: wrapper
                     listView.width
                    height: 30
                    Rectangle {
                        anchors.left: parent.left
                        anchors.right: parent.right
                        anchors.top: parent.top
                        height: 30
                        color: "#ffaa00"
                        Text {
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                            font.pixelSize: parent.height-4
                            text: name
                        }
                    }
                    Rectangle {
                        id: image
                        color: "black"
                        anchors.right: parent.right
                        anchors.top: parent.top
                        anchors.rightMargin: 2
                        anchors.topMargin: 2
                         26
                        height: 26
                        Image {
                            anchors.fill: parent
                            fillMode: Image.PreserveAspectFit
                            source: imageSource
                        }
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: parent.state = "expanded"
                    }
                    Item {
                        id: factsView
                        anchors.top: image.bottom
                        anchors.left: parent.left
                        anchors.right: parent.right
                        anchors.bottom: parent.bottom
                        opacity: 0
                        Rectangle {
                            anchors.fill: parent
                            color: "#cccccc"
                            Text {
                                anchors.fill: parent
                                anchors.margins: 5
                                clip: true
                                wrapMode: Text.WordWrap
                                font.pixelSize: 12
                                text: facts
                            }
                        }
                    }
                    Rectangle {
                        id: closeButton
                        anchors.right: parent.right
                        anchors.top: parent.top
                        anchors.rightMargin: 2
                        anchors.topMargin: 2
                         26
                        height: 26
                        color: "red"
                        opacity: 0
                        MouseArea {
                            anchors.fill: parent
                            onClicked: wrapper.state = ""
                        }
                    }
                    states: [
                        State {
                            name: "expanded"
                            PropertyChanges { target: wrapper; height: listView.height }
                            PropertyChanges { target: image;  listView.width; height: listView.width; anchors.rightMargin: 0; anchors.topMargin: 30 }
                            PropertyChanges { target: factsView; opacity: 1 }
                            PropertyChanges { target: closeButton; opacity: 1 }
                            PropertyChanges { target: wrapper.ListView.view; contentY: wrapper.y; interactive: false }
                        }
                    ]
                    transitions: [
                        Transition {
                            NumberAnimation {
                                duration: 200;
                                properties: "height,width,anchors.rightMargin,anchors.topMargin,opacity,contentY"
                            }
                        }
                    ]
                }
            }
        }
    
    
    }
    main.qml

    效果图:

     

  • 相关阅读:
    godaddy 亚太机房 更换 美国机房 全过程(图)
    博客园设置访问密码
    GoDaddy Linux主机支持机房的更换
    今天电信宽代终于装上光纤了,升级或安装光纤需购光猫,可以自购。我来扫盲一下
    我来科普一下为毛很多人升级了20M的电信光纤宽带反而感觉速度更卡了
    百度浏览器使用率统计
    hdu 1281
    C#基于SMTP协议和SOCKET通信,实现邮件内容和附件的发送,并可隐藏收件人
    如何处理标注打架
    提高你的Java代码质量吧:谨慎包装类型的比较
  • 原文地址:https://www.cnblogs.com/zach0812/p/13246279.html
Copyright © 2011-2022 走看看