Qml write pop-up control

Qml pop-up window components, light box effects, animation effects, drag and drop

Core idea: a mask layer and a top layer use rectangle to prohibit event penetration

Use

    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();

Note:

You cannot use anchors to position a displacement animation.

Core code

Rectangle {ID: Root width: 100 Height: 200 color: 'lightblue 'Z: 100 transformorigin: item. center // invalid // Public Property bool showmask: false; property string animationtype: 'none'; property int Duration: 500 property int easingtype: easing. outbounce // Private Property int innerx; property int innery; property int innerwidth; property int innerheight; property double inneropacity ;//------------- ----------------- // Event // -------------------------------- // back up the attribute to prevent the animation from changing the 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": Nimindown. 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.tar get = animfadeout; animfadeout. start (); break; Case "Focus": connector.tar get = animfocusout; animfocusout. start (); break; Case "width": connect Or.tar get = animwidthdecrease; animwidthdecrease. start (); break; Case "height": connector.tar get = animheightdecrease; animheightdecrease. start (); break; Case "size": connector.tar get = animsmall; animsmall. start (); break; Case "flydown": connector.tar get = animoutup; animoutup. start (); break; Case "flyup": connector.tar get = animoutdown; animoutdown. start (); break; Case "flyleft": connector.tar Ge T = animoutright; animoutright. start (); break; Case "flyright": connector.tar get = animoutleft; animoutleft. start (); break; default: Close () ;}// script connections called after the animation ends {ID: Connector target: animindown onstopped: Close ()} // ------------------------------ // auxiliary method // ---------------------------------- 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.tar get = NULL; mask. visible = showmask; root. visible = true;} // immediately close function close () {mask. visible = false; root. visible = false; log ();} function log () {console. log ("x =" + x + "Y =" + Y + "W =" + width + "H =" + height );} // ------------------------------ // mask // -------------------------------- // disable the event from penetrating the mousearea {anchors. fill: parent; onpressed: {mouse. accepted = true} drag.tar get: Root // you can drag root} // mask {ID: mask visible: false} // ------------------------------ // animation // -------------------------------- // 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 }...}

　　

Download: http://download.csdn.net/detail/surfsky/7985579

The omnipotent qml makes the UI very happy.
No longer care about Div, CSS, box prototype, relative positioning, absolute positioning, browser adaptation, low-performance canvas... the endless JS framework of HTML + JS has never been smooth for so many years.

Since the use of qml, the entire person is in a good mood, his waist is straight, his back is not bent, the exam is 100 points a day

Qml write pop-up control