注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

沙漠里de烟雨

原创分享,禁止转载

 
 
 

日志

 
 

qml下的子dialog  

2017-05-11 03:50:27|  分类: QT5.x与QML |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
xx.pro:
QT += qml quick

main.cpp =>
#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

main.qml =>
import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    visible: true
//    MainForm {
//        anchors.fill: parent
//        mouseArea.onClicked: {
//            Qt.quit();
//        }


        TestPopup
        {
            anchors.fill: parent
        }
}


TestPopup.qml =>
import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Dialogs 1.2
import QtQuick.Window 2.0

/**
测试自定义弹出层:popup和mask
    /可设置动画类型
    /可设置是否显示遮罩
    用list替代combobox
*/
Item{
    width: 640
    height: 480

    // 定义鼠标可拖动区域
    MouseArea {
        anchors.fill: parent
        drag.target: popup;
        drag.axis: Drag.XAndYAxis
        drag.minimumX: 30
        drag.maximumX: 150
        drag.filterChildren: true
        clip: true
    }

    // 弹出层
    Popup {
        id: popup
        width: 200; height: 300
        x: 200; y:100
        //anchors.centerIn: parent  // 注意:使用位移动画不能用anchors定位方式
        z: 101
        opacity: 0.8
        visible: false;
        radius: 5

        //
        Text{
            text: 'this is popop'
            anchors.bottom: parent.bottom
            anchors.centerIn: parent
        }
        Button {
            id: btnClose
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 10
            text:"Close"
            width: 98
            onClicked: parent.hide()
        }
    }

    // 控制区
    Rectangle{
        width:300; height:300
        anchors.centerIn: parent
        Column{
            anchors.fill: parent
            spacing:10
            ComboBox {
                id: cmbAnimation
                width:300
                editable: true
                model: ["fade", "width", "height", "size", "flyDown", "flyUp", "flyLeft", "flyRight"]
            }
            ListView {
                visible: false
                id: lvAnimation
                width:300
                height: 200
                model: ["fade", "width", "height", "size", "flyDown", "flyUp", "flyLeft", "flyRight"]
            }
            CheckBox{
                id: chk
                text: 'show mask'
                checked: true
            }
            Button {
                id: btnPopup
                text: '显示自定义popup'
                onClicked:{
                    popup.showMask = chk.checked;
                    popup.animationType = cmbAnimation.currentText;
                    //popup.duration = 1000;
                    //popup.easingType = Easing.OutElastic;
                    popup.show();
                }
            }
        }
    }
}


Popup.qml =>
import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Window 2.1


/**
弹出层
    SURFSKY.CNBLOGS.COM
    2014-09
功能
    /禁止事件穿透,不让下层事件触发
    /灯箱效果
    /动画效果
    /可拖拽
    仿mac的最小化变形动画
    阴影效果
    控制width、height动画的中心点
使用
    Popup {
        id: popup
        width: 200; height: 300
        x: 200; y:100
        //anchors.centerIn: parent  // 注意:使用位移动画不能用anchors定位方式
        z: 101
        opacity: 0.8
        visible: false;
        radius: 5
        ...
    }
    popup.showMask = chk.checked;
    popup.animationType = cmbAnimation.currentText;
    //popup.duration = 1000;
    //popup.easingType = Easing.OutElastic;
    popup.show();
注意
    使用位移动画不能用anchors定位方式
*/
Rectangle {
    id: root
    width: 100
    height: 200
    color: 'lightblue'
    z:100
    transformOrigin: Item.Center  // 无效

    // 公有属性
    property bool showMask : false;
    property string animationType : 'none';
    property int duration : 500
    property int easingType : Easing.OutBounce


    // 私有属性
    property int innerX;
    property int innerY;
    property int innerWidth;
    property int innerHeight;
    property double innerOpacity;


    //------------------------------
    // 事件
    //------------------------------
    // 属性备份一下,避免动画对属性进行变更
    Component.onCompleted: {
        save();
    }

    function show()
    {
        reset();
        switch (animationType)
        {
            case "fade":     animFadeIn.start(); break;
            case "width":    animWidthIncrease.start(); break;
            case "height":   animHeightIncrease.start(); break;
            case "size":     animBig.start(); break;
            case "flyDown":  animInDown.start(); break;
            case "flyUp":    animInUp.start(); break;
            case "flyLeft":  animInLeft.start(); break;
            case "flyRight": animInRight.start(); break;
            default:         this.visible = true;
        }
    }

    function hide()
    {
        switch (animationType)
        {
            case "fade":    connector.target = animFadeOut;        animFadeOut.start(); break;
            case "width":   connector.target = animWidthDecrease;  animWidthDecrease.start();   break;
            case "height":  connector.target = animHeightDecrease; animHeightDecrease.start();  break;
            case "size":    connector.target = animSmall;          animSmall.start();   break;
            case "flyDown": connector.target = animOutUp;          animOutUp.start();   break;
            case "flyUp":   connector.target = animOutDown;        animOutDown.start(); break;
            case "flyLeft": connector.target = animOutRight;       animOutRight.start();break;
            case "flyRight":connector.target = animOutLeft;        animOutLeft.start(); break;
            default:        close();
        }
    }

    // 动画结束后调用的脚本
    Connections{
        id: connector
        target: animInDown
        onStopped: close()
    }



    //------------------------------
    // 辅助方法
    //------------------------------
    function getRoot(item)
    {
        return (item.parent !== null) ? getRoot(item.parent) : item;
    }

    function save()
    {
        innerX = root.x;
        innerY = root.y;
        innerWidth = root.width;
        innerHeight = root.height;
        innerOpacity = root.opacity;
        console.log("x=" + innerX + " y="+innerY + " w=" + innerWidth + " h="+innerHeight);
    }

    function reset()
    {
        root.x = innerX;
        root.y = innerY;
        root.width = innerWidth
        root.height = innerHeight;
        root.opacity = innerOpacity;
        root.scale = 1;

        connector.target = null;
        mask.visible = showMask;
        root.visible = true;
    }

    // 立即关闭
    function close()
    {
        mask.visible = false;
        root.visible = false;
        log();
    }

    function log()
    {
        console.log("x=" + x + " y="+y + " w=" + width + " h="+height);
    }




    //------------------------------
    // 遮罩
    //------------------------------
    // 禁止事件穿透
    MouseArea{
        anchors.fill: parent;
        onPressed:{
             mouse.accepted = true
        }
        drag.target: root  // root可拖动
    }

    // 灯箱遮罩层
    Mask{
        id: mask
        visible: false
    }





    //------------------------------
    // 动画
    //------------------------------
    // fadeIn/fadeOut
    PropertyAnimation {
        id:animFadeIn
        target: root
        duration: root.duration
        easing.type: root.easingType
        property: 'opacity';
        from: 0;
        to: root.innerOpacity
    }
    PropertyAnimation {
        id: animFadeOut
        target: root
        duration: root.duration
        easing.type: root.easingType
        property: 'opacity';
        from: root.innerOpacity;
        to: 0
    }

    // width
    PropertyAnimation {
        id: animWidthIncrease
        target: root
        duration: root.duration
        easing.type: root.easingType
        property: 'width';
        from: 0;
        to: root.innerWidth
    }
    PropertyAnimation {
        id: animWidthDecrease
        target: root
        duration: root.duration
        easing.type: root.easingType
        property: 'width';
        from: root.innerWidth;
        to: 0
    }

    // height
    PropertyAnimation {
        id: animHeightIncrease
        target: root
        duration: root.duration
        easing.type: root.easingType
        property: 'height';
        from: 0;
        to: root.innerHeight
    }
    PropertyAnimation {
        id: animHeightDecrease
        target: root
        duration: root.duration
        easing.type: root.easingType
        property: 'height';
        from: root.innerHeight;
        to: 0
    }


    // size(如何控制size动画的中心点)
    PropertyAnimation {
        id: animBig
        target: root
        duration: root.duration
        easing.type: root.easingType
        property: 'scale';
        from: 0;
        to: 1
    }
    PropertyAnimation {
        id: animSmall
        target: root
        duration: root.duration
        easing.type: root.easingType
        property: 'scale';
        from: 1;
        to: 0
    }

    // fly in
    PropertyAnimation {
        id: animInRight
        target: root
        duration: root.duration
        easing.type: root.easingType
        property: 'x';
        from: -root.innerWidth;
        to: root.innerX
    }
    PropertyAnimation {
        id: animInLeft
        target: root
        duration: root.duration
        easing.type: root.easingType
        property: 'x';
        from: getRoot(root).width;
        to: root.innerX
    }
    PropertyAnimation {
        id: animInUp
        target: root
        duration: root.duration
        easing.type: root.easingType
        property: 'y';
        from: getRoot(root).height;
        to: root.innerY
    }
    PropertyAnimation {
        id: animInDown
        target: root
        duration: root.duration
        easing.type: root.easingType
        property: 'y';
        from: -root.innerHeight
        to: root.innerY
    }


    // fly out
    PropertyAnimation {
        id: animOutRight
        target: root
        duration: root.duration
        easing.type: root.easingType
        property: 'x';
        from: root.innerX;
        to: getRoot(root).width
    }
    PropertyAnimation {
        id: animOutLeft
        target: root
        duration: root.duration
        easing.type: root.easingType
        property: 'x';
        from: root.innerX;
        to: -root.width
    }
    PropertyAnimation {
        id: animOutUp
        target: root
        duration: root.duration
        easing.type: root.easingType
        property: 'y';
        from: root.innerY;
        to: -root.height
    }
    PropertyAnimation {
        id: animOutDown
        target: root
        duration: root.duration
        easing.type: root.easingType
        property: 'y';
        from: root.innerY
        to: getRoot(root).height
    }
}

Mask.qml =>
import QtQuick 2.0
import QtQuick.Window 2.1

/**灯箱效果,禁止操作下层的对象*/
Rectangle {
    //anchors.fill: getRoot(this)
    color: 'lightgrey'
    opacity: 0.5
    z:99
    MouseArea{
        anchors.fill: parent;
        onPressed:{
             mouse.accepted = true
        }
    }

    function getRoot(item)
    {
        return (item.parent !== null) ? getRoot(item.parent) : item;
    }


    Component.onCompleted: {
        this.parent = getRoot(this);
        this.anchors.fill = parent;
    }
}
  评论这张
 
阅读(5)| 评论(0)
推荐

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017