Skip to content

Commit a21bc5f

Browse files
committed
Feat: 添加[DelToolTip]实现.
1 parent 5371486 commit a21bc5f

File tree

9 files changed

+320
-0
lines changed

9 files changed

+320
-0
lines changed

DelButton/DelButton.qml

+1
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ Button {
4949
}
5050
}
5151
property color colorBg: {
52+
if (type == DelButton.Type_Link) return "transparent";
5253
if (enabled) {
5354
switch(control.type)
5455
{

DelToolTip/CMakeLists.txt

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
cmake_minimum_required(VERSION 3.16)
2+
3+
project(DelToolTip VERSION 1.0 LANGUAGES CXX)
4+
5+
set(CMAKE_AUTOMOC ON)
6+
set(CMAKE_AUTORCC ON)
7+
8+
find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Quick)
9+
find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Quick)
10+
11+
set(SOURCES main.cpp)
12+
13+
qt5_add_resources(SOURCES qml.qrc)
14+
15+
add_executable(${PROJECT_NAME} ${SOURCES} "${CMAKE_SOURCE_DIR}/common/QmlControls_Resource.rc")
16+
17+
set_target_properties(${PROJECT_NAME} PROPERTIES
18+
WIN32_EXECUTABLE TRUE
19+
RUNTIME_OUTPUT_DIRECTORY $<IF:$<BOOL:${BUILD_OUTPUT_DIRECTORY}>,${BUILD_OUTPUT_DIRECTORY},${CMAKE_RUNTIME_OUTPUT_DIRECTORY}>
20+
)
21+
22+
target_link_libraries(${PROJECT_NAME} PRIVATE
23+
Qt::Quick
24+
)

DelToolTip/DelToolTip.pro

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
QT += quick
2+
3+
# You can make your code fail to compile if it uses deprecated APIs.
4+
# In order to do so, uncomment the following line.
5+
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0
6+
7+
SOURCES += \
8+
main.cpp
9+
10+
RESOURCES += qml.qrc
11+
12+
# Additional import path used to resolve QML modules in Qt Creator's code model
13+
QML_IMPORT_PATH =
14+
15+
# Additional import path used to resolve QML modules just for Qt Quick Designer
16+
QML_DESIGNER_IMPORT_PATH =
17+
18+
# Default rules for deployment.
19+
qnx: target.path = /tmp/$${TARGET}/bin
20+
else: unix:!android: target.path = /opt/$${TARGET}/bin
21+
!isEmpty(target.path): INSTALLS += target

DelToolTip/DelToolTip.qml

+162
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
import QtQuick 2.15
2+
import QtGraphicalEffects 1.15
3+
import QtQuick.Templates 2.15 as T
4+
5+
T.ToolTip {
6+
id: control
7+
8+
enum Position
9+
{
10+
Position_Top = 0,
11+
Position_Bottom = 1,
12+
Position_Left = 2,
13+
Position_Right = 3
14+
}
15+
16+
property bool animationEnabled: true
17+
property bool arrowVisible: false
18+
property int position: DelToolTip.Position_Top
19+
property color colorText: "#000"
20+
property color colorBg: "#fff"
21+
22+
component Arrow: Canvas {
23+
onWidthChanged: requestPaint();
24+
onHeightChanged: requestPaint();
25+
onColorBgChanged: requestPaint();
26+
onPaint: {
27+
var ctx = getContext("2d");
28+
ctx.fillStyle = colorBg;
29+
ctx.beginPath();
30+
switch (position) {
31+
case DelToolTip.Position_Top: {
32+
ctx.moveTo(0, 0);
33+
ctx.lineTo(width, 0);
34+
ctx.lineTo(width * 0.5, height);
35+
} break;
36+
case DelToolTip.Position_Bottom: {
37+
ctx.moveTo(0, height);
38+
ctx.lineTo(width, height);
39+
ctx.lineTo(width * 0.5, 0);
40+
} break;
41+
case DelToolTip.Position_Left: {
42+
ctx.moveTo(0, 0);
43+
ctx.lineTo(0, height);
44+
ctx.lineTo(width, height * 0.5);
45+
} break;
46+
case DelToolTip.Position_Right: {
47+
ctx.moveTo(width, 0);
48+
ctx.lineTo(width, height);
49+
ctx.lineTo(0, height * 0.5);
50+
} break;
51+
}
52+
ctx.closePath();
53+
ctx.fill();
54+
}
55+
property color colorBg: control.colorBg
56+
}
57+
58+
x: {
59+
switch (position) {
60+
case DelToolTip.Position_Top:
61+
case DelToolTip.Position_Bottom:
62+
return (__private.controlParentWidth - implicitWidth) * 0.5;
63+
case DelToolTip.Position_Left:
64+
return -implicitWidth - 4;
65+
case DelToolTip.Position_Right:
66+
return __private.controlParentWidth + 4;
67+
}
68+
}
69+
y: {
70+
switch (position) {
71+
case DelToolTip.Position_Top:
72+
return -implicitHeight - 4;
73+
case DelToolTip.Position_Bottom:
74+
return __private.controlParentHeight + 4;
75+
case DelToolTip.Position_Left:
76+
case DelToolTip.Position_Right:
77+
return (__private.controlParentHeight - implicitHeight) * 0.5;
78+
}
79+
}
80+
enter: Transition {
81+
NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: control.animationEnabled ? 200 : 0 }
82+
}
83+
exit: Transition {
84+
NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: control.animationEnabled ? 200 : 0 }
85+
}
86+
delay: 300
87+
padding: 0
88+
implicitWidth: implicitContentWidth
89+
implicitHeight: implicitContentHeight
90+
font {
91+
family: "微软雅黑"
92+
pixelSize: 14
93+
}
94+
closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnReleaseOutsideParent
95+
contentItem: Item {
96+
implicitWidth: __bg.width + (__private.isHorizontal ? 0 : __arrow.width)
97+
implicitHeight: __bg.height + (__private.isHorizontal ? __arrow.height : 0)
98+
99+
DropShadow {
100+
anchors.fill: __item
101+
radius: 8.0
102+
samples: 17
103+
color: "#80000000"
104+
source: __item
105+
}
106+
107+
Item {
108+
id: __item
109+
anchors.fill: parent
110+
111+
Arrow {
112+
id: __arrow
113+
x: __private.isHorizontal ? (-control.x + (__private.controlParentWidth - width) * 0.5) : 0
114+
y: __private.isHorizontal ? 0 : (-control.y + (__private.controlParentHeight - height)) * 0.5
115+
width: __private.arrowSize.width
116+
height: __private.arrowSize.height
117+
anchors.top: control.position == DelToolTip.Position_Bottom ? parent.top : undefined
118+
anchors.bottom: control.position == DelToolTip.Position_Top ? parent.bottom : undefined
119+
anchors.left: control.position == DelToolTip.Position_Right ? parent.left : undefined
120+
anchors.right: control.position == DelToolTip.Position_Left ? parent.right : undefined
121+
122+
Connections {
123+
target: control
124+
function onPositionChanged() {
125+
__arrow.requestPaint();
126+
}
127+
}
128+
}
129+
130+
Rectangle {
131+
id: __bg
132+
width: __text.implicitWidth + 14
133+
height: __text.implicitHeight + 12
134+
anchors.top: control.position == DelToolTip.Position_Top ? parent.top : undefined
135+
anchors.bottom: control.position == DelToolTip.Position_Bottom ? parent.bottom : undefined
136+
anchors.left: control.position == DelToolTip.Position_Left ? parent.left : undefined
137+
anchors.right: control.position == DelToolTip.Position_Right ? parent.right : undefined
138+
anchors.margins: 1
139+
radius: 4
140+
color: control.colorBg
141+
142+
Text {
143+
id: __text
144+
text: control.text
145+
font: control.font
146+
color: control.colorText
147+
wrapMode: Text.Wrap
148+
anchors.centerIn: parent
149+
}
150+
}
151+
}
152+
}
153+
background: Item { }
154+
155+
QtObject {
156+
id: __private
157+
property bool isHorizontal: control.position == DelToolTip.Position_Top || control.position == DelToolTip.Position_Bottom
158+
property size arrowSize: control.arrowVisible ? (isHorizontal ? Qt.size(12, 6) : Qt.size(6, 12)) : Qt.size(0, 0)
159+
property real controlParentWidth: control.parent ? control.parent.width : 0
160+
property real controlParentHeight: control.parent ? control.parent.height : 0
161+
}
162+
}

DelToolTip/main.cpp

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
#include <QGuiApplication>
2+
#include <QQmlApplicationEngine>
3+
4+
int main(int argc, char *argv[])
5+
{
6+
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
7+
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
8+
QGuiApplication::setHighDpiScaleFactorRoundingPolicy(Qt::HighDpiScaleFactorRoundingPolicy::PassThrough);
9+
#endif
10+
11+
QGuiApplication app(argc, argv);
12+
13+
QQmlApplicationEngine engine;
14+
const QUrl url(QStringLiteral("qrc:/main.qml"));
15+
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
16+
&app, [url](QObject *obj, const QUrl &objUrl) {
17+
if (!obj && url == objUrl)
18+
QCoreApplication::exit(-1);
19+
}, Qt::QueuedConnection);
20+
engine.load(url);
21+
22+
return app.exec();
23+
}

DelToolTip/main.qml

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import QtQuick 2.15
2+
import QtQuick.Controls 2.15
3+
import QtQuick.Layouts 1.15
4+
import QtQuick.Window 2.15
5+
6+
import "qrc:/../DelButton"
7+
8+
Window {
9+
width: 800
10+
height: 600
11+
visible: true
12+
title: qsTr("DelegateUI-DelToolTip")
13+
14+
GridLayout {
15+
anchors.centerIn: parent
16+
width: 400
17+
rows: 3
18+
columns: 3
19+
20+
DelButton {
21+
Layout.alignment: Qt.AlignHCenter
22+
Layout.columnSpan: 3
23+
text: qsTr("上方")
24+
25+
DelToolTip {
26+
visible: parent.hovered
27+
arrowVisible: true
28+
text: qsTr("上方文字提示")
29+
}
30+
}
31+
32+
DelButton {
33+
Layout.alignment: Qt.AlignLeft
34+
text: qsTr("左方")
35+
36+
DelToolTip {
37+
visible: parent.hovered
38+
arrowVisible: true
39+
text: qsTr("左方文字提示")
40+
position: DelToolTip.Position_Left
41+
}
42+
}
43+
44+
DelButton {
45+
Layout.alignment: Qt.AlignCenter
46+
text: qsTr("箭头中心")
47+
48+
DelToolTip {
49+
x: 0
50+
visible: parent.hovered
51+
arrowVisible: true
52+
text: qsTr("箭头中心会自动指向 parent 的中心")
53+
position: DelToolTip.Position_Top
54+
}
55+
}
56+
57+
DelButton {
58+
Layout.alignment: Qt.AlignRight
59+
text: qsTr("右方")
60+
61+
DelToolTip {
62+
visible: parent.hovered
63+
arrowVisible: true
64+
text: qsTr("右方文字提示")
65+
position: DelToolTip.Position_Right
66+
}
67+
}
68+
69+
DelButton {
70+
Layout.alignment: Qt.AlignHCenter
71+
Layout.columnSpan: 3
72+
text: qsTr("下方")
73+
74+
DelToolTip {
75+
visible: parent.hovered
76+
arrowVisible: true
77+
text: qsTr("下方文字提示")
78+
position: DelToolTip.Position_Bottom
79+
}
80+
}
81+
}
82+
}

DelToolTip/qml.qrc

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<RCC>
2+
<qresource prefix="/">
3+
<file>main.qml</file>
4+
<file>DelToolTip.qml</file>
5+
<file>../DelButton/DelButton.qml</file>
6+
</qresource>
7+
</RCC>

demonstrate/DelToolTip.gif

1.36 MB
Loading

demonstrate/DelToolTip.png

36.3 KB
Loading

0 commit comments

Comments
 (0)