文档章节

Qt qml 自定义消息提示框

shzwork
 shzwork
发布于 09/21 23:51
字数 752
阅读 17
收藏 0

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/a844651990/article/details/78376767
Qt qml 自定义消息提示框
  QtQuick有提供比较传统的信息提示框MessageDialog,但是实际开发过程并不
太能满足我们的需求。下面是根据controls2模块中Dialog控件自定义的简单的信息提示框。

可以根据信息的多少来自动调节信息框的大小:

下面上代码:
1
MsgDialog.qml

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Item {
    id: root
    anchors.centerIn: parent
    //提示框内容
    property alias tipText: msg.text
    //提示框颜色
    property string backGroundColor: "white"
    property Item parentItem : Rectangle {}

    //Dialog header、contentItem、footer之间的间隔默认是12
    // 提示框的最小宽度是 100
    width: {
        if(msg.implicitWidth < 100 || msg.implicitWidth == 100)
            return 100;
        else
            return msg.implicitWidth > 300 ? 300 + 24 : (msg.implicitWidth + 24);
    }
    height: msg.implicitHeight + 24 + 100

    Dialog {
        id: dialog
        width: root.width
        height: root.height
        modal: true
        background: Rectangle {
            color: backGroundColor
            anchors.fill: parent
            radius: 5
        }
        header: Rectangle {
            width: dialog.width
            height: 50
            border.color: backGroundColor
            radius: 5
            Image {
                width: 40
                height: 40
                anchors.centerIn: parent
                source: "/images/warning_48.png"
            }
        }
        contentItem: Rectangle {
            border.color: backGroundColor
            color: backGroundColor
            Text {
                anchors.fill: parent
                anchors.centerIn: parent
                font.family: "Microsoft Yahei"
                color: "gray"
                text: tipText
                wrapMode: Text.WordWrap
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter

            }
        }
        footer: Rectangle {
            width: msg.width
            height: 50
            border.color: backGroundColor
            color: backGroundColor
            radius: 5
            Button {
                anchors.centerIn: parent
                width: 80
                height: 30
                background: Rectangle {
                    anchors.centerIn: parent
                    width: 80
                    height: 30
                    radius: 5
                    border.color: "#0f748b"
                    border.width: 2
                    color: backGroundColor
                    Text {
                        anchors.centerIn: parent
                        font.family: "Microsoft Yahei"
                        font.bold: true
                        color: "#0f748b"
                        text: "OK"
                    }
                }
                onClicked: {
                    dialog.close();
                }
            }
        }
    }

    //利用Text 的implicitWidth属性来调节提示框的大小
    //该Text的字体格式需要与contentItem中的字体一模一样
    Text {
        id: msg
        visible: false
        width: 300
        wrapMode: Text.WordWrap
        font.family: "Microsoft Yahei"
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
    }

    function openMsg() {
        root.x = (parent.width - dialog.width) * 0.5
        root.y = (parent.height - dialog.height) * 0.5
        dialog.open();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
在做这个控件的时候发现了一个问题,就是当我们利用Loader加载控件并且该控件使用了controls2模块时,把loader的asynchronous属性设置为true的时候,会报错”Object destroyed during incubation”,目前还没有找到解决的办法,有知道的同学可以交流一下。。。。

注意:作者使用的是Qt5.9版本,文章中使用的有些属性是从Qt5.8才开始有的!

源码下载: http://download.csdn.net/download/a844651990/10042941
————————————————
版权声明:本文为CSDN博主「FlyWM_」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/a844651990/article/details/78376767

本文转载自:https://blog.csdn.net/a844651990/article/details/78376767

shzwork
粉丝 15
博文 817
码字总数 10675
作品 0
厦门
私信 提问
Qt使用教程创建移动应用程序(二)

<Qt Enterprise最新版下载> 创建Accelbubble主视图 当您倾斜设备时应用程序的主视图会显示一个SVG泡沫图像在屏幕上移动。为了在项目中使用Bluebubble.svg,您可以将其复制到项目目录中(QML...

Miss_Hello_World
2016/01/06
31
0
《Qt 实战一二三》

简介 “我们来自Qt分享&&交流,我们来自QML分享&&交流”,不管你是笑了,还是笑了,反正我们是认真的。我们就是要找寻一种Hold不住的状态,来开始每一天的点滴分享,我们是一个有激情,有态度...

u011012932
2015/12/12
0
0
Qt 5.8 正式发布, C++ 跨平台界面库

Qt 5.8 发布了。Qt 是一个跨平台的 C++ 图形用户界面应用程序框架。它提供给开发者建立图形用户界面所需的功能,广泛用于开发 GUI 程序,也可用于开发非 GUI 程序。Qt 是完全面向对象的,很容...

达尔文
2017/01/24
9.5K
39
Qt Quick综合实例之文件查看器

如果你基于Qt SDK 5.3.1来创建一个Qt Quick App项目,项目模板为你准备的main.qml文档的根元素是ApplicationWindow或Window。这次我们就以ApplicationWindow为例,围绕着它实现一个综合实例:...

foruok
2014/09/02
0
0
Qt Quick实现的涂鸦程序

之前一直以为 Qt Quick 里 Canvas 才可以自绘,后来发觉不是,原来还有好几种方式都可以绘图!可以使用原始的 OpenGL(Qt Quick 使用 OpenGL 渲染),可以构造QSGNode 来绘图,还可以使用 QP...

foruok
2014/11/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

为构建社交关系链手淘都做了啥?

作者|王卫(泓冰) 出品|阿里巴巴新零售淘系技术部 01、淘宝社交关系推荐的背景 1、互联网下半场到来:互联网的下半场,人口红利消失,各大平台需要对用户做精细化运营,用户的增长和留存是每一...

阿里云官方博客
5分钟前
2
0
Iaas/Paas/Saas有何区别,一个故事告诉你

云计算有三种服务模式,IaaS,PaaS和SaaS。单从英文全称去理解,他们分别是“基础设施即服务”“平台即服务”和“软件即服务”。 这样翻译过来可不好理解,但是我们可以举个例子。现在我们就以...

JEPaaS云平台
12分钟前
3
0
温度传感器怎么测好坏

  温度传感器也就是负温度系数热敏电阻,温度越高,电阻越小,测量时先看其阻值能不能根据温度的变化而变,再看其变化的阻值是不是在标定的范围之内。   有以下四种方法;   1、若是有...

仙溪
13分钟前
2
0
zk中ZooKeeperServer解析

内部类 ChangeRecord 处理PrepRP和FinalRP之间的信息 static class ChangeRecord { ChangeRecord(long zxid, String path, StatPersisted stat, int childCount, List<ACL> acl) {......

writeademo
23分钟前
3
0
LNMP---安装worrdpress、discuz,域名重定向,用户认证,nginx访问日志

4.34 安装wordpress 4.35 安装discuz 4.36 域名重定向 4.37 用户认证 4.38 nginx访问日志 一、安装wordpress 创建博客: 添加一个博客的虚拟主机 blog.tobe.com.conf 做如下更改 安装博客wor...

tobej
25分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部