Qml 写的弹出层控件

QML弹出窗口组件，灯箱效果、动画效果，可拖拽

核心思路：一个mask层，一个最顶层，都用rectangle，禁止事件穿透

使用

    Popup {

        id: popup

        width: 200; height: 300

        x: 200; y:100

        z: 101

        opacity: 0.8

        visible: false;

        radius: 5

        ...

    }

    popup.showMask = chk.checked;

    popup.animationType = 'size';

    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  "focus" :    animFocusIn.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  "focus" :   connector.target = animFocusOut;       animFocusOut.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
    }
    ...
}

　　

下载：http://download.csdn.net/detail/surfsky/7985579

万能的qml，编起UI好开心。
再也不用管div、css、box原型、相对定位、绝对定位、浏览器适配、低性能的canvas...坑爹的html+js，无穷尽的js框架，这么多年了，怎么都摞不顺，永远扶不直的阿斗。

自从用了qml，整个人心情都舒畅了，腰也直了，背也不弯了，考试天天考100分

转载请注明出处：http://surfsky.cnblogs.com