Qt qml 自定義訊息提示框
版權宣告：本文為博主原創文章，遵循 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/art