qml消息、加载、模态弹窗组件

已于 2025-06-16 17:12:46 修改
阅读量435 收藏 12
点赞数 5
分类专栏： qml qt 文章标签： 前端 qt qml
于 2025-06-16 16:48:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaolanglang_/article/details/148653203
版权

1.消息提示框

 API：

属性类型默认值说明
textstring""对话框文本
durationint1500对话框持续时间
typestring""

对话框类型，值为空使用默认类型，

“success”, “error”, “warning”, “info”

测试代码： 

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15
import "qrc:/components_qml/ShowToast"

ApplicationWindow {
    id: mainWindow
    width: 1000
    height: 700
    visible: true
    title: "QML消息对话框"
    color: "#F5F7FA"

    //引用消息对话框
    ShowToast {
        id: toastDialog
    }

    // 主界面内容
    ColumnLayout {
        anchors.centerIn: parent
        spacing: 30

        Text {
            text: "消息对话框演示"
            font.pixelSize: 32
            font.weight: Font.Bold
            color: "#2C3E50"
            Layout.alignment: Qt.AlignHCenter
        }

        // 对话框类型选择
        RowLayout {
            spacing: 15
            Layout.alignment: Qt.AlignHCenter
            Rectangle {
                width: 10
                height: 10
                radius: 5
                color: "#3498DB"
            }
            Text {
                text: "选择对话框类型:"
                font.pixelSize: 18
                color: "#34495E"
            }
        }

        // 按钮区域
        GridLayout {
            columns: 3
            columnSpacing: 20
            rowSpacing: 20
            Layout.alignment: Qt.AlignHCenter

            // 基础对话框
            DialogButton {
                text: "基础对话框"
                bgColor: "#3498DB"
                onClicked: {
                    toastDialog.text = "这是一个字符串";
                    toastDialog.show();
                }
            }

            DialogButton {
                text: "成功对话框"
                bgColor: "#2ECC71"
                onClicked: {
                    toastDialog.text = "操作成功！";
                    toastDialog.type = "success";
                    toastDialog.show();
                }
            }

            DialogButton {
                text: "错误对话框"
                bgColor: "#E74C3C"
                onClicked: {
                    toastDialog.text = "操作失败，请重试！";
                    toastDialog.type = "error";
                    toastDialog.show();
                }
            }

            DialogButton {
                text: "警告对话框"
                bgColor: "#F39C12"
                onClicked: {
                    toastDialog.text = "警告：资源不足";
                    toastDialog.type = "warning";
                    toastDialog.show();
                }
            }

            DialogButton {
                text: "信息对话框"
                bgColor: "#3498DB"
                onClicked: {
                    toastDialog.text = "您有3条新消息";
                    toastDialog.type = "info";
                    toastDialog.show();
                }
            }

        }

    }

    // 对话框按钮组件
    component DialogButton: Rectangle {
        property alias text: buttonText.text
        property alias icon: iconImage.source
        property alias bgColor: bgRect.color
        signal clicked

        width: 250
        height: 80
        radius: 16
        color: "transparent"

        Rectangle {
            id: bgRect
            anchors.fill: parent
            radius: 16
            layer.enabled: true
            layer.effect: DropShadow {
                verticalOffset: 3
                radius: 8
                samples: 16
                color: "#30000000"
            }
        }

        RowLayout {
            anchors.centerIn: parent
            spacing: 15
            Image {
                id: iconImage
                sourceSize: Qt.size(28, 28)
            }
            Text {
                id: buttonText
                font.pixelSize: 18
                font.weight: Font.Medium
                color: "white"
            }
        }

        MouseArea {
            anchors.fill: parent
            cursorShape: Qt.PointingHandCursor
            onClicked: parent.clicked()
        }
    }

}

2.加载提示框

API：

属性类型默认值说明
textstring""对话框文本
showProgressboolfalse是否显示进度值
progressint0进度值
opaqueBackgroundbooltrue不透明背景

测试代码：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15
import "qrc:/components_qml/ShowLoading"

ApplicationWindow {
    id: mainWindow
    width: 1000
    height: 700
    visible: true
    title: "QML消息对话框"
    color: "#F5F7FA"

    //引用加载提示框
    ShowLoading {
        id: loadingIndicator
    }

    // 主界面内容
    ColumnLayout {
        anchors.centerIn: parent
        spacing: 30

        Text {
            text: "消息对话框演示"
            font.pixelSize: 32
            font.weight: Font.Bold
            color: "#2C3E50"
            Layout.alignment: Qt.AlignHCenter
        }

        // 对话框类型选择
        RowLayout {
            spacing: 15
            Layout.alignment: Qt.AlignHCenter
            Rectangle {
                width: 10
                height: 10
                radius: 5
                color: "#3498DB"
            }
            Text {
                text: "选择对话框类型:"
                font.pixelSize: 18
                color: "#34495E"
            }
        }

        // 按钮区域
        GridLayout {
            columns: 3
            columnSpacing: 20
            rowSpacing: 20
            Layout.alignment: Qt.AlignHCenter

            DialogButton {
                text: "显示加载提示框"
                bgColor: "#3498DB"
                onClicked: {
                    loadingIndicator.text = "正在加载数据...";
                    loadingIndicator.show();
                    // 模拟加载过程
                    loadingTimer.start();
                }
            }

            DialogButton {
                text: "带进度的加载框"
                bgColor: "#9B59B6"
                onClicked: {
                    loadingIndicator.text = "正在处理...";
                    loadingIndicator.showProgress = true;
                    loadingIndicator.show();
                    progressTimer.start();
                }
            }

            DialogButton {
                text: "透明加载框"
                bgColor: "#1ABC9C"
                onClicked: {
                    loadingIndicator.text = "后台处理中...";
                    loadingIndicator.opaqueBackground = false;
                    loadingIndicator.show();
                    loadingTimer.start()
                }
            }

        }

    }

    // 定时器 - 模拟加载过程
    Timer {
        id: loadingTimer
        interval: 2000
        onTriggered: {
            loadingIndicator.hide()
        }
    }

    // 定时器 - 模拟进度更新
    Timer {
        id: progressTimer
        interval: 100
        repeat: true
        property int progress: 0
        onTriggered: {
            progress += 2
            loadingIndicator.progress = progress
            if (progress >= 100) {
                progress = 0
                progressTimer.stop()
                loadingIndicator.hide()
            }
        }
    }

    // 对话框按钮组件
    component DialogButton: Rectangle {
        property alias text: buttonText.text
        property alias icon: iconImage.source
        property alias bgColor: bgRect.color
        signal clicked

        width: 250
        height: 80
        radius: 16
        color: "transparent"

        Rectangle {
            id: bgRect
            anchors.fill: parent
            radius: 16
            layer.enabled: true
            layer.effect: DropShadow {
                verticalOffset: 3
                radius: 8
                samples: 16
                color: "#30000000"
            }
        }

        RowLayout {
            anchors.centerIn: parent
            spacing: 15
            Image {
                id: iconImage
                sourceSize: Qt.size(28, 28)
            }
            Text {
                id: buttonText
                font.pixelSize: 18
                font.weight: Font.Medium
                color: "white"
            }
        }

        MouseArea {
            anchors.fill: parent
            cursorShape: Qt.PointingHandCursor
            onClicked: parent.clicked()
        }
    }

}

3.模态弹窗

API：

属性名类型默认值说明
namestring""模态弹窗名称
titlestring"对话框"标题文本
contentstring“”对话框内容
confirmTextstring“确定”确认按钮文本
cancelTextstring"取消"取消按钮文本
typestring"info"对话框类型: info, success, error, warning, input, select
inputTextstring""输入对话框文本
selectOptionsarray[]选择对话框列表
currentIndexint0当前选择对话框索引

返回值：

属性名类型说明
namestring当前操作模态窗名称
clickedstring点击的按钮类型，“confirm”，“cancel”
inputTextstring输入对话框内容
selectedIndexint选择对话框索引

 测试代码：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15
import "qrc:/components_qml/ShowModal"

ApplicationWindow {
    id: mainWindow
    width: 1000
    height: 700
    visible: true
    title: "QML模态对话框"
    color: "#F5F7FA"

    //引用模态对话框
    ShowModal {
        id: modalDialog
        onBtClicked: (res)=> {
            console.log(res.name);
            if(res.clicked==="confirm")
                console.log("点击了确认按钮");
            else if(res.clicked==="cancel")
                console.log("点击了取消按钮");
        }
    }

    // 主界面内容
    ColumnLayout {
        anchors.centerIn: parent
        spacing: 30

        Text {
            text: "模态对话框演示"
            font.pixelSize: 32
            font.weight: Font.Bold
            color: "#2C3E50"
            Layout.alignment: Qt.AlignHCenter
        }

        // 对话框类型选择
        RowLayout {
            spacing: 15
            Layout.alignment: Qt.AlignHCenter
            Rectangle {
                width: 10
                height: 10
                radius: 5
                color: "#3498DB"
            }
            Text {
                text: "选择对话框类型:"
                font.pixelSize: 18
                color: "#34495E"
            }
        }

        // 按钮区域
        GridLayout {
            columns: 3
            columnSpacing: 20
            rowSpacing: 20
            Layout.alignment: Qt.AlignHCenter

            // 基础对话框
            DialogButton {
                text: "基础对话框"
                bgColor: "#3498DB"
                onClicked: {
                    modalDialog.name = "基础对话框";
                    modalDialog.title = "确认操作";
                    modalDialog.content = "您确定要删除这个项目吗？此操作不可撤销。";
                    modalDialog.confirmText = "删除";
                    modalDialog.cancelText = "取消";
                    modalDialog.type = "info";
                    modalDialog.show();
                }
            }

            // 警告对话框
            DialogButton {
                text: "警告对话框"
                bgColor: "#F39C12"
                onClicked: {
                    modalDialog.name = "警告对话框";
                    modalDialog.title = "磁盘空间不足";
                    modalDialog.content = "您的系统磁盘空间已使用95%，请清理空间以避免系统运行缓慢。";
                    modalDialog.confirmText = "立即清理";
                    modalDialog.cancelText = "稍后提醒";
                    modalDialog.type = "warning";
                    modalDialog.show();
                }
            }

            // 错误对话框
            DialogButton {
                text: "错误对话框"
                bgColor: "#E74C3C"
                onClicked: {
                    modalDialog.name = "错误对话框";
                    modalDialog.title = "操作失败";
                    modalDialog.content = "无法完成请求的操作，请检查您的网络连接或系统权限设置。";
                    modalDialog.confirmText = "重试";
                    modalDialog.cancelText = "取消";
                    modalDialog.type = "error";
                    modalDialog.show();
                }
            }

            // 成功对话框
            DialogButton {
                text: "成功对话框"
                bgColor: "#2ECC71"
                onClicked: {
                    modalDialog.name = "成功对话框";
                    modalDialog.title = "操作成功";
                    modalDialog.content = "您的文件已成功上传到云端存储。您可以通过文件管理器访问它。";
                    modalDialog.confirmText = "查看文件";
                    modalDialog.cancelText = "关闭";
                    modalDialog.type = "success";
                    modalDialog.show();
                }
            }

            // 输入对话框
            DialogButton {
                text: "输入对话框"
                bgColor: "#9B59B6"
                onClicked: {
                    modalDialog.name = "输入对话框";
                    modalDialog.title = "创建新项目";
                    modalDialog.content = "请输入新项目的名称：";
                    modalDialog.confirmText = "创建";
                    modalDialog.cancelText = "取消";
                    modalDialog.type = "input";
                    modalDialog.inputText = "未命名项目";
                    modalDialog.show();
                }
            }

            // 选择对话框
            DialogButton {
                text: "选择对话框"
                bgColor: "#1ABC9C"
                onClicked: {
                    modalDialog.name = "选择对话框";
                    modalDialog.title = "选择文件类型";
                    modalDialog.content = "请选择您要导出的文件格式：";
                    modalDialog.confirmText = "导出";
                    modalDialog.cancelText = "取消";
                    modalDialog.type = "select";
                    modalDialog.selectOptions = ["PDF文档 (.pdf)", "Word文档 (.docx)", "Excel表格 (.xlsx)", "图片 (.png)"];
                    modalDialog.currentIndex = 0;
                    modalDialog.show();
                }
            }
        }

    }

    // 对话框按钮组件
    component DialogButton: Rectangle {
        property alias text: buttonText.text
        property alias icon: iconImage.source
        property alias bgColor: bgRect.color
        signal clicked

        width: 250
        height: 80
        radius: 16
        color: "transparent"

        Rectangle {
            id: bgRect
            anchors.fill: parent
            radius: 16
            layer.enabled: true
            layer.effect: DropShadow {
                verticalOffset: 3
                radius: 8
                samples: 16
                color: "#30000000"
            }
        }

        RowLayout {
            anchors.centerIn: parent
            spacing: 15
            Image {
                id: iconImage
                sourceSize: Qt.size(28, 28)
            }
            Text {
                id: buttonText
                font.pixelSize: 18
                font.weight: Font.Medium
                color: "white"
            }
        }

        MouseArea {
            anchors.fill: parent
            cursorShape: Qt.PointingHandCursor
            onClicked: parent.clicked()
        }
    }

}

组件下载：

https://download.youkuaiyun.com/download/xiaolanglang_/91034525

使用说明：将文件解压到项目目录下，在.pro文件中添加

include($$PWD/components/components.pri)

如有不懂的问题请私信于我，或添加QQ(1980958078)

QML 学习
weixin_46383789的博客
03-18 1878
简单实现一个model，需要实现这三个函数。
QML 弹窗控件：Popup的基本用法与样式
u011186532的专栏
04-10 2107
本文通过实例详细介绍了Qt QML中Popup组件的多种用法。从简单的基础弹窗，到模态弹窗、自定义样式弹窗和带动画效果的弹窗，涵盖了Popup组件的主要特性和使用场景。
QML实现桌面右下角弹窗
龚建波
06-21 2145
实现效果 这次制作的桌面右下角弹窗，主要功能有透明度和位置动画、定时关闭、鼠标放在上面暂留。 实现思路 首先，我们需要获取桌面大小，然后 move 到右下角去，这里借助的 Screen： //初始位置，在屏幕右下角 x: Screen.desktopAvailableWidth-width y: Screen.desktopAvailableHeight 对于动画，我用的属性动画配合动画组。显示时先启动显示动画，动画结束启动关闭定时器，关闭时调用关闭动画。 对于内容区域，我直接放了一个 L
Pyside6联合QML实现消息弹窗提示
honor_zhang的博客
04-18 551
本文主要想描述的问题为Python与QML如何互相通信，借助一个消息弹窗的例子来展现，如有不到之处欢迎批评指正。
QML Popup弹窗置于最顶层，实现点击位置该弹出窗口下方的任何其他层组件，Popup弹窗都不会关闭
smartvxworks的博客
07-02 2632
如果用户不小心点击了弹出窗口之外，则点击位置该弹出窗口下方的任何其他层组件，Popup弹窗都不会关闭，模态弹出窗口通常只有在按下退出键时才会关闭，此功能设置closePolicy :Popup.CloseOnEscape属性很关键，可以帮助你实现 import QtQuick.Window 2.2 import QtQuick.Controls 2.12 Popup { palette.text: "red" closePolicy :Popup.CloseOnEscape Colu
[Qt6][QML][教程]QML创建一个漂亮的音乐显示弹窗
qq_38844263的博客
01-18 1763
使用Qt6.4.1创建一个漂亮的音乐显示界面
QML Popup，屏蔽其他控件，使除了Popup控件的其他控件不再响应
smartvxworks的博客
07-05 1243
实现效果： 策略： 1.让Popup 全屏化展示 width: 1024; height: 768; //因为我的屏幕就是1024*768分辨率的，所以此时Popup 是全屏显示的，其他控件都在下方，是点不到的 2.背景透明化 background:transparent // 这里让Popup 的背景透明化，所以其下面的控件是可以看到的，但是是操作不到的 3.设置点击属性 closePolicy :Popup.CloseOnEscape ////Popup.CloseOnEsc
Qt Quick、QML01——QML内容结构介绍
a123123sdf的博客
11-28 1460
font属性的类型本身是一个对象,这个对象又有pixelSize,bold, italic、underline等属性。对于类型为对象的属性值，可以使用“.”操作符展开对象的每一个成员对其赋值，也可以通过分组符号(一对花括号）把要赋值的成员放在一起给它们赋值。对于后者，其形式就和对象的定义一样了，起码看起来没有区别。所以，又可以这么理解上面的示例:Text对象内聚合了font对象。OK，就是聚合。来自《Qt Quick核心编程》Text {
QML可视化组件设计
QT性能优化QT原理源码QT界面美化
11-09 1052
QML简介QML简介QML（Qt Meta Language）是一种基于JavaScript的声明性语言，用于描述用户界面。它是Qt框架的一部分，专门用于构建富客户端应用程序。QML提供了一种简洁、易于理解的方式来描述用户界面组件，使得界面设计与应用程序逻辑分离，提高了开发效率。QML的特点声明性语法,QML使用声明性语法，使得界面描述更加简洁明了。开发者只需描述界面元素及其属性，而无需关注实现细节。组件化设计,QML支持组件化设计，允许开发者创建可重用的界面组件。
Qml弹出右侧信息弹窗QmlShowSideWindow.7z
11-22
在QML（Qt Quick）中，创建一个弹出右侧的信息窗口是一种常见的用户界面设计，用于显示通知、消息或者辅助信息。QmlShowSideWindow项目很可能包含了一系列的QML文件和资源，用于演示如何实现这样的功能。尽管没有...
qml实现的侧边弹窗效果
03-15
在本项目中，“qml实现的侧边弹窗效果”是一个使用QML在Ubuntu 16.04环境下，结合Qt 5.7.1版本构建的示例应用。这个项目可能包含一个名为"popUpWin"的主文件，该文件是QML脚本，用于实现从侧边弹出的窗口效果。 QML...
qml自定义模态对话框
12-06
创建自定义模态对话框的第一步是定义一个新的QML组件。这个组件将包含对话框的布局、样式以及所有相关的交互逻辑。下面是一个基础的自定义模态对话框的结构： ```qml import QtQuick 2.0 import QtQuick.Controls ...
qml 弹出自定义窗口(模态对话框)
07-16
2. **使用自定义组件**：在主QML文件中，我们可以通过`Loader`组件来动态加载并显示这个自定义对话框。当需要弹出对话框时，设置`Loader.source`属性为对话框组件的路径，并调用`Loader.item.open()`方法。 ```qml ...
小记:把react项目从web迁移到electron
iamtsfw的专栏
06-15 253
使用vite构建,包含了react react-router-dom tailwindcss mui 主副进程通讯。routemain.jsx 路由定义文件。company.jsx 示例文件。终端里:npm install。解压后使用vscode打开。然后npm run dev。home.jsx 主页文件。main.jsx 启动文件。windows系统计算机。
前端面试专栏-基础篇：6. 跨域方案全对比（CORS/JSONP/Nginx）与安全攻防
爱分享的程序员
06-13 1342
协议（Protocol）：如http、https、ftp等域名（Domain）：包括主域名和子域名端口（Port）：默认端口可以不显式写出只有当这三个要素完全相同时，才被认为是同源。以下是一些典型示例说明：（HTTP协议）（HTTPS协议）→ 不同源（主域名）（子域名）→ 不同源（完整域名）（不同顶级域名）→ 不同源（8080端口）（8081端口）→ 不同源（默认80端口）（指定8080端口）→ 不同源。
随记 minio的图片跨域问题
zqx_7的博客
06-11 277
文章摘要：开发时使用IP访问无问题，上线后因IP与域名不同源出现跨域问题。尝试通过nginx代理但误指向前端静态资源。解决方案是单独为图片访问地址配置子域名：先绑定IP，申请SSL证书（支持动态域名），然后正确配置nginx代理规则。最终可通过配置好的专属域名访问图片资源，有效解决跨域问题。整个处理过程涉及域名绑定、SSL配置和nginx代理设置三个关键步骤。（148字）
山东大学《Web数据管理》期末复习宝典【万字解析！】
十二月的猫
06-12 1582
Web数据管理技术涵盖爬虫（URL判重、分布式架构）、网页解析（正则、DOM、Scrapy）、数据抽取（包装器生成与评价指标）。文本处理包括分词（HMM）、表示方法（词袋、TF-IDF、Word2Vec）及分类模型（fastText、TextCNN）。图像处理涉及特征提取（颜色直方图、HOG/SIFT），大语言模型重点分析Token化技术。结合工具（Nutch、BeautifulSoup）实现全流程解决方案。
前端错误捕获
最新发布
棉花没有糖的博客
06-15 662
/ 使用try {throw new NetworkError('请求失败', res.status);showToast(`网络错误${} } // 使用 try {throw new NetworkError('请求失败' , res . status);showToast(` 网络错误 ${ error . statusCode } `);} }} } // 使用 try {throw new NetworkError('请求失败' , res . status);
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小浪浪、

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

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

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

打赏作者

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

抵扣说明：

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

余额充值