QML控件大全之QMLPopup

最新推荐文章于 2024-04-22 15:09:04 发布
最新推荐文章于 2024-04-22 15:09:04 发布
阅读量2.1k 收藏 7
点赞数
分类专栏： QML控件大全 文章标签： qt javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cqltbe131421/article/details/80797412
版权

根据不同需要弹出

 

可设置是否显示遮罩

可设置动画类型

代码如下：Popup.qml，Mask.qml，TestPopup.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
    }
}


 

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;
    }
}


import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Dialogs 1.2
import QtQuick.Window 2.0

Item {
    id: root
    visible: true
    width: 640
    height: 480
    ColorAnimation {
        from: "white"
        to: "black"
        duration: 200
    }

    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
        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: false
            }
            Button {
                id: btnPopup
                text: '显示自定义popup'
                onClicked:{
                    popup.showMask = chk.checked;
                    popup.animationType = cmbAnimation.currentText;
                    popup.show();
                }
            }
        }
    }
}

qtc++开发者
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
qmlGUI控件合集 qmlGUI控件合集
06-08
qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集qmlGUI控件合集
QmlControls:Qt Qml 控件
05-11
QmlControls 提供一些有用Qml基础控件 所有控件预览 控件列表 GlowCircularImage 圆形发光图像 MagicFish 灵动的小鱼 ImageHelper 支持动图的编辑器 FramelessWindow 无边框窗口 PolygonWindow 多边形窗口 HistoryEditor 历史编辑器 ( 支持历史搜索 & 关键字匹配 ) VideoOutput Qml中支持原始视频图像格式(YUV / RGB) 许可证 使用 MIT LICENSE 开发环境 windows 10，Qt 5.13.0
QML插件QML如何构建第三方包
jiangxiaoyu20的博客
11-06 1005
一、模块的定义 在使用QML时，我们常常看到类似这样的语句： import QtQuick 2.0 import QtQuick 2.0 通过这些import语句，我们就能使用QML中的相关控件了。 其实这就是导入模块的意思，它包括3个部分：import关键字、模块名称、版本号。 模块是一种封装的方式，设计它的人可以单独更新模块内容，然后更新版本号，对使用模块的人没有影响。在项目中，不同窗口可以使...
Python网络爬虫与信息提取 第1周网络爬虫之规则 单元3：Requests库网络爬虫实战
qq_37975179的博客
08-28 1万+
【代码】Python网络爬虫与信息提取 第1周网络爬虫之规则 单元3：Requests库网络爬虫实战。
HTMLTestRunner
热门推荐
weixin_30346033的博客
11-29 3万+
1 #-*- coding: utf-8 -*- 2 """ 3 A TestRunner for use with the Python unit testing framework. It 4 generates a HTML report to show the result at a glance. 5 6 The simplest wa...
QT Quick QML 实例之 Popup 弹出界面
火山上的企鹅
03-12 6335
在 QML 文件中，不论子文件有多少层，只需在根节点文件中添加 Popup 组件，都可以在界面中弹出置顶。
QML控件类型：Popup
友善啊，朋友的博客
02-12 7629
一、描述 Popup 是弹出式界面控件的基本类型。它可以与 Window 或 ApplicationWindow 一起使用。 import QtQuick.Window import QtQuick.Controls ApplicationWindow { id: window width: 400 height: 400 visible: true Button { text: "Open" onClicked: popup
QML 仿ElementUI的基础控件库
Aike_li的博客
09-01 3470
本篇记录一下自己写的一些QML控件
QML 控件大全
FlyWine的博客
02-03 1万+
QML Type Container DelayButton Dial DialogButtonBox Dialog Drawer Menu MenuBar Overlay PageIndicator RangeSlider ScrollView SpinBox StackView SwipeView Switch TabBar ToolBar ToolSeparator ToolTip Tumb
qml Popup弹出控件使用
chenyijun的专栏
05-10 4557
开发环境Qt5.13.1 window10 //main.qml import QtQuick 2.13 import QtQuick.Window 2.13 import QtQuick.Controls 2.5 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") ...
qml 弹出自定义窗口(模态对话框)
07-16
该代码是使用qml实现创建模态对话框
qml弹出自定义窗口
07-16
该代码包含窗口自定义窗口，自定义信号等内容
QT5各类控件合集包好常用(QML)
03-18
QT开发的小工具包，包含一些QT GUI开发相关的功能何及，有文本类，计算类，工具类，可以作为学习或者基础进行修改定制；
一套完整的强大的qml自定义控件
04-20
一套完整的自定义的qmlGUI控件，功能强大完全可以拿去开发项目而不用重复造轮子。包括Button，Calendar，CheckBox，ComboBox，CtrlDialog，DateEdit，DatePicker，Dialog，FileDialog，ImageButton，Label，LineEdit...
qml 类似移动端时间设置控件
01-07
qml实现一个类似手机端闹钟或其它时间设置控件。可以用ListView实现其效果，但是QML提供有现成的控件可以用，所以要实现这个效果更方便。 博客地址：https://blog.csdn.net/luoyayun361
QML控件关系图
04-05
QML 控件关系图 大体了解整个框架 各种组件 继承
QML之Text控件实现信息滚动显示
10-26
该测试例子使用的QT版本为5.12，实现的Text控件信息的来回循环显示，以及信息循环从头显示。
【OpenGL实践08】现代渲染管线在GLUT和Pygame和Qt.QOpenGLWidget上各自的实现代码
gongdiwudu的专栏
04-19 923
据说QOpenGLWidget是用来取代QGLWidget的继承者，我们试图将GLUT上的旧代码改成QOpenGLWidget，本以为差别不大，轻易搞定，经实践发现要付出极大努力才能完成。经多次实验发现GLUT窗口、Pygame窗口、Qt.QOpenGLWidget上的实现方法无法兼容，甚至GL方法都不同，经好多天的百度查询，终于总结出各自的实现方法。作文以记录。
在Qt creator中使用多光标
最新发布
m0_61629312的博客
04-22 291
键，并用鼠标左键在文本编辑器中选择多个光标位置。你可以选择多个不同的位置，或者选择整个文件中的所有匹配项。然后，你可以在这些光标位置上同时进行编辑，输入相同或不同的文本，或者进行其他编辑操作。多光标模式允许你在同一时间在多个光标位置进行编辑，从而可以更快地进行一些重复性的编辑操作。Qt Creator 支持多光标模式。2024年4月22日，周一下午。要启用多光标模式，请按住。
qml 怎么监控 qml 控件 操作
04-10
在QML中，可以通过信号和槽机制来监控和响应QML控件的操作。下面是一种常见的方法： 1. 首先，在QML中定义一个信号，用于表示某个操作的发生。例如，可以在一个自定义的QML控件中添加以下代码： ``` Item { signal buttonClicked() Button { text: "Click me" onClicked: { // 发送信号 buttonClicked() } } } ``` 在上述代码中，当按钮被点击时，会发出`buttonClicked`信号。 2. 然后，在QML中使用该自定义控件，并连接信号到一个JavaScript函数或者QML中的一个函数。例如： ``` MyCustomControl { onButtonClicked: { console.log("Button clicked!") // 执行其他操作 } } ``` 在上述代码中，当`buttonClicked`信号被发出时，会执行`onButtonClicked`函数，可以在该函数中编写对应的操作逻辑。 这样，当按钮被点击时，会触发信号并执行相应的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qtc++开发者

你的鼓励是我们创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值