├── CalendarUse ├── .gitignore ├── CalendarUse.pro ├── main.cpp ├── main.qml ├── main.qmlc └── qml.qrc ├── ColorMaker ├── colorMaker.cpp ├── colorMaker.h ├── colorMaker.pro ├── colorMaker.pro.user ├── main.cpp ├── main.qml └── qml.qrc ├── CppCallQml ├── CppCallQml.pro ├── CppCallQml.pro.user ├── main.cpp ├── main.qml ├── qml.qrc ├── widget.cpp ├── widget.h └── widget.ui ├── ListViewPhone ├── .gitignore ├── ListViewPhone.pro ├── QML │ ├── phone_list_animation.qml │ ├── phone_list_change.qml │ ├── phone_list_change_1.PNG │ ├── phone_list_change_2.PNG │ ├── phone_list_footer.PNG │ ├── phone_list_footer.qml │ ├── phone_list_header.PNG │ ├── phone_list_header.qml │ ├── phone_list_simple.PNG │ └── phone_list_simple.qml ├── main.cpp ├── main.qml └── qml.qrc ├── MyButton ├── MyButton.pro ├── MyButton.pro.user ├── MyButton.qml ├── MyIconButton.qml ├── ThreeIconButton.qml ├── image │ ├── camera.png │ ├── dianshiju.png │ ├── music.png │ ├── ok.png │ ├── ok1.png │ └── ok2.png ├── main.cpp ├── main.qml └── qml.qrc ├── MyVirualKey ├── .qmake.stash ├── Makefile ├── Makefile.Debug ├── Makefile.Release ├── QML.qrc ├── basic.pro ├── basic.pro.user ├── demo.qrc ├── main.cpp └── testKey.qml ├── QmlCallCpp ├── CppObject.cpp ├── CppObject.h ├── QmlCallCpp.pro ├── main.cpp ├── main.qml └── qml.qrc ├── README.md └── signalSlot ├── CountDownPage.qml ├── CountDownPage.qmlc ├── CountSetPage.qml ├── CountSetPage.qmlc ├── main.cpp ├── main.qml ├── main.qmlc ├── qml.qrc ├── signalSlot.pro └── signalSlot.pro.user /CalendarUse/.gitignore: -------------------------------------------------------------------------------- 1 | # This file is used to ignore files which are generated 2 | # ---------------------------------------------------------------------------- 3 | 4 | *~ 5 | *.autosave 6 | *.a 7 | *.core 8 | *.moc 9 | *.o 10 | *.obj 11 | *.orig 12 | *.rej 13 | *.so 14 | *.so.* 15 | *_pch.h.cpp 16 | *_resource.rc 17 | *.qm 18 | .#* 19 | *.*# 20 | core 21 | !core/ 22 | tags 23 | .DS_Store 24 | .directory 25 | *.debug 26 | Makefile* 27 | *.prl 28 | *.app 29 | moc_*.cpp 30 | ui_*.h 31 | qrc_*.cpp 32 | Thumbs.db 33 | *.res 34 | *.rc 35 | /.qmake.cache 36 | /.qmake.stash 37 | 38 | # qtcreator generated files 39 | *.pro.user* 40 | 41 | # xemacs temporary files 42 | *.flc 43 | 44 | # Vim temporary files 45 | .*.swp 46 | 47 | # Visual Studio generated files 48 | *.ib_pdb_index 49 | *.idb 50 | *.ilk 51 | *.pdb 52 | *.sln 53 | *.suo 54 | *.vcproj 55 | *vcproj.*.*.user 56 | *.ncb 57 | *.sdf 58 | *.opensdf 59 | *.vcxproj 60 | *vcxproj.* 61 | 62 | # MinGW generated files 63 | *.Debug 64 | *.Release 65 | 66 | # Python byte code 67 | *.pyc 68 | 69 | # Binaries 70 | # -------- 71 | *.dll 72 | *.exe 73 | 74 | -------------------------------------------------------------------------------- /CalendarUse/CalendarUse.pro: -------------------------------------------------------------------------------- 1 | QT += quick 2 | CONFIG += c++11 3 | 4 | # The following define makes your compiler emit warnings if you use 5 | # any feature of Qt which as been marked deprecated (the exact warnings 6 | # depend on your compiler). Please consult the documentation of the 7 | # deprecated API in order to know how to port your code away from it. 8 | DEFINES += QT_DEPRECATED_WARNINGS 9 | 10 | # You can also make your code fail to compile if you use deprecated APIs. 11 | # In order to do so, uncomment the following line. 12 | # You can also select to disable deprecated APIs only up to a certain version of Qt. 13 | #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0 14 | 15 | SOURCES += \ 16 | main.cpp 17 | 18 | RESOURCES += qml.qrc 19 | 20 | # Additional import path used to resolve QML modules in Qt Creator's code model 21 | QML_IMPORT_PATH = 22 | 23 | # Additional import path used to resolve QML modules just for Qt Quick Designer 24 | QML_DESIGNER_IMPORT_PATH = 25 | 26 | # Default rules for deployment. 27 | qnx: target.path = /tmp/$${TARGET}/bin 28 | else: unix:!android: target.path = /opt/$${TARGET}/bin 29 | !isEmpty(target.path): INSTALLS += target 30 | -------------------------------------------------------------------------------- /CalendarUse/main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | int main(int argc, char *argv[]) 5 | { 6 | QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); 7 | 8 | QGuiApplication app(argc, argv); 9 | 10 | QQmlApplicationEngine engine; 11 | engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); 12 | if (engine.rootObjects().isEmpty()) 13 | return -1; 14 | 15 | return app.exec(); 16 | } 17 | -------------------------------------------------------------------------------- /CalendarUse/main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.3 2 | import QtQuick.Controls 1.4 3 | import QtQuick.Controls.Styles 1.4 4 | 5 | Rectangle { 6 | visible: true 7 | width: 400 8 | height: 440 9 | 10 | // 定时器：用于延时 11 | Timer { 12 | id: timer 13 | } 14 | 15 | // 计算两个时间之间的天数 16 | function getRemainDay() { 17 | var curDate = new Date(); // 当前日期 18 | var endDate = calendar.selectedDate -12*60*60*1000 // 结束日期 19 | var day = (endDate - curDate)/1000/60/60/24 20 | if(day > -1.0) 21 | return parseInt(day+1); 22 | else 23 | return parseInt(day); 24 | } 25 | 26 | // 延时函数 27 | function delay(delayTime, cb) { 28 | timer.interval = delayTime; 29 | timer.repeat = false; 30 | timer.triggered.connect(cb); 31 | timer.start(); 32 | } 33 | 34 | // MouseArea的层级在"其它所有控件"之下（因为写在"其它所有控件"的后面，又是同级的） 35 | MouseArea{ 36 | anchors.fill: parent 37 | onPressed: parent.forceActiveFocus() // 强制让窗口获得焦点 38 | } 39 | 40 | TextField { 41 | id: textAreaEnd 42 | width: 320 43 | height: 40 44 | placeholderText: "请选择日期" 45 | readOnly: true // 只读 46 | font.pointSize: 18 47 | anchors.top: parent.top 48 | anchors.topMargin: 30 49 | anchors.horizontalCenter: parent.horizontalCenter 50 | 51 | // 检测焦点是否在文本输入框中，在则弹出"日历" 52 | onFocusChanged: { 53 | if (activeFocus) 54 | calendar.visible = true 55 | else 56 | calendar.visible = false 57 | } 58 | 59 | // 避免选择日期后"日历"隐藏，焦点此时还在"文本框"上，无法进入"焦点改变事件"显示"日历"的情况 60 | MouseArea { 61 | anchors.fill: parent 62 | onClicked: { 63 | calendar.visible = true 64 | parent.forceActiveFocus() 65 | } 66 | } 67 | } 68 | 69 | // 日历控件 70 | Calendar { 71 | id: calendar 72 | anchors.top: textAreaEnd.bottom 73 | anchors.left: textAreaEnd.left 74 | width: textAreaEnd.width 75 | height: 320 76 | visible: false 77 | minimumDate: new Date() 78 | 79 | // 日历样式 80 | style: CalendarStyle { 81 | gridVisible: false // 网格不可见 82 | 83 | 84 | // 设置日期的样式 85 | dayDelegate: Rectangle { 86 | 87 | // 日期是否为今天 88 | property bool bIsToday: styleData.date.toLocaleString(Qt.locale("de_DE"), "yyyy-MM-dd") === 89 | (new Date()).toLocaleString(Qt.locale("de_DE"), "yyyy-MM-dd") 90 | 91 | gradient: Gradient { 92 | GradientStop { 93 | position: 0.00 94 | color: styleData.selected && styleData.date >= new Date() ? "SlateGray" : "white" 95 | } 96 | } 97 | 98 | Label { 99 | id: labDay 100 | text: styleData.date.getDate() 101 | font.family: "Microsoft YaHei" 102 | font.pixelSize: 16 103 | anchors.centerIn: parent 104 | color: (styleData.date > new Date() && styleData.selected) ? "white" : 105 | ((styleData.date > new Date() && styleData.visibleMonth) 106 | ? (bIsToday ? "blue" : "black") : "Silver") 107 | } 108 | } 109 | } 110 | 111 | // 选择结束日期之后，隐藏日历 112 | onClicked: { 113 | textAreaEnd.text = Qt.formatDateTime(calendar.selectedDate, "yyyy-MM-dd") 114 | 115 | // 延时一会儿才隐藏日历（第二个参数为"函数"） 116 | delay(200, function() {calendar.visible = false}) 117 | } 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /CalendarUse/main.qmlc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/confidentFeng/QML_Demo/4635d3f960e08d4a9d88355c437166d5dc81fcbd/CalendarUse/main.qmlc -------------------------------------------------------------------------------- /CalendarUse/qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | main.qml 4 | 5 | 6 | -------------------------------------------------------------------------------- /ColorMaker/colorMaker.cpp: -------------------------------------------------------------------------------- 1 | #include "colorMaker.h" 2 | #include 3 | #include 4 | 5 | ColorMaker::ColorMaker(QObject *parent) 6 | : QObject(parent) 7 | , m_algorithm(RandomRGB) 8 | , m_currentColor(Qt::black) 9 | , m_nColorTimer(0) 10 | { 11 | qsrand(QDateTime::currentDateTime().toTime_t()); 12 | } 13 | 14 | ColorMaker::~ColorMaker() 15 | { 16 | } 17 | 18 | QColor ColorMaker::color() const 19 | { 20 | return m_currentColor; 21 | } 22 | 23 | void ColorMaker::setColor(const QColor &color) 24 | { 25 | m_currentColor = color; 26 | emit colorChanged(m_currentColor); 27 | } 28 | 29 | QColor ColorMaker::timeColor() const 30 | { 31 | QTime time = QTime::currentTime(); 32 | int r = time.hour(); 33 | int g = time.minute()*2; 34 | int b = time.second()*4; 35 | return QColor::fromRgb(r, g, b); 36 | } 37 | 38 | ColorMaker::GenerateAlgorithm ColorMaker::algorithm() const 39 | { 40 | return m_algorithm; 41 | } 42 | 43 | void ColorMaker::setAlgorithm(GenerateAlgorithm algorithm) 44 | { 45 | m_algorithm = algorithm; 46 | } 47 | 48 | void ColorMaker::start() 49 | { 50 | if(m_nColorTimer == 0) 51 | { 52 | m_nColorTimer = startTimer(1000); 53 | } 54 | } 55 | 56 | void ColorMaker::stop() 57 | { 58 | if(m_nColorTimer > 0) 59 | { 60 | killTimer(m_nColorTimer); 61 | m_nColorTimer = 0; 62 | } 63 | } 64 | 65 | void ColorMaker::timerEvent(QTimerEvent *e) 66 | { 67 | if(e->timerId() == m_nColorTimer) 68 | { 69 | switch(m_algorithm) 70 | { 71 | case RandomRGB: 72 | m_currentColor.setRgb(qrand() % 255, qrand() % 255, qrand() % 255); 73 | break; 74 | case RandomRed: 75 | m_currentColor.setRed(qrand() % 255); 76 | break; 77 | case RandomGreen: 78 | m_currentColor.setGreen(qrand() % 255); 79 | break; 80 | case RandomBlue: 81 | m_currentColor.setBlue(qrand() % 255); 82 | break; 83 | case LinearIncrease: 84 | { 85 | int r = m_currentColor.red() + 10; 86 | int g = m_currentColor.green() + 10; 87 | int b = m_currentColor.blue() + 10; 88 | m_currentColor.setRgb(r % 255, g % 255, b % 255); 89 | } 90 | break; 91 | } 92 | emit colorChanged(m_currentColor); 93 | emit currentTime(QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss")); 94 | } 95 | else 96 | { 97 | QObject::timerEvent(e); 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /ColorMaker/colorMaker.h: -------------------------------------------------------------------------------- 1 | #ifndef COLORMAKER_H 2 | #define COLORMAKER_H 3 | #include 4 | #include 5 | 6 | 7 | class ColorMaker : public QObject 8 | { 9 | Q_OBJECT 10 | Q_ENUMS(GenerateAlgorithm) 11 | Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged) 12 | Q_PROPERTY(QColor timeColor READ timeColor) 13 | 14 | public: 15 | ColorMaker(QObject *parent = 0); 16 | ~ColorMaker(); 17 | 18 | enum GenerateAlgorithm{ 19 | RandomRGB, 20 | RandomRed, 21 | RandomGreen, 22 | RandomBlue, 23 | LinearIncrease 24 | }; 25 | 26 | QColor color() const; 27 | void setColor(const QColor & color); 28 | QColor timeColor() const; 29 | 30 | Q_INVOKABLE GenerateAlgorithm algorithm() const; 31 | Q_INVOKABLE void setAlgorithm(GenerateAlgorithm algorithm); 32 | 33 | signals: 34 | void colorChanged(const QColor & color); 35 | void currentTime(const QString &strTime); 36 | 37 | public slots: 38 | void start(); 39 | void stop(); 40 | 41 | protected: 42 | void timerEvent(QTimerEvent *e); 43 | 44 | private: 45 | GenerateAlgorithm m_algorithm; 46 | QColor m_currentColor; 47 | int m_nColorTimer; 48 | }; 49 | 50 | #endif // COLORMAKER_H 51 | -------------------------------------------------------------------------------- /ColorMaker/colorMaker.pro: -------------------------------------------------------------------------------- 1 | TEMPLATE = app 2 | 3 | QT += qml quick 4 | 5 | SOURCES += main.cpp \ 6 | colorMaker.cpp 7 | 8 | 9 | HEADERS += \ 10 | colorMaker.h 11 | 12 | RESOURCES += qml.qrc 13 | -------------------------------------------------------------------------------- /ColorMaker/colorMaker.pro.user: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | EnvironmentId 7 | {ec7100cb-b3f4-4c2e-bd3d-57ee21fe59d0} 8 | 9 | 10 | ProjectExplorer.Project.ActiveTarget 11 | 0 12 | 13 | 14 | ProjectExplorer.Project.EditorSettings 15 | 16 | true 17 | false 18 | true 19 | 20 | Cpp 21 | 22 | CppGlobal 23 | 24 | 25 | 26 | QmlJS 27 | 28 | QmlJSGlobal 29 | 30 | 31 | 2 32 | UTF-8 33 | false 34 | 4 35 | false 36 | 80 37 | true 38 | true 39 | 1 40 | true 41 | false 42 | 0 43 | true 44 | true 45 | 0 46 | 8 47 | true 48 | 1 49 | true 50 | true 51 | true 52 | false 53 | 54 | 55 | 56 | ProjectExplorer.Project.PluginSettings 57 | 58 | 59 | -fno-delayed-template-parsing 60 | 61 | true 62 | 63 | 64 | 65 | ProjectExplorer.Project.Target.0 66 | 67 | Desktop Qt 5.12.8 MinGW 64-bit 68 | Desktop Qt 5.12.8 MinGW 64-bit 69 | qt.qt5.5128.win64_mingw73_kit 70 | 0 71 | 0 72 | 0 73 | 74 | E:/Learn/learnGit/QtAppProject/build-colorMaker-Desktop_Qt_5_12_8_MinGW_64_bit-Debug 75 | 76 | 77 | true 78 | QtProjectManager.QMakeBuildStep 79 | true 80 | 81 | false 82 | false 83 | false 84 | 85 | 86 | true 87 | Qt4ProjectManager.MakeStep 88 | 89 | false 90 | 91 | 92 | false 93 | 94 | 2 95 | Build 96 | Build 97 | ProjectExplorer.BuildSteps.Build 98 | 99 | 100 | 101 | true 102 | Qt4ProjectManager.MakeStep 103 | 104 | true 105 | clean 106 | 107 | false 108 | 109 | 1 110 | Clean 111 | Clean 112 | ProjectExplorer.BuildSteps.Clean 113 | 114 | 2 115 | false 116 | 117 | Debug 118 | Qt4ProjectManager.Qt4BuildConfiguration 119 | 2 120 | 121 | 122 | E:/Learn/learnGit/QtAppProject/build-colorMaker-Desktop_Qt_5_12_8_MinGW_64_bit-Release 123 | 124 | 125 | true 126 | QtProjectManager.QMakeBuildStep 127 | false 128 | 129 | false 130 | false 131 | true 132 | 133 | 134 | true 135 | Qt4ProjectManager.MakeStep 136 | 137 | false 138 | 139 | 140 | false 141 | 142 | 2 143 | Build 144 | Build 145 | ProjectExplorer.BuildSteps.Build 146 | 147 | 148 | 149 | true 150 | Qt4ProjectManager.MakeStep 151 | 152 | true 153 | clean 154 | 155 | false 156 | 157 | 1 158 | Clean 159 | Clean 160 | ProjectExplorer.BuildSteps.Clean 161 | 162 | 2 163 | false 164 | 165 | Release 166 | Qt4ProjectManager.Qt4BuildConfiguration 167 | 0 168 | 169 | 170 | E:/Learn/learnGit/QtAppProject/build-colorMaker-Desktop_Qt_5_12_8_MinGW_64_bit-Profile 171 | 172 | 173 | true 174 | QtProjectManager.QMakeBuildStep 175 | true 176 | 177 | false 178 | true 179 | true 180 | 181 | 182 | true 183 | Qt4ProjectManager.MakeStep 184 | 185 | false 186 | 187 | 188 | false 189 | 190 | 2 191 | Build 192 | Build 193 | ProjectExplorer.BuildSteps.Build 194 | 195 | 196 | 197 | true 198 | Qt4ProjectManager.MakeStep 199 | 200 | true 201 | clean 202 | 203 | false 204 | 205 | 1 206 | Clean 207 | Clean 208 | ProjectExplorer.BuildSteps.Clean 209 | 210 | 2 211 | false 212 | 213 | Profile 214 | Qt4ProjectManager.Qt4BuildConfiguration 215 | 0 216 | 217 | 3 218 | 219 | 220 | 0 221 | Deploy 222 | Deploy 223 | ProjectExplorer.BuildSteps.Deploy 224 | 225 | 1 226 | ProjectExplorer.DefaultDeployConfiguration 227 | 228 | 1 229 | 230 | 231 | dwarf 232 | 233 | cpu-cycles 234 | 235 | 236 | 250 237 | 238 | -e 239 | cpu-cycles 240 | --call-graph 241 | dwarf,4096 242 | -F 243 | 250 244 | 245 | -F 246 | true 247 | 4096 248 | false 249 | false 250 | 1000 251 | 252 | true 253 | 254 | false 255 | false 256 | false 257 | false 258 | true 259 | 0.01 260 | 10 261 | true 262 | kcachegrind 263 | 1 264 | 25 265 | 266 | 1 267 | true 268 | false 269 | true 270 | valgrind 271 | 272 | 0 273 | 1 274 | 2 275 | 3 276 | 4 277 | 5 278 | 6 279 | 7 280 | 8 281 | 9 282 | 10 283 | 11 284 | 12 285 | 13 286 | 14 287 | 288 | 2 289 | 290 | Qt4ProjectManager.Qt4RunConfiguration:E:/Learn/learnGit/QtAppProject/ColorMaker/colorMaker.pro 291 | E:/Learn/learnGit/QtAppProject/ColorMaker/colorMaker.pro 292 | 293 | false 294 | 295 | false 296 | true 297 | true 298 | false 299 | false 300 | true 301 | 302 | E:/Learn/learnGit/QtAppProject/build-colorMaker-Desktop_Qt_5_12_8_MinGW_64_bit-Debug 303 | 304 | 1 305 | 306 | 307 | 308 | ProjectExplorer.Project.TargetCount 309 | 1 310 | 311 | 312 | ProjectExplorer.Project.Updater.FileVersion 313 | 22 314 | 315 | 316 | Version 317 | 22 318 | 319 | 320 | -------------------------------------------------------------------------------- /ColorMaker/main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | #include "colorMaker.h" 5 | 6 | int main(int argc, char *argv[]) 7 | { 8 | QGuiApplication app(argc, argv); 9 | qmlRegisterType("an.qt.ColorMaker", 1, 0, "ColorMaker"); 10 | 11 | QQuickView viewer; 12 | viewer.setResizeMode(QQuickView::SizeRootObjectToView); 13 | viewer.setSource(QUrl("qrc:///main.qml")); 14 | viewer.show(); 15 | 16 | return app.exec(); 17 | } 18 | -------------------------------------------------------------------------------- /ColorMaker/main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import QtQuick.Controls 1.1 3 | import an.qt.ColorMaker 1.0 4 | 5 | Rectangle { 6 | width: 360; 7 | height: 360; 8 | Text { 9 | id: timeLabel; 10 | anchors.left: parent.left; 11 | anchors.leftMargin: 4; 12 | anchors.top: parent.top; 13 | anchors.topMargin: 4; 14 | font.pixelSize: 26; 15 | } 16 | ColorMaker { 17 | id: colorMaker; 18 | color: Qt.green; 19 | } 20 | 21 | Rectangle { 22 | id: colorRect; 23 | anchors.centerIn: parent; 24 | width: 200; 25 | height: 200; 26 | color: "blue"; 27 | } 28 | 29 | Button { 30 | id: start; 31 | text: "start"; 32 | anchors.left: parent.left; 33 | anchors.leftMargin: 4; 34 | anchors.bottom: parent.bottom; 35 | anchors.bottomMargin: 4; 36 | onClicked: { 37 | colorMaker.start(); 38 | } 39 | } 40 | Button { 41 | id: stop; 42 | text: "stop"; 43 | anchors.left: start.right; 44 | anchors.leftMargin: 4; 45 | anchors.bottom: start.bottom; 46 | onClicked: { 47 | colorMaker.stop(); 48 | } 49 | } 50 | 51 | function changeAlgorithm(button, algorithm){ 52 | switch(algorithm) 53 | { 54 | case 0: 55 | button.text = "RandomRGB"; 56 | break; 57 | case 1: 58 | button.text = "RandomRed"; 59 | break; 60 | case 2: 61 | button.text = "RandomGreen"; 62 | break; 63 | case 3: 64 | button.text = "RandomBlue"; 65 | break; 66 | case 4: 67 | button.text = "LinearIncrease"; 68 | break; 69 | } 70 | } 71 | 72 | Button { 73 | id: colorAlgorithm; 74 | text: "RandomRGB"; 75 | anchors.left: stop.right; 76 | anchors.leftMargin: 4; 77 | anchors.bottom: start.bottom; 78 | onClicked: { 79 | var algorithm = (colorMaker.algorithm() + 1) % 5; 80 | changeAlgorithm(colorAlgorithm, algorithm); 81 | colorMaker.setAlgorithm(algorithm); 82 | } 83 | } 84 | 85 | Button { 86 | id: quit; 87 | text: "quit"; 88 | anchors.left: colorAlgorithm.right; 89 | anchors.leftMargin: 4; 90 | anchors.bottom: start.bottom; 91 | onClicked: { 92 | Qt.quit(); 93 | } 94 | } 95 | 96 | Component.onCompleted: { 97 | colorMaker.color = Qt.rgba(0,180,120, 255); 98 | colorMaker.setAlgorithm(ColorMaker.LinearIncrease); 99 | changeAlgorithm(colorAlgorithm, colorMaker.algorithm()); 100 | } 101 | 102 | Connections { 103 | target: colorMaker; 104 | onCurrentTime:{ 105 | timeLabel.text = strTime; 106 | timeLabel.color = colorMaker.timeColor; 107 | } 108 | } 109 | 110 | Connections { 111 | target: colorMaker; 112 | onColorChanged:{ 113 | colorRect.color = color; 114 | } 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /ColorMaker/qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | main.qml 4 | 5 | 6 | -------------------------------------------------------------------------------- /CppCallQml/CppCallQml.pro: -------------------------------------------------------------------------------- 1 | QT += core gui widgets quick 2 | 3 | CONFIG += c++11 4 | 5 | # The following define makes your compiler emit warnings if you use 6 | # any Qt feature that has been marked deprecated (the exact warnings 7 | # depend on your compiler). Refer to the documentation for the 8 | # deprecated API to know how to port your code away from it. 9 | DEFINES += QT_DEPRECATED_WARNINGS 10 | 11 | # You can also make your code fail to compile if it uses deprecated APIs. 12 | # In order to do so, uncomment the following line. 13 | # You can also select to disable deprecated APIs only up to a certain version of Qt. 14 | #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0 15 | 16 | SOURCES += \ 17 | main.cpp \ 18 | widget.cpp 19 | 20 | RESOURCES += qml.qrc 21 | 22 | # Additional import path used to resolve QML modules in Qt Creator's code model 23 | QML_IMPORT_PATH = 24 | 25 | # Additional import path used to resolve QML modules just for Qt Quick Designer 26 | QML_DESIGNER_IMPORT_PATH = 27 | 28 | # Default rules for deployment. 29 | qnx: target.path = /tmp/$${TARGET}/bin 30 | else: unix:!android: target.path = /opt/$${TARGET}/bin 31 | !isEmpty(target.path): INSTALLS += target 32 | 33 | HEADERS += \ 34 | widget.h 35 | 36 | FORMS += \ 37 | widget.ui 38 | -------------------------------------------------------------------------------- /CppCallQml/CppCallQml.pro.user: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | EnvironmentId 7 | {26242a15-bf57-4e9c-9c2e-df3b4fdcf92d} 8 | 9 | 10 | ProjectExplorer.Project.ActiveTarget 11 | 0 12 | 13 | 14 | ProjectExplorer.Project.EditorSettings 15 | 16 | true 17 | false 18 | true 19 | 20 | Cpp 21 | 22 | CppGlobal 23 | 24 | 25 | 26 | QmlJS 27 | 28 | QmlJSGlobal 29 | 30 | 31 | 2 32 | UTF-8 33 | false 34 | 4 35 | false 36 | 80 37 | true 38 | true 39 | 1 40 | true 41 | false 42 | 0 43 | true 44 | true 45 | 0 46 | 8 47 | true 48 | 1 49 | true 50 | true 51 | true 52 | false 53 | 54 | 55 | 56 | ProjectExplorer.Project.PluginSettings 57 | 58 | 59 | -fno-delayed-template-parsing 60 | 61 | true 62 | Builtin.Questionable 63 | 64 | true 65 | Builtin.DefaultTidyAndClazy 66 | 2 67 | 68 | 69 | 70 | true 71 | 72 | 73 | 74 | 75 | ProjectExplorer.Project.Target.0 76 | 77 | Desktop Qt 5.12.9 MSVC2015 64bit 78 | Desktop Qt 5.12.9 MSVC2015 64bit 79 | qt.qt5.5129.win64_msvc2015_64_kit 80 | 0 81 | 0 82 | 0 83 | 84 | true 85 | 0 86 | E:\C++ Project\QML\build-CppCallQml-Desktop_Qt_5_12_9_MSVC2015_64bit-Debug 87 | E:/C++ Project/QML/build-CppCallQml-Desktop_Qt_5_12_9_MSVC2015_64bit-Debug 88 | 89 | 90 | true 91 | QtProjectManager.QMakeBuildStep 92 | 93 | false 94 | 95 | 96 | 97 | true 98 | Qt4ProjectManager.MakeStep 99 | 100 | false 101 | 102 | 103 | false 104 | 105 | 2 106 | Build 107 | Build 108 | ProjectExplorer.BuildSteps.Build 109 | 110 | 111 | 112 | true 113 | Qt4ProjectManager.MakeStep 114 | 115 | true 116 | clean 117 | 118 | false 119 | 120 | 1 121 | Clean 122 | Clean 123 | ProjectExplorer.BuildSteps.Clean 124 | 125 | 2 126 | false 127 | 128 | Debug 129 | Qt4ProjectManager.Qt4BuildConfiguration 130 | 2 131 | 2 132 | 2 133 | 134 | 135 | true 136 | 2 137 | E:\C++ Project\QML\build-CppCallQml-Desktop_Qt_5_12_9_MSVC2015_64bit-Release 138 | E:/C++ Project/QML/build-CppCallQml-Desktop_Qt_5_12_9_MSVC2015_64bit-Release 139 | 140 | 141 | true 142 | QtProjectManager.QMakeBuildStep 143 | 144 | false 145 | 146 | 147 | 148 | true 149 | Qt4ProjectManager.MakeStep 150 | 151 | false 152 | 153 | 154 | false 155 | 156 | 2 157 | Build 158 | Build 159 | ProjectExplorer.BuildSteps.Build 160 | 161 | 162 | 163 | true 164 | Qt4ProjectManager.MakeStep 165 | 166 | true 167 | clean 168 | 169 | false 170 | 171 | 1 172 | Clean 173 | Clean 174 | ProjectExplorer.BuildSteps.Clean 175 | 176 | 2 177 | false 178 | 179 | Release 180 | Qt4ProjectManager.Qt4BuildConfiguration 181 | 0 182 | 0 183 | 2 184 | 185 | 186 | true 187 | 0 188 | E:\C++ Project\QML\build-CppCallQml-Desktop_Qt_5_12_9_MSVC2015_64bit-Profile 189 | E:/C++ Project/QML/build-CppCallQml-Desktop_Qt_5_12_9_MSVC2015_64bit-Profile 190 | 191 | 192 | true 193 | QtProjectManager.QMakeBuildStep 194 | 195 | false 196 | 197 | 198 | 199 | true 200 | Qt4ProjectManager.MakeStep 201 | 202 | false 203 | 204 | 205 | false 206 | 207 | 2 208 | Build 209 | Build 210 | ProjectExplorer.BuildSteps.Build 211 | 212 | 213 | 214 | true 215 | Qt4ProjectManager.MakeStep 216 | 217 | true 218 | clean 219 | 220 | false 221 | 222 | 1 223 | Clean 224 | Clean 225 | ProjectExplorer.BuildSteps.Clean 226 | 227 | 2 228 | false 229 | 230 | Profile 231 | Qt4ProjectManager.Qt4BuildConfiguration 232 | 0 233 | 0 234 | 0 235 | 236 | 3 237 | 238 | 239 | 0 240 | Deploy 241 | Deploy 242 | ProjectExplorer.BuildSteps.Deploy 243 | 244 | 1 245 | 246 | false 247 | ProjectExplorer.DefaultDeployConfiguration 248 | 249 | 1 250 | 251 | 252 | dwarf 253 | 254 | cpu-cycles 255 | 256 | 257 | 250 258 | 259 | -e 260 | cpu-cycles 261 | --call-graph 262 | dwarf,4096 263 | -F 264 | 250 265 | 266 | -F 267 | true 268 | 4096 269 | false 270 | false 271 | 1000 272 | 273 | true 274 | 275 | false 276 | false 277 | false 278 | false 279 | true 280 | 0.01 281 | 10 282 | true 283 | kcachegrind 284 | 1 285 | 25 286 | 287 | 1 288 | true 289 | false 290 | true 291 | valgrind 292 | 293 | 0 294 | 1 295 | 2 296 | 3 297 | 4 298 | 5 299 | 6 300 | 7 301 | 8 302 | 9 303 | 10 304 | 11 305 | 12 306 | 13 307 | 14 308 | 309 | 2 310 | 311 | Qt4ProjectManager.Qt4RunConfiguration:E:/C++ Project/QML/CppCallQml/CppCallQml.pro 312 | E:/C++ Project/QML/CppCallQml/CppCallQml.pro 313 | 314 | false 315 | 316 | false 317 | true 318 | true 319 | false 320 | false 321 | true 322 | 323 | E:/C++ Project/QML/build-CppCallQml-Desktop_Qt_5_12_9_MSVC2015_64bit-Debug 324 | 325 | 1 326 | 327 | 328 | 329 | ProjectExplorer.Project.TargetCount 330 | 1 331 | 332 | 333 | ProjectExplorer.Project.Updater.FileVersion 334 | 22 335 | 336 | 337 | Version 338 | 22 339 | 340 | 341 | -------------------------------------------------------------------------------- /CppCallQml/main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include "widget.h" 3 | 4 | int main(int argc, char *argv[]) 5 | { 6 | QApplication a(argc, argv); 7 | 8 | Widget w; 9 | w.show(); 10 | 11 | return a.exec(); 12 | } 13 | -------------------------------------------------------------------------------- /CppCallQml/main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | 3 | Item{ 4 | id: root 5 | width: 250 6 | height: 250 7 | // 自定义属性 --cpp可以访问 8 | property string msg: "fengMisaka" 9 | // 自定义信号 --可以触发cpp槽函数 10 | signal qmlSendMsg(string arg1,string arg2) 11 | 12 | // QML中的方法可以被cpp调用，也可以作为槽函数 13 | function qml_method(val_arg) { 14 | console.log("qml method runing", val_arg, "return ok") 15 | return "ok" 16 | } 17 | // 注意槽函数参数为var类型 18 | function qmlRecvMsg(arg1,arg2) { 19 | console.log("qml slot runing",arg1,arg2) 20 | } 21 | 22 | Rectangle { 23 | anchors.fill: parent 24 | color: "green" 25 | objectName: "rect" // 用于cpp查找对象 26 | } 27 | 28 | MouseArea { 29 | anchors.fill: parent 30 | onClicked: { 31 | console.log("qml 点击鼠标, 发送信号 qmlSendMsg") 32 | root.qmlSendMsg(root.msg, "myarg2") 33 | } 34 | } 35 | 36 | onHeightChanged: console.log("qml height changed") 37 | onWidthChanged: console.log("qml width changed") 38 | } 39 | -------------------------------------------------------------------------------- /CppCallQml/qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | main.qml 4 | 5 | 6 | -------------------------------------------------------------------------------- /CppCallQml/widget.cpp: -------------------------------------------------------------------------------- 1 | #include "widget.h" 2 | #include "ui_widget.h" 3 | 4 | Widget::Widget(QWidget *parent) : 5 | QWidget(parent), 6 | ui(new Ui::Widget) 7 | { 8 | ui->setupUi(this); 9 | 10 | view = new QQuickView; 11 | } 12 | 13 | Widget::~Widget() 14 | { 15 | delete ui; 16 | } 17 | 18 | void Widget::on_pushButton_clicked() 19 | { 20 | //【1】使用QQuickView的C++代码加载QML文档，显示QML界面 21 | // 另外可以用QQmlComponent、QQuickWidget加载QML文档 【QQuickView不能用Window做根元素】 22 | view->setSource(QUrl("qrc:/main.qml")); 23 | view->show(); 24 | 25 | /* 文档如是说： 26 | 应该始终使用QObject::setProperty()、QQmlProperty 27 | 或QMetaProperty::write()来改变QML的属性值，以确保QML引擎感知属性的变化。*/ 28 | 29 | //【2】通过QObject设置属性值、获取属性值 30 | QObject *qmlObj = view->rootObject(); // 获取到qml根对象的指针 31 | //qmlObj->setProperty("height",300); 32 | QQmlProperty(qmlObj, "height").write(300); 33 | qDebug() << "Cpp get qml property height" << qmlObj->property("height"); 34 | // 任何属性都可以通过C++访问 35 | qDebug() << "Cpp get qml property msg" << qmlObj->property("msg"); 36 | 37 | //【3】通过QQuickItem设置属性值、获取属性值 38 | QQuickItem *item = qobject_cast(qmlObj); 39 | item->setWidth(300); 40 | qDebug() << "Cpp get qml property width" << item->width(); 41 | 42 | //【4】通过objectName访问加载的QML子对象 43 | // QObject::findChildren()可用于查找具有匹配objectName属性的子项 44 | QObject *qmlRect = qmlObj->findChild("rect"); 45 | if(qmlRect) { 46 | qmlRect->setProperty("color", "red"); 47 | qDebug() << "Cpp get rect color" << qmlRect->property("color"); 48 | } 49 | 50 | //【5】调用QML方法 51 | QVariant val_return; // 返回值 52 | QVariant val_arg = "GongJianBo"; // 参数值 53 | // Q_RETURN_ARG()和Q_Arg()参数必须制定为QVariant类型 54 | QMetaObject::invokeMethod(qmlObj, 55 | "qml_method", 56 | Q_RETURN_ARG(QVariant,val_return), 57 | Q_ARG(QVariant,val_arg)); 58 | qDebug()<<"QMetaObject::invokeMethod result"< 5 | #include 6 | #include 7 | #include 8 | #include 9 | #include 10 | #include 11 | 12 | namespace Ui { 13 | class Widget; 14 | } 15 | 16 | class Widget : public QWidget 17 | { 18 | Q_OBJECT 19 | 20 | public: 21 | explicit Widget(QWidget *parent = nullptr); 22 | ~Widget(); 23 | 24 | signals: 25 | // 信号 --用来触发qml的函数 26 | // 注意参数为var类型，对应qml中js函数的参数类型 27 | void cppSendMsg(const QVariant &arg1,const QVariant &arg2); 28 | 29 | public slots: 30 | // 槽函数 --用来接收qml的信号 31 | void cppRecvMsg(const QString &arg1,const QString &arg2); 32 | 33 | private slots: 34 | void on_pushButton_clicked(); 35 | 36 | private: 37 | Ui::Widget *ui; 38 | 39 | QQuickView *view; 40 | }; 41 | 42 | #endif // WIDGET_H 43 | -------------------------------------------------------------------------------- /CppCallQml/widget.ui: -------------------------------------------------------------------------------- 1 | 2 | 3 | Widget 4 | 5 | 6 | 7 | 0 8 | 0 9 | 400 10 | 300 11 | 12 | 13 | 14 | Form 15 | 16 | 17 | 18 | 19 | 140 20 | 130 21 | 81 22 | 23 23 | 24 | 25 | 26 | 打开QML窗口 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /ListViewPhone/.gitignore: -------------------------------------------------------------------------------- 1 | # This file is used to ignore files which are generated 2 | # ---------------------------------------------------------------------------- 3 | 4 | *~ 5 | *.autosave 6 | *.a 7 | *.core 8 | *.moc 9 | *.o 10 | *.obj 11 | *.orig 12 | *.rej 13 | *.so 14 | *.so.* 15 | *_pch.h.cpp 16 | *_resource.rc 17 | *.qm 18 | .#* 19 | *.*# 20 | core 21 | !core/ 22 | tags 23 | .DS_Store 24 | .directory 25 | *.debug 26 | Makefile* 27 | *.prl 28 | *.app 29 | moc_*.cpp 30 | ui_*.h 31 | qrc_*.cpp 32 | Thumbs.db 33 | *.res 34 | *.rc 35 | /.qmake.cache 36 | /.qmake.stash 37 | 38 | # qtcreator generated files 39 | *.pro.user* 40 | 41 | # xemacs temporary files 42 | *.flc 43 | 44 | # Vim temporary files 45 | .*.swp 46 | 47 | # Visual Studio generated files 48 | *.ib_pdb_index 49 | *.idb 50 | *.ilk 51 | *.pdb 52 | *.sln 53 | *.suo 54 | *.vcproj 55 | *vcproj.*.*.user 56 | *.ncb 57 | *.sdf 58 | *.opensdf 59 | *.vcxproj 60 | *vcxproj.* 61 | 62 | # MinGW generated files 63 | *.Debug 64 | *.Release 65 | 66 | # Python byte code 67 | *.pyc 68 | 69 | # Binaries 70 | # -------- 71 | *.dll 72 | *.exe 73 | 74 | -------------------------------------------------------------------------------- /ListViewPhone/ListViewPhone.pro: -------------------------------------------------------------------------------- 1 | QT += quick 2 | CONFIG += c++11 3 | 4 | # The following define makes your compiler emit warnings if you use 5 | # any feature of Qt which as been marked deprecated (the exact warnings 6 | # depend on your compiler). Please consult the documentation of the 7 | # deprecated API in order to know how to port your code away from it. 8 | DEFINES += QT_DEPRECATED_WARNINGS 9 | 10 | # You can also make your code fail to compile if you use deprecated APIs. 11 | # In order to do so, uncomment the following line. 12 | # You can also select to disable deprecated APIs only up to a certain version of Qt. 13 | #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0 14 | 15 | SOURCES += \ 16 | main.cpp 17 | 18 | RESOURCES += qml.qrc 19 | 20 | # Additional import path used to resolve QML modules in Qt Creator's code model 21 | QML_IMPORT_PATH = 22 | 23 | # Additional import path used to resolve QML modules just for Qt Quick Designer 24 | QML_DESIGNER_IMPORT_PATH = 25 | 26 | # Default rules for deployment. 27 | qnx: target.path = /tmp/$${TARGET}/bin 28 | else: unix:!android: target.path = /opt/$${TARGET}/bin 29 | !isEmpty(target.path): INSTALLS += target 30 | -------------------------------------------------------------------------------- /ListViewPhone/QML/phone_list_animation.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import QtQuick.Controls 1.1 3 | import QtQuick.Layouts 1.1 4 | 5 | Rectangle { 6 | width: 360 7 | height: 300 8 | color: "#EEEEEE" 9 | 10 | // 定义header 11 | Component { 12 | id: headerView 13 | 14 | Item { 15 | width: parent.width 16 | height: 30 17 | 18 | RowLayout { 19 | anchors.left: parent.left 20 | anchors.verticalCenter: parent.verticalCenter 21 | spacing: 8 22 | 23 | Text { 24 | text: "Name" 25 | font.bold: true 26 | font.pixelSize: 20 27 | Layout.preferredWidth: 120 28 | } 29 | 30 | Text { 31 | text: "Cost" 32 | font.bold: true 33 | font.pixelSize: 20 34 | Layout.preferredWidth: 80 35 | } 36 | 37 | Text { 38 | text: "Manufacturer" 39 | font.bold: true 40 | font.pixelSize: 20 41 | Layout.fillWidth: true 42 | } 43 | } 44 | } 45 | } 46 | 47 | // 定义footer 48 | Component { 49 | id: footerView 50 | 51 | Item{ 52 | id: footerRootItem 53 | width: parent.width 54 | height: 30 55 | 56 | // 自定义信号 57 | signal add() 58 | signal insert() 59 | signal moveUp() 60 | signal moveDown() 61 | 62 | // 新增按钮 63 | Button { 64 | id: addOne 65 | anchors.right: parent.right 66 | anchors.rightMargin: 4 67 | anchors.verticalCenter: parent.verticalCenter 68 | text: "Add" 69 | onClicked: footerRootItem.add() 70 | } 71 | 72 | // 插入按钮 73 | Button { 74 | id: insertOne 75 | anchors.right: addOne.left 76 | anchors.rightMargin: 4 77 | anchors.verticalCenter: parent.verticalCenter 78 | text: "Insert" 79 | onClicked: footerRootItem.insert() 80 | } 81 | 82 | // 下移按钮 83 | Button { 84 | id: moveDown; 85 | anchors.right: insertOne.left 86 | anchors.rightMargin: 4 87 | anchors.verticalCenter: parent.verticalCenter 88 | text: "Down" 89 | onClicked: footerRootItem.moveDown() 90 | } 91 | 92 | // 上移按钮 93 | Button { 94 | id: moveUp; 95 | anchors.right: moveDown.left 96 | anchors.rightMargin: 4 97 | anchors.verticalCenter: parent.verticalCenter 98 | text: "Up" 99 | onClicked: footerRootItem.moveUp() 100 | } 101 | } 102 | } 103 | 104 | // 定义model 105 | Component { 106 | id: phoneModel 107 | 108 | ListModel { 109 | ListElement{ 110 | name: "iPhone 5" 111 | cost: "4900" 112 | manufacturer: "Apple" 113 | } 114 | ListElement{ 115 | name: "B199" 116 | cost: "1590" 117 | manufacturer: "HuaWei" 118 | } 119 | ListElement{ 120 | name: "MI 2S" 121 | cost: "1999" 122 | manufacturer: "XiaoMi" 123 | } 124 | ListElement{ 125 | name: "GALAXY S5" 126 | cost: "4699" 127 | manufacturer: "Samsung" 128 | } 129 | } 130 | } 131 | 132 | // 定义delegate 133 | Component { 134 | id: phoneDelegate 135 | 136 | Item { 137 | id: wrapper 138 | width: parent.width 139 | height: 30 140 | 141 | // 双击删除 142 | MouseArea { 143 | id: delegateMouseArea 144 | anchors.fill: parent 145 | 146 | onClicked: { 147 | wrapper.ListView.view.currentIndex = index 148 | mouse.accepted = true 149 | } 150 | 151 | onDoubleClicked: { 152 | wrapper.ListView.view.model.remove(index) 153 | mouse.accepted = true 154 | } 155 | } 156 | 157 | RowLayout { 158 | anchors.left: parent.left 159 | anchors.verticalCenter: parent.verticalCenter 160 | spacing: 8 161 | Text { 162 | id: col1 163 | text: name 164 | color: wrapper.ListView.isCurrentItem ? "red" : "black" 165 | font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18 166 | Layout.preferredWidth: 120 167 | } 168 | 169 | Text { 170 | text: cost 171 | color: wrapper.ListView.isCurrentItem ? "red" : "black" 172 | font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18 173 | Layout.preferredWidth: 80 174 | } 175 | 176 | Text { 177 | text: manufacturer 178 | color: wrapper.ListView.isCurrentItem ? "red" : "black" 179 | font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18 180 | Layout.fillWidth: true 181 | } 182 | } 183 | } 184 | } 185 | 186 | // 定义ListView 187 | ListView { 188 | id: listView 189 | anchors.fill: parent 190 | interactive: false 191 | 192 | delegate: phoneDelegate 193 | model: phoneModel.createObject(listView) 194 | header: headerView 195 | footer: footerView 196 | focus: true 197 | highlight: Rectangle{ 198 | color: "lightblue" 199 | } 200 | 201 | // 在ListView第一次实例化或者因Model变化而需要创建Item时应用 202 | populate: Transition { 203 | NumberAnimation { 204 | property: "opacity" 205 | from: 0 206 | to: 1.0 207 | duration: 1000 208 | } 209 | } 210 | 211 | // add过渡动画（新增Item触发） 212 | add: Transition { 213 | ParallelAnimation{ 214 | NumberAnimation { 215 | property: "opacity" 216 | from: 0 217 | to: 1.0 218 | duration: 1000 219 | } 220 | NumberAnimation { 221 | properties: "x,y" 222 | from: 0 223 | duration: 1000 224 | } 225 | } 226 | } 227 | 228 | // 用于指定通用的、由于Model变化导致Item被迫移位时的动画效果 229 | displaced: Transition { 230 | SpringAnimation { 231 | property: "y" 232 | spring: 3 233 | damping: 0.1 234 | epsilon: 0.25 235 | } 236 | } 237 | 238 | // remove过渡动画（移除Item触发） 239 | remove: Transition { 240 | SequentialAnimation{ 241 | NumberAnimation { 242 | properties: "y" 243 | to: 0 244 | duration: 600 245 | } 246 | NumberAnimation { 247 | property: "opacity" 248 | to: 0 249 | duration: 400 250 | } 251 | } 252 | } 253 | 254 | // move过渡动画（移动Item触发） 255 | move: Transition { 256 | NumberAnimation { 257 | property: "y" 258 | duration: 700 259 | easing.type: Easing.InQuart 260 | } 261 | } 262 | 263 | // 新增函数 264 | function addOne() { 265 | model.append( 266 | { 267 | "name": "MX3", 268 | "cost": "1799", 269 | "manufacturer": "MeiZu" 270 | } 271 | ) 272 | } 273 | 274 | // 插入函数 275 | function insertOne() { 276 | model.insert( Math.round(Math.random() * model.count), 277 | { 278 | "name": "HTC One E8", 279 | "cost": "2999", 280 | "manufacturer": "HTC" 281 | } 282 | ) 283 | } 284 | 285 | // 上移函数 286 | function moveUp() { 287 | if(currentIndex - 1 >= 0){ 288 | model.move(currentIndex, currentIndex - 1, 1) 289 | } 290 | } 291 | 292 | // 下移函数 293 | function moveDown() { 294 | if(currentIndex + 1 < model.count){ 295 | model.move(currentIndex, currentIndex + 1, 1) 296 | } 297 | } 298 | 299 | // 连接信号槽 300 | Component.onCompleted: { 301 | listView.footerItem.add.connect(listView.addOne) 302 | listView.footerItem.insert.connect(listView.insertOne) 303 | listView.footerItem.moveUp.connect(listView.moveUp) 304 | listView.footerItem.moveDown.connect(listView.moveDown) 305 | } 306 | } 307 | } 308 | -------------------------------------------------------------------------------- /ListViewPhone/QML/phone_list_change.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import QtQuick.Controls 1.2 3 | import QtQuick.Layouts 1.1 4 | 5 | Rectangle { 6 | width: 360 7 | height: 300 8 | color: "#EEEEEE" 9 | 10 | Component { 11 | id: headerView 12 | Item { 13 | width: parent.width 14 | height: 30 15 | RowLayout { 16 | anchors.left: parent.left 17 | anchors.verticalCenter: parent.verticalCenter 18 | spacing: 8 19 | 20 | Text { 21 | text: "Name" 22 | font.bold: true 23 | font.pixelSize: 20 24 | Layout.preferredWidth: 120 25 | } 26 | 27 | Text { 28 | text: "Cost" 29 | font.bold: true; 30 | font.pixelSize: 20 31 | Layout.preferredWidth: 80 32 | } 33 | 34 | Text { 35 | text: "Manufacturer" 36 | font.bold: true; 37 | font.pixelSize: 20 38 | Layout.fillWidth: true 39 | } 40 | } 41 | } 42 | } 43 | 44 | Component { 45 | id: footerView 46 | Item{ 47 | id: footerRootItem 48 | width: parent.width 49 | height: 30 50 | property alias text: txt.text 51 | 52 | // 1.自定义信号 53 | signal clean() 54 | signal add() 55 | 56 | Text { 57 | anchors.left: parent.left 58 | anchors.top: parent.top 59 | anchors.bottom: parent.bottom 60 | id: txt 61 | font.italic: true 62 | color: "blue" 63 | verticalAlignment: Text.AlignVCenter 64 | } 65 | 66 | Button { 67 | id: clearAll 68 | anchors.right: parent.right 69 | anchors.verticalCenter: parent.verticalCenter 70 | text: "Clear" 71 | onClicked: footerRootItem.clean() 72 | } 73 | 74 | Button { 75 | id: addOne 76 | anchors.right: clearAll.left 77 | anchors.rightMargin: 4 78 | anchors.verticalCenter: parent.verticalCenter 79 | text: "Add" 80 | onClicked: footerRootItem.add() 81 | } 82 | } 83 | } 84 | 85 | Component { 86 | id: phoneDelegate 87 | Item { 88 | id: wrapper 89 | width: parent.width 90 | height: 30 91 | 92 | MouseArea { 93 | anchors.fill: parent 94 | onClicked: { 95 | wrapper.ListView.view.currentIndex = index 96 | mouse.accepted = true 97 | } 98 | 99 | onDoubleClicked: { 100 | wrapper.ListView.view.model.remove(index) 101 | mouse.accepted = true 102 | } 103 | } 104 | 105 | RowLayout { 106 | anchors.left: parent.left 107 | anchors.verticalCenter: parent.verticalCenter 108 | spacing: 8 109 | 110 | Text { 111 | id: col1 112 | text: name 113 | color: wrapper.ListView.isCurrentItem ? "red" : "black" 114 | font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18 115 | Layout.preferredWidth: 120 116 | } 117 | 118 | Text { 119 | text: cost 120 | color: wrapper.ListView.isCurrentItem ? "red" : "black" 121 | font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18 122 | Layout.preferredWidth: 80 123 | } 124 | 125 | Text { 126 | text: manufacturer 127 | color: wrapper.ListView.isCurrentItem ? "red" : "black" 128 | font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18 129 | Layout.fillWidth: true 130 | } 131 | } 132 | } 133 | } 134 | 135 | Component { 136 | id: phoneModel; 137 | ListModel { 138 | ListElement{ 139 | name: "iPhone 3GS" 140 | cost: "1000" 141 | manufacturer: "Apple" 142 | } 143 | ListElement{ 144 | name: "iPhone 4" 145 | cost: "1800" 146 | manufacturer: "Apple" 147 | } 148 | ListElement{ 149 | name: "iPhone 4S" 150 | cost: "2300" 151 | manufacturer: "Apple" 152 | } 153 | ListElement{ 154 | name: "iPhone 5" 155 | cost: "4900" 156 | manufacturer: "Apple" 157 | } 158 | ListElement{ 159 | name: "B199" 160 | cost: "1590" 161 | manufacturer: "HuaWei" 162 | } 163 | ListElement{ 164 | name: "MI 2S" 165 | cost: "1999" 166 | manufacturer: "XiaoMi" 167 | } 168 | ListElement{ 169 | name: "GALAXY S5" 170 | cost: "4699" 171 | manufacturer: "Samsung" 172 | } 173 | } 174 | } 175 | 176 | ListView { 177 | id: listView 178 | anchors.fill: parent 179 | 180 | delegate: phoneDelegate 181 | model: phoneModel.createObject(listView) 182 | header: headerView 183 | footer: footerView 184 | focus: true 185 | highlight: Rectangle{ 186 | color: "lightblue" 187 | } 188 | 189 | onCurrentIndexChanged: { 190 | if( listView.currentIndex >=0 ){ 191 | var data = listView.model.get(listView.currentIndex) 192 | listView.footerItem.text = data.name + " , " + data.cost + " , " + data.manufacturer 193 | }else{ 194 | listView.footerItem.text = "" 195 | } 196 | } 197 | 198 | // 2.槽函数：添加数据 199 | function addOne() { 200 | model.append( 201 | { 202 | "name": "MX3", 203 | "cost": "1799", 204 | "manufacturer": "MeiZu" 205 | } 206 | ) 207 | } 208 | 209 | // 3.连接信号槽 210 | Component.onCompleted: { 211 | listView.footerItem.clean.connect(listView.model.clear) 212 | listView.footerItem.add.connect(listView.addOne) 213 | } 214 | } 215 | } 216 | -------------------------------------------------------------------------------- /ListViewPhone/QML/phone_list_change_1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/confidentFeng/QML_Demo/4635d3f960e08d4a9d88355c437166d5dc81fcbd/ListViewPhone/QML/phone_list_change_1.PNG -------------------------------------------------------------------------------- /ListViewPhone/QML/phone_list_change_2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/confidentFeng/QML_Demo/4635d3f960e08d4a9d88355c437166d5dc81fcbd/ListViewPhone/QML/phone_list_change_2.PNG -------------------------------------------------------------------------------- /ListViewPhone/QML/phone_list_footer.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/confidentFeng/QML_Demo/4635d3f960e08d4a9d88355c437166d5dc81fcbd/ListViewPhone/QML/phone_list_footer.PNG -------------------------------------------------------------------------------- /ListViewPhone/QML/phone_list_footer.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import QtQuick.Controls 1.2 3 | import QtQuick.Layouts 1.1 4 | 5 | Rectangle { 6 | width: 360 7 | height: 300 8 | color: "#EEEEEE" 9 | 10 | // 1.定义header 11 | Component { 12 | id: headerView 13 | Item { 14 | width: parent.width 15 | height: 30 16 | RowLayout { 17 | anchors.left: parent.left 18 | anchors.verticalCenter: parent.verticalCenter 19 | spacing: 8 20 | Text { 21 | text: "Name" 22 | font.bold: true 23 | font.pixelSize: 20 24 | Layout.preferredWidth: 120 25 | } 26 | 27 | Text { 28 | text: "Cost" 29 | font.bold: true 30 | font.pixelSize: 20 31 | Layout.preferredWidth: 80 32 | } 33 | 34 | Text { 35 | text: "Manufacturer" 36 | font.bold: true 37 | font.pixelSize: 20 38 | Layout.fillWidth: true 39 | } 40 | } 41 | } 42 | } 43 | 44 | // 2. 定义footer 45 | Component { 46 | id: footerView 47 | Text { 48 | width: parent.width 49 | font.italic: true 50 | color: "blue" 51 | height: 30 52 | verticalAlignment: Text.AlignVCenter 53 | } 54 | } 55 | 56 | // 3. 定义model 57 | Component { 58 | id: phoneModel 59 | ListModel { 60 | ListElement{ 61 | name: "iPhone 3GS" 62 | cost: "1000" 63 | manufacturer: "Apple" 64 | } 65 | ListElement{ 66 | name: "iPhone 4" 67 | cost: "1800" 68 | manufacturer: "Apple" 69 | } 70 | ListElement{ 71 | name: "iPhone 4S" 72 | cost: "2300" 73 | manufacturer: "Apple" 74 | } 75 | ListElement{ 76 | name: "iPhone 5" 77 | cost: "4900" 78 | manufacturer: "Apple" 79 | } 80 | ListElement{ 81 | name: "B199" 82 | cost: "1590" 83 | manufacturer: "HuaWei" 84 | } 85 | ListElement{ 86 | name: "MI 2S" 87 | cost: "1999" 88 | manufacturer: "XiaoMi" 89 | } 90 | ListElement{ 91 | name: "GALAXY S5" 92 | cost: "4699" 93 | manufacturer: "Samsung" 94 | } 95 | } 96 | } 97 | 98 | // 4. 定义delegate 99 | Component { 100 | id: phoneDelegate 101 | Item { 102 | id: wrapper 103 | width: parent.width 104 | height: 30 105 | 106 | MouseArea { 107 | anchors.fill: parent 108 | onClicked: wrapper.ListView.view.currentIndex = index 109 | } 110 | 111 | RowLayout { 112 | anchors.left: parent.left 113 | anchors.verticalCenter: parent.verticalCenter 114 | spacing: 8 115 | Text { 116 | id: col1 117 | text: name 118 | color: wrapper.ListView.isCurrentItem ? "red" : "black" 119 | font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18 120 | Layout.preferredWidth: 120 121 | } 122 | 123 | Text { 124 | text: cost 125 | color: wrapper.ListView.isCurrentItem ? "red" : "black" 126 | font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18 127 | Layout.preferredWidth: 80 128 | } 129 | 130 | Text { 131 | text: manufacturer 132 | color: wrapper.ListView.isCurrentItem ? "red" : "black" 133 | font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18 134 | Layout.fillWidth: true 135 | } 136 | } 137 | } 138 | } 139 | 140 | // 5.定义ListView 141 | ListView { 142 | id: listView 143 | anchors.fill: parent 144 | 145 | delegate: phoneDelegate 146 | model: phoneModel.createObject(listView) 147 | header: headerView 148 | footer: footerView 149 | focus: true 150 | highlight: Rectangle{ 151 | color: "lightblue" 152 | } 153 | 154 | onCurrentIndexChanged:{ 155 | if( listView.currentIndex >=0 ){ 156 | var data = listView.model.get(listView.currentIndex) 157 | listView.footerItem.text = data.name + " , " + data.cost + " , " + data.manufacturer; 158 | } 159 | } 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /ListViewPhone/QML/phone_list_header.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/confidentFeng/QML_Demo/4635d3f960e08d4a9d88355c437166d5dc81fcbd/ListViewPhone/QML/phone_list_header.PNG -------------------------------------------------------------------------------- /ListViewPhone/QML/phone_list_header.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import QtQuick.Controls 1.2 3 | import QtQuick.Layouts 1.1 4 | 5 | Rectangle { 6 | width: 360 7 | height: 300 8 | color: "#EEEEEE" 9 | 10 | // 1.定义header 11 | Component { 12 | id: headerView 13 | Item { 14 | width: parent.width 15 | height: 30 16 | RowLayout { 17 | anchors.left: parent.left 18 | anchors.verticalCenter: parent.verticalCenter 19 | spacing: 8 20 | 21 | Text { 22 | text: "Name" 23 | font.bold: true 24 | font.pixelSize: 20 25 | Layout.preferredWidth: 120 26 | } 27 | 28 | Text { 29 | text: "Cost" 30 | font.bold: true 31 | font.pixelSize: 20 32 | Layout.preferredWidth: 80 33 | } 34 | 35 | Text { 36 | text: "Manufacturer" 37 | font.bold: true 38 | font.pixelSize: 20 39 | Layout.fillWidth: true 40 | } 41 | } 42 | } 43 | } 44 | 45 | // 2. 定义delegate 46 | Component { 47 | id: phoneDelegate 48 | Item { 49 | id: wrapper 50 | width: parent.width 51 | height: 30 52 | 53 | MouseArea { 54 | anchors.fill: parent 55 | 56 | onClicked: { 57 | wrapper.ListView.view.currentIndex = index 58 | console.log("index=", index) 59 | } 60 | } 61 | 62 | RowLayout { 63 | anchors.left: parent.left 64 | anchors.verticalCenter: parent.verticalCenter 65 | spacing: 8 66 | 67 | Text { 68 | id: col1; 69 | text: name; 70 | color: wrapper.ListView.isCurrentItem ? "red" : "black" 71 | font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18 72 | Layout.preferredWidth: 120 73 | } 74 | 75 | Text { 76 | text: cost 77 | color: wrapper.ListView.isCurrentItem ? "red" : "black" 78 | font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18 79 | Layout.preferredWidth: 80 80 | } 81 | 82 | Text { 83 | text: manufacturer 84 | color: wrapper.ListView.isCurrentItem ? "red" : "black" 85 | font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18 86 | Layout.fillWidth: true 87 | } 88 | } 89 | } 90 | } 91 | 92 | // 3.定义model 93 | Component { 94 | id: phoneModel 95 | ListModel { 96 | ListElement{ 97 | name: "iPhone 3GS" 98 | cost: "1000" 99 | manufacturer: "Apple" 100 | } 101 | ListElement{ 102 | name: "iPhone 4" 103 | cost: "1800" 104 | manufacturer: "Apple" 105 | } 106 | ListElement{ 107 | name: "iPhone 4S" 108 | cost: "2300" 109 | manufacturer: "Apple" 110 | } 111 | ListElement{ 112 | name: "iPhone 5" 113 | cost: "4900" 114 | manufacturer: "Apple" 115 | } 116 | ListElement{ 117 | name: "B199" 118 | cost: "1590" 119 | manufacturer: "HuaWei" 120 | } 121 | ListElement{ 122 | name: "MI 2S" 123 | cost: "1999" 124 | manufacturer: "XiaoMi" 125 | } 126 | ListElement{ 127 | name: "GALAXY S5" 128 | cost: "4699" 129 | manufacturer: "Samsung" 130 | } 131 | } 132 | } 133 | 134 | // 4.定义ListView 135 | ListView { 136 | id: listView 137 | anchors.fill: parent 138 | 139 | delegate: phoneDelegate 140 | model: phoneModel.createObject(listView) 141 | header: headerView 142 | focus: true 143 | highlight: Rectangle{ 144 | color: "lightblue" 145 | } 146 | } 147 | } 148 | -------------------------------------------------------------------------------- /ListViewPhone/QML/phone_list_simple.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/confidentFeng/QML_Demo/4635d3f960e08d4a9d88355c437166d5dc81fcbd/ListViewPhone/QML/phone_list_simple.PNG -------------------------------------------------------------------------------- /ListViewPhone/QML/phone_list_simple.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.2 2 | import QtQuick.Controls 1.2 3 | import QtQuick.Layouts 1.1 4 | 5 | Rectangle { 6 | width: 360 7 | height: 300 8 | color: "#EEEEEE" 9 | 10 | // 1.定义delegate，内嵌三个Text对象来展示Model定义的ListElement的三个role 11 | Component { 12 | id: phoneDelegate 13 | Item { 14 | id: wrapper 15 | width: parent.width 16 | height: 30 17 | 18 | // 实现了鼠标点选高亮的效果 19 | MouseArea { 20 | anchors.fill: parent; 21 | onClicked: wrapper.ListView.view.currentIndex = index 22 | } 23 | 24 | // 内嵌三个Text对象，水平布局 25 | RowLayout { 26 | anchors.left: parent.left 27 | anchors.verticalCenter: parent.verticalCenter 28 | spacing: 8 29 | 30 | Text { 31 | id: col1; 32 | text: name; 33 | // 是否是当前条目 34 | color: wrapper.ListView.isCurrentItem ? "red" : "black" 35 | font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18 36 | Layout.preferredWidth: 120 37 | } 38 | 39 | Text { 40 | text: cost; 41 | color: wrapper.ListView.isCurrentItem ? "red" : "black" 42 | font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18 43 | Layout.preferredWidth: 80 44 | } 45 | 46 | Text { 47 | text: manufacturer; 48 | color: wrapper.ListView.isCurrentItem ? "red" : "black" 49 | font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18 50 | Layout.fillWidth: true 51 | } 52 | } 53 | } 54 | } // phoneDelegate-END 55 | 56 | // 2.定义ListView 57 | ListView { 58 | id: listView 59 | anchors.fill: parent 60 | 61 | // 使用先前设置的delegate 62 | delegate: phoneDelegate 63 | 64 | // 3.ListModel专门定义列表数据的，它内部维护一个 ListElement 的列表。 65 | model: ListModel { 66 | id: phoneModel 67 | 68 | // 一个 ListElement 对象就代表一条数据 69 | ListElement{ 70 | name: "iPhone 3GS" 71 | cost: "1000" 72 | manufacturer: "Apple" 73 | } 74 | ListElement{ 75 | name: "iPhone 4" 76 | cost: "1800" 77 | manufacturer: "Apple" 78 | } 79 | ListElement{ 80 | name: "iPhone 4S" 81 | cost: "2300" 82 | manufacturer: "Apple" 83 | } 84 | ListElement{ 85 | name: "iPhone 5" 86 | cost: "4900" 87 | manufacturer: "Apple" 88 | } 89 | ListElement{ 90 | name: "B199" 91 | cost: "1590" 92 | manufacturer: "HuaWei" 93 | } 94 | ListElement{ 95 | name: "MI 2S" 96 | cost: "1999" 97 | manufacturer: "XiaoMi" 98 | } 99 | ListElement{ 100 | name: "GALAXY S5" 101 | cost: "4699" 102 | manufacturer: "Samsung" 103 | } 104 | } 105 | 106 | // 背景高亮 107 | focus: true 108 | highlight: Rectangle{ 109 | color: "lightblue" 110 | } 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /ListViewPhone/main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | int main(int argc, char *argv[]) 5 | { 6 | QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); 7 | 8 | QGuiApplication app(argc, argv); 9 | 10 | QQmlApplicationEngine engine; 11 | engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); 12 | if (engine.rootObjects().isEmpty()) 13 | return -1; 14 | 15 | return app.exec(); 16 | } 17 | -------------------------------------------------------------------------------- /ListViewPhone/main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Window 2.2 3 | 4 | Window { 5 | visible: true 6 | width: 640 7 | height: 480 8 | title: qsTr("Hello World") 9 | } 10 | -------------------------------------------------------------------------------- /ListViewPhone/qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | main.qml 4 | QML/phone_list_simple.qml 5 | QML/phone_list_header.qml 6 | QML/phone_list_footer.qml 7 | QML/phone_list_change.qml 8 | QML/phone_list_animation.qml 9 | 10 | 11 | -------------------------------------------------------------------------------- /MyButton/MyButton.pro: -------------------------------------------------------------------------------- 1 | QT += quick 2 | CONFIG += c++11 3 | 4 | # The following define makes your compiler emit warnings if you use 5 | # any feature of Qt which as been marked deprecated (the exact warnings 6 | # depend on your compiler). Please consult the documentation of the 7 | # deprecated API in order to know how to port your code away from it. 8 | DEFINES += QT_DEPRECATED_WARNINGS 9 | 10 | # You can also make your code fail to compile if you use deprecated APIs. 11 | # In order to do so, uncomment the following line. 12 | # You can also select to disable deprecated APIs only up to a certain version of Qt. 13 | #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0 14 | 15 | SOURCES += \ 16 | main.cpp 17 | 18 | RESOURCES += qml.qrc 19 | 20 | # Additional import path used to resolve QML modules in Qt Creator's code model 21 | QML_IMPORT_PATH = 22 | 23 | # Additional import path used to resolve QML modules just for Qt Quick Designer 24 | QML_DESIGNER_IMPORT_PATH = 25 | 26 | # Default rules for deployment. 27 | qnx: target.path = /tmp/$${TARGET}/bin 28 | else: unix:!android: target.path = /opt/$${TARGET}/bin 29 | !isEmpty(target.path): INSTALLS += target 30 | -------------------------------------------------------------------------------- /MyButton/MyButton.pro.user: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | EnvironmentId 7 | {26242a15-bf57-4e9c-9c2e-df3b4fdcf92d} 8 | 9 | 10 | ProjectExplorer.Project.ActiveTarget 11 | 0 12 | 13 | 14 | ProjectExplorer.Project.EditorSettings 15 | 16 | true 17 | false 18 | true 19 | 20 | Cpp 21 | 22 | CppGlobal 23 | 24 | 25 | 26 | QmlJS 27 | 28 | QmlJSGlobal 29 | 30 | 31 | 2 32 | UTF-8 33 | false 34 | 4 35 | false 36 | 80 37 | true 38 | true 39 | 1 40 | true 41 | false 42 | 0 43 | true 44 | true 45 | 0 46 | 8 47 | true 48 | 0 49 | true 50 | true 51 | true 52 | false 53 | 54 | 55 | 56 | ProjectExplorer.Project.PluginSettings 57 | 58 | 59 | -fno-delayed-template-parsing 60 | 61 | true 62 | 63 | 64 | 65 | ProjectExplorer.Project.Target.0 66 | 67 | Desktop Qt 5.11.2 MinGW 32bit 68 | Desktop Qt 5.11.2 MinGW 32bit 69 | qt.qt5.5112.win32_mingw53_kit 70 | 0 71 | 0 72 | 0 73 | 74 | E:/C++ Project/TEST/LearnQml/build-MyButton-Desktop_Qt_5_11_2_MinGW_32bit-Debug 75 | 76 | 77 | true 78 | qmake 79 | 80 | QtProjectManager.QMakeBuildStep 81 | true 82 | 83 | false 84 | false 85 | false 86 | 87 | 88 | true 89 | Make 90 | 91 | Qt4ProjectManager.MakeStep 92 | 93 | false 94 | 95 | 96 | 97 | 2 98 | Build 99 | 100 | ProjectExplorer.BuildSteps.Build 101 | 102 | 103 | 104 | true 105 | Make 106 | 107 | Qt4ProjectManager.MakeStep 108 | 109 | true 110 | clean 111 | 112 | 113 | 1 114 | Clean 115 | 116 | ProjectExplorer.BuildSteps.Clean 117 | 118 | 2 119 | false 120 | 121 | Debug 122 | Debug 123 | Qt4ProjectManager.Qt4BuildConfiguration 124 | 2 125 | true 126 | 127 | 128 | E:/C++ Project/TEST/LearnQml/build-MyButton-Desktop_Qt_5_11_2_MinGW_32bit-Release 129 | 130 | 131 | true 132 | qmake 133 | 134 | QtProjectManager.QMakeBuildStep 135 | false 136 | 137 | false 138 | false 139 | true 140 | 141 | 142 | true 143 | Make 144 | 145 | Qt4ProjectManager.MakeStep 146 | 147 | false 148 | 149 | 150 | 151 | 2 152 | Build 153 | 154 | ProjectExplorer.BuildSteps.Build 155 | 156 | 157 | 158 | true 159 | Make 160 | 161 | Qt4ProjectManager.MakeStep 162 | 163 | true 164 | clean 165 | 166 | 167 | 1 168 | Clean 169 | 170 | ProjectExplorer.BuildSteps.Clean 171 | 172 | 2 173 | false 174 | 175 | Release 176 | Release 177 | Qt4ProjectManager.Qt4BuildConfiguration 178 | 0 179 | true 180 | 181 | 182 | E:/C++ Project/TEST/LearnQml/build-MyButton-Desktop_Qt_5_11_2_MinGW_32bit-Profile 183 | 184 | 185 | true 186 | qmake 187 | 188 | QtProjectManager.QMakeBuildStep 189 | true 190 | 191 | false 192 | true 193 | true 194 | 195 | 196 | true 197 | Make 198 | 199 | Qt4ProjectManager.MakeStep 200 | 201 | false 202 | 203 | 204 | 205 | 2 206 | Build 207 | 208 | ProjectExplorer.BuildSteps.Build 209 | 210 | 211 | 212 | true 213 | Make 214 | 215 | Qt4ProjectManager.MakeStep 216 | 217 | true 218 | clean 219 | 220 | 221 | 1 222 | Clean 223 | 224 | ProjectExplorer.BuildSteps.Clean 225 | 226 | 2 227 | false 228 | 229 | Profile 230 | Profile 231 | Qt4ProjectManager.Qt4BuildConfiguration 232 | 0 233 | true 234 | 235 | 3 236 | 237 | 238 | 0 239 | 部署 240 | 241 | ProjectExplorer.BuildSteps.Deploy 242 | 243 | 1 244 | Deploy Configuration 245 | 246 | ProjectExplorer.DefaultDeployConfiguration 247 | 248 | 1 249 | 250 | 251 | false 252 | false 253 | 1000 254 | 255 | true 256 | 257 | false 258 | false 259 | false 260 | false 261 | true 262 | 0.01 263 | 10 264 | true 265 | 1 266 | 25 267 | 268 | 1 269 | true 270 | false 271 | true 272 | valgrind 273 | 274 | 0 275 | 1 276 | 2 277 | 3 278 | 4 279 | 5 280 | 6 281 | 7 282 | 8 283 | 9 284 | 10 285 | 11 286 | 12 287 | 13 288 | 14 289 | 290 | 2 291 | 292 | MyButton 293 | 294 | Qt4ProjectManager.Qt4RunConfiguration:E:/C++ Project/TEST/LearnQml/MyButton/MyButton.pro 295 | true 296 | 297 | MyButton.pro 298 | 299 | E:/C++ Project/TEST/LearnQml/build-MyButton-Desktop_Qt_5_11_2_MinGW_32bit-Debug 300 | 3768 301 | false 302 | true 303 | false 304 | false 305 | true 306 | 307 | 1 308 | 309 | 310 | 311 | ProjectExplorer.Project.TargetCount 312 | 1 313 | 314 | 315 | ProjectExplorer.Project.Updater.FileVersion 316 | 18 317 | 318 | 319 | Version 320 | 18 321 | 322 | 323 | -------------------------------------------------------------------------------- /MyButton/MyButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Controls 2.4 3 | 4 | Button { 5 | id: root_Button 6 | font.pointSize: 16 // 设置字体大小 7 | 8 | property color clr_font: "#ffffff" 9 | property color clr_backNormal: "#498ff8" 10 | property color clr_backPress: "#0066FF" 11 | property color clr_boardNormal: "#498ff8" 12 | property color clr_boardPress: "#0066FF" 13 | 14 | // 设置按钮文本 15 | contentItem: Text { 16 | id: text2 17 | text: root_Button.text 18 | font: root_Button.font 19 | opacity: enabled ? 1.0 : 0.3 20 | color: clr_font 21 | horizontalAlignment: Text.AlignHCenter 22 | verticalAlignment: Text.AlignVCenter 23 | elide: Text.ElideRight 24 | } 25 | 26 | // 设置按钮背景 27 | background: Rectangle { 28 | implicitWidth: 100 29 | implicitHeight: 40 30 | opacity: enabled ? 1 : 0.3 31 | color: root_Button.down ? clr_backPress : clr_backNormal 32 | border.color: root_Button.down ? clr_boardPress : clr_boardNormal 33 | border.width: 1 34 | radius: 6 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /MyButton/MyIconButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | 3 | Rectangle { 4 | id: rec 5 | 6 | property alias img_src: icon.source 7 | property alias btn_txt: button.text 8 | 9 | property color clr_enter: "#dcdcdc" 10 | property color clr_exit: "#ffffff" 11 | property color clr_click: "#aba9b2" 12 | property color clr_release: "#ffffff" 13 | 14 | //自定义点击信号 15 | signal clickedLeft() 16 | signal clickedRight() 17 | signal release() 18 | 19 | width: 130 20 | height: 130 21 | radius: 10 22 | 23 | Image { 24 | id: icon 25 | width: 80 26 | height: 80 27 | source: "qrc:/camera.png" 28 | fillMode: Image.PreserveAspectFit 29 | clip: true 30 | anchors.top: parent.top 31 | anchors.right: parent.right 32 | anchors.left: parent.left 33 | anchors.margins: 10 34 | } 35 | 36 | Text { 37 | id: button 38 | text: qsTr("button") 39 | 40 | anchors.top: icon.bottom 41 | anchors.topMargin: 5 42 | anchors.horizontalCenter: icon.horizontalCenter 43 | anchors.bottom: icon.bottom 44 | anchors.bottomMargin: 5 45 | 46 | font.bold: true 47 | font.pointSize: 14 48 | } 49 | 50 | MouseArea { 51 | id: mouseArea 52 | anchors.fill: parent 53 | hoverEnabled: true 54 | 55 | //接受左键和右键输入 56 | acceptedButtons: Qt.LeftButton | Qt.RightButton 57 | onClicked: { 58 | //左键点击 59 | if (mouse.button === Qt.LeftButton) 60 | { 61 | parent.clickedLeft() 62 | // console.log(button.text + " Left button click") 63 | } 64 | else if(mouse.button === Qt.RightButton) 65 | { 66 | parent.clickedRight() 67 | } 68 | } 69 | 70 | //按下 71 | onPressed: { 72 | color = clr_click 73 | } 74 | 75 | //释放 76 | onReleased: { 77 | color = clr_enter 78 | parent.release() 79 | } 80 | 81 | //指针进入 82 | onEntered: { 83 | color = clr_enter 84 | } 85 | 86 | //指针退出 87 | onExited: { 88 | color = clr_exit 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /MyButton/ThreeIconButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import QtQuick.Controls 1.4 3 | import QtQuick.Controls.Styles 1.4 4 | 5 | Button 6 | { 7 | id: root_Button 8 | property string nomerPic: "qrc:/image/ok.png" 9 | property string hoverPic: "qrc:/image/ok1.png" 10 | property string pressPic: "qrc:/image/ok2.png" 11 | 12 | style: ButtonStyle { 13 | background:Rectangle{ 14 | implicitHeight: root_Button.height 15 | implicitWidth: root_Button.width 16 | 17 | color: "transparent" // 设置背景透明，否则会出现默认的白色背景 18 | 19 | BorderImage { 20 | anchors.fill: parent 21 | source: control.hovered ? (control.pressed ? pressPic : hoverPic) : nomerPic; 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /MyButton/image/camera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/confidentFeng/QML_Demo/4635d3f960e08d4a9d88355c437166d5dc81fcbd/MyButton/image/camera.png -------------------------------------------------------------------------------- /MyButton/image/dianshiju.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/confidentFeng/QML_Demo/4635d3f960e08d4a9d88355c437166d5dc81fcbd/MyButton/image/dianshiju.png -------------------------------------------------------------------------------- /MyButton/image/music.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/confidentFeng/QML_Demo/4635d3f960e08d4a9d88355c437166d5dc81fcbd/MyButton/image/music.png -------------------------------------------------------------------------------- /MyButton/image/ok.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/confidentFeng/QML_Demo/4635d3f960e08d4a9d88355c437166d5dc81fcbd/MyButton/image/ok.png -------------------------------------------------------------------------------- /MyButton/image/ok1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/confidentFeng/QML_Demo/4635d3f960e08d4a9d88355c437166d5dc81fcbd/MyButton/image/ok1.png -------------------------------------------------------------------------------- /MyButton/image/ok2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/confidentFeng/QML_Demo/4635d3f960e08d4a9d88355c437166d5dc81fcbd/MyButton/image/ok2.png -------------------------------------------------------------------------------- /MyButton/main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | int main(int argc, char *argv[]) 5 | { 6 | QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); 7 | 8 | QGuiApplication app(argc, argv); 9 | 10 | QQmlApplicationEngine engine; 11 | engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); 12 | if (engine.rootObjects().isEmpty()) 13 | return -1; 14 | 15 | return app.exec(); 16 | } 17 | -------------------------------------------------------------------------------- /MyButton/main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Window 2.2 3 | import QtQuick.Controls 2.4 4 | 5 | Window { 6 | visible: true 7 | width: 800 8 | height: 480 9 | title: qsTr("Hello World") 10 | 11 | Grid { 12 | columns : 3 13 | rows: 2 14 | spacing: 80 15 | anchors.centerIn: parent 16 | 17 | MyButton{ 18 | id: btnCancle 19 | width: 100 20 | height: 50 21 | text: "取消" 22 | clr_font: "#498ff8" 23 | clr_backNormal: "#ffffff" 24 | clr_backPress: "#DEE4ED" 25 | clr_boardNormal: "#498ff8" 26 | clr_boardPress: "#498ff8" 27 | 28 | } 29 | 30 | MyButton{ 31 | id: btnOk 32 | width: 100 33 | height: 50 34 | text: "确定" 35 | } 36 | 37 | ThreeIconButton { 38 | width: 150 39 | height: 60 40 | text: "OK" 41 | } 42 | 43 | MyIconButton { 44 | id: btn_camera 45 | img_src: "qrc:/image/camera.png"; 46 | btn_txt: "相机" 47 | onClickedLeft: console.log(btn_txt + " Left button click") 48 | } 49 | 50 | MyIconButton { 51 | id: btn_video 52 | img_src: "qrc:/image/dianshiju.png"; 53 | btn_txt: "视频" 54 | onClickedLeft: console.log(btn_txt + " Left Button click") 55 | } 56 | 57 | MyIconButton { 58 | id: btn_audio 59 | img_src: "qrc:/image/music.png"; 60 | btn_txt: "音乐" 61 | onClickedLeft: console.log(btn_txt + " Left Button click") 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /MyButton/qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | main.qml 4 | MyButton.qml 5 | MyIconButton.qml 6 | ThreeIconButton.qml 7 | image/ok.png 8 | image/ok1.png 9 | image/ok2.png 10 | image/camera.png 11 | image/dianshiju.png 12 | image/music.png 13 | 14 | 15 | -------------------------------------------------------------------------------- /MyVirualKey/.qmake.stash: -------------------------------------------------------------------------------- 1 | QMAKE_CXX.QT_COMPILER_STDCXX = 199711L 2 | QMAKE_CXX.QMAKE_MSC_VER = 1900 3 | QMAKE_CXX.QMAKE_MSC_FULL_VER = 190023026 4 | QMAKE_CXX.COMPILER_MACROS = \ 5 | QT_COMPILER_STDCXX \ 6 | QMAKE_MSC_VER \ 7 | QMAKE_MSC_FULL_VER 8 | QMAKE_CXX.INCDIRS = \ 9 | E:\\technology\\VS2015\\VC\\INCLUDE \ 10 | E:\\technology\\VS2015\\VC\\ATLMFC\\INCLUDE \ 11 | "C:\\Program Files (x86)\\Windows Kits\\10\\include\\10.0.18362.0\\ucrt" \ 12 | "C:\\Program Files (x86)\\Windows Kits\\NETFXSDK\\4.6\\include\\um" \ 13 | "C:\\Program Files (x86)\\Windows Kits\\10\\include\\10.0.18362.0\\shared" \ 14 | "C:\\Program Files (x86)\\Windows Kits\\10\\include\\10.0.18362.0\\um" \ 15 | "C:\\Program Files (x86)\\Windows Kits\\10\\include\\10.0.18362.0\\winrt" 16 | QMAKE_CXX.LIBDIRS = \ 17 | E:\\technology\\VS2015\\VC\\LIB\\amd64 \ 18 | E:\\technology\\VS2015\\VC\\ATLMFC\\LIB\\amd64 \ 19 | "C:\\Program Files (x86)\\Windows Kits\\10\\lib\\10.0.18362.0\\ucrt\\x64" \ 20 | "C:\\Program Files (x86)\\Windows Kits\\NETFXSDK\\4.6\\lib\\um\\x64" \ 21 | "C:\\Program Files (x86)\\Windows Kits\\10\\lib\\10.0.18362.0\\um\\x64" 22 | -------------------------------------------------------------------------------- /MyVirualKey/QML.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | testKey.qml 4 | 5 | 6 | -------------------------------------------------------------------------------- /MyVirualKey/basic.pro: -------------------------------------------------------------------------------- 1 | TEMPLATE = app 2 | TARGET = basic 3 | QT += qml quick quickwidgets 4 | SOURCES += main.cpp 5 | CONFIG += link_pkgconfig 6 | 7 | # 使用静态插件 8 | static { 9 | QT += svg 10 | QTPLUGIN += qtvirtualkeyboardplugin 11 | } 12 | 13 | disable-xcb { 14 | message("The disable-xcb option has been deprecated. Please use disable-desktop instead.") 15 | CONFIG += disable-desktop 16 | } 17 | 18 | disable-layouts { 19 | CONFIG += disable-layouts 20 | } 21 | 22 | target.path = $$[QT_INSTALL_EXAMPLES]/virtualkeyboard/basic 23 | INSTALLS += target 24 | 25 | RESOURCES += \ 26 | demo.qrc 27 | 28 | OTHER_FILES += \ 29 | Basic.qml \ 30 | content/TextField.qml \ 31 | -------------------------------------------------------------------------------- /MyVirualKey/basic.pro.user: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | EnvironmentId 7 | {26242a15-bf57-4e9c-9c2e-df3b4fdcf92d} 8 | 9 | 10 | ProjectExplorer.Project.ActiveTarget 11 | 0 12 | 13 | 14 | ProjectExplorer.Project.EditorSettings 15 | 16 | true 17 | false 18 | true 19 | 20 | Cpp 21 | 22 | CppGlobal 23 | 24 | 25 | 26 | QmlJS 27 | 28 | QmlJSGlobal 29 | 30 | 31 | 2 32 | UTF-8 33 | false 34 | 4 35 | false 36 | 80 37 | true 38 | true 39 | 1 40 | true 41 | false 42 | 0 43 | true 44 | true 45 | 0 46 | 8 47 | true 48 | 0 49 | true 50 | true 51 | true 52 | false 53 | 54 | 55 | 56 | ProjectExplorer.Project.PluginSettings 57 | 58 | 59 | -fno-delayed-template-parsing 60 | 61 | true 62 | Builtin.Questionable 63 | 64 | true 65 | Builtin.DefaultTidyAndClazy 66 | 2 67 | 68 | 69 | 70 | true 71 | 72 | 73 | 74 | 75 | ProjectExplorer.Project.Target.0 76 | 77 | Desktop Qt 5.12.9 MSVC2015 64bit 78 | Desktop Qt 5.12.9 MSVC2015 64bit 79 | qt.qt5.5129.win64_msvc2015_64_kit 80 | 0 81 | 0 82 | 0 83 | 84 | true 85 | 0 86 | E:\C++ Project\QML\basic 87 | E:/C++ Project/QML/basic 88 | 89 | 90 | true 91 | QtProjectManager.QMakeBuildStep 92 | 93 | false 94 | 95 | 96 | 97 | true 98 | Qt4ProjectManager.MakeStep 99 | 100 | false 101 | 102 | 103 | false 104 | 105 | 2 106 | Build 107 | Build 108 | ProjectExplorer.BuildSteps.Build 109 | 110 | 111 | 112 | true 113 | Qt4ProjectManager.MakeStep 114 | 115 | true 116 | clean 117 | 118 | false 119 | 120 | 1 121 | Clean 122 | Clean 123 | ProjectExplorer.BuildSteps.Clean 124 | 125 | 2 126 | false 127 | 128 | Debug 129 | Qt4ProjectManager.Qt4BuildConfiguration 130 | 2 131 | 2 132 | 2 133 | 134 | 1 135 | 136 | 137 | 0 138 | Deploy 139 | Deploy 140 | ProjectExplorer.BuildSteps.Deploy 141 | 142 | 1 143 | 144 | false 145 | ProjectExplorer.DefaultDeployConfiguration 146 | 147 | 1 148 | 149 | 150 | dwarf 151 | 152 | cpu-cycles 153 | 154 | 155 | 250 156 | 157 | -e 158 | cpu-cycles 159 | --call-graph 160 | dwarf,4096 161 | -F 162 | 250 163 | 164 | -F 165 | true 166 | 4096 167 | false 168 | false 169 | 1000 170 | 171 | true 172 | 173 | false 174 | false 175 | false 176 | false 177 | true 178 | 0.01 179 | 10 180 | true 181 | kcachegrind 182 | 1 183 | 25 184 | 185 | 1 186 | true 187 | false 188 | true 189 | valgrind 190 | 191 | 0 192 | 1 193 | 2 194 | 3 195 | 4 196 | 5 197 | 6 198 | 7 199 | 8 200 | 9 201 | 10 202 | 11 203 | 12 204 | 13 205 | 14 206 | 207 | 2 208 | 209 | Qt4ProjectManager.Qt4RunConfiguration:E:/C++ Project/QML/basic/basic.pro 210 | E:/C++ Project/QML/basic/basic.pro 211 | 212 | false 213 | 214 | false 215 | true 216 | true 217 | false 218 | false 219 | true 220 | 221 | E:/C++ Project/QML/basic 222 | 223 | 1 224 | 225 | 226 | 227 | ProjectExplorer.Project.TargetCount 228 | 1 229 | 230 | 231 | ProjectExplorer.Project.Updater.FileVersion 232 | 22 233 | 234 | 235 | Version 236 | 22 237 | 238 | 239 | -------------------------------------------------------------------------------- /MyVirualKey/demo.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | testKey.qml 4 | 5 | 6 | -------------------------------------------------------------------------------- /MyVirualKey/main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | #include 5 | #include 6 | 7 | int main(int argc, char *argv[]) 8 | { 9 | qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard")); 10 | 11 | QApplication a(argc, argv); 12 | 13 | QQuickWidget *mainMapBoxWidget = new QQuickWidget(); 14 | mainMapBoxWidget->setResizeMode(QQuickWidget::SizeRootObjectToView); 15 | mainMapBoxWidget->setSource(QUrl("qrc:/testKey.qml")); 16 | 17 | return a.exec(); 18 | } 19 | -------------------------------------------------------------------------------- /MyVirualKey/testKey.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.10 2 | import QtQuick.Window 2.3 3 | import QtQuick.Controls 2.3 4 | import QtQuick.VirtualKeyboard 2.1 5 | import QtQuick.VirtualKeyboard.Settings 2.1 6 | 7 | Window { 8 | id: root 9 | visible: true 10 | width: 1000 11 | height: 600 12 | color: "#F6F6F6" 13 | 14 | // 使窗口强制获得焦点 15 | MouseArea { 16 | anchors.fill: parent 17 | onClicked: forceActiveFocus() 18 | } 19 | 20 | TextField { 21 | id: textUser 22 | placeholderText: "请输入用户名" 23 | font.family: "Microsoft YaHei" 24 | font.pixelSize: 28 25 | topPadding: 10 26 | anchors.top: parent.top 27 | anchors.topMargin: 40 28 | anchors.left: parent.left 29 | anchors.leftMargin: 40 30 | 31 | background: Rectangle { 32 | implicitWidth: 424 33 | implicitHeight: 50 34 | radius: 4 35 | border.color: parent.focus ? "#498ff8" : "#C4DBFC" 36 | } 37 | 38 | // 当选择输入框的时候才显示键盘 39 | onPressed: { 40 | inputX = x 41 | inputY = y + height 42 | inputPanel.visible = true 43 | } 44 | } 45 | 46 | TextField { 47 | id: textPasswd 48 | placeholderText: "请输入密码" 49 | font.family: "Microsoft YaHei" 50 | font.pixelSize: 28 51 | topPadding: 10 52 | anchors.top: parent.top 53 | anchors.topMargin: 120 54 | anchors.left: parent.left 55 | anchors.leftMargin: 40 56 | 57 | background: Rectangle { 58 | implicitWidth: 424 59 | implicitHeight: 50 60 | radius: 4 61 | border.color: parent.focus ? "#498ff8" : "#C4DBFC" 62 | } 63 | 64 | // 当选择输入框的时候才显示键盘 65 | onPressed: { 66 | inputX = x 67 | inputY = y + height 68 | inputPanel.visible = true 69 | } 70 | } 71 | 72 | property int inputX: 0 // 键盘x坐标(动态) 73 | property int inputY: root.height // 键盘y坐标(动态) 74 | 75 | // 嵌入式虚拟键盘 76 | InputPanel { 77 | id: inputPanel 78 | z: 99 79 | //更改x,y即可更改键盘位置 80 | x: textUser.x 81 | y: root.height 82 | //更改width即可更改键盘大小 83 | width: root.width - 100 84 | visible: false 85 | 86 | externalLanguageSwitchEnabled: false 87 | 88 | states: State { 89 | name: "visible" 90 | when: inputPanel.active 91 | PropertyChanges { 92 | target: inputPanel 93 | // 将键盘顶部放在屏幕底部会使其隐藏起来 94 | x: inputX 95 | y: inputY 96 | } 97 | } 98 | 99 | Component.onCompleted: { 100 | //VirtualKeyboardSettings.locale = "eesti" // 复古键盘样式 101 | VirtualKeyboardSettings.wordCandidateList.alwaysVisible = true 102 | VirtualKeyboardSettings.activeLocales = "lang-zh_TW" 103 | } 104 | 105 | // 这种集成方式下点击隐藏键盘的按钮是没有效果的，只会改变active，因此我们自己处理一下 106 | onActiveChanged: { 107 | if(!active) { visible = false } 108 | } 109 | } 110 | 111 | } 112 | -------------------------------------------------------------------------------- /QmlCallCpp/CppObject.cpp: -------------------------------------------------------------------------------- 1 | #include "CppObject.h" 2 | 3 | #include 4 | 5 | CppObject::CppObject(QObject *parent) 6 | : QObject(parent), 7 | myName("none"), 8 | myYear(0) 9 | { 10 | 11 | } 12 | 13 | void CppObject::setName(const QString &name) 14 | { 15 | qDebug() << "CppObject::setName"< 5 | 6 | // 需要派生自QObject 7 | // 使用qmlRegisterType注册到QML中 8 | class CppObject : public QObject 9 | { 10 | Q_OBJECT 11 | 12 | // 属性：使用Q_PROPERTY注册属性，使之可以在QML中访问 13 | Q_PROPERTY(QString name READ getName WRITE setName NOTIFY nameChanged) 14 | Q_PROPERTY(int year READ getYear WRITE setYear NOTIFY yearChanged) 15 | 16 | public: 17 | explicit CppObject(QObject *parent = nullptr); 18 | 19 | // 给类属性添加访问方法--myName 20 | void setName(const QString &name); 21 | QString getName() const; 22 | // 给类属性添加访问方法--myYear 23 | void setYear(int year); 24 | int getYear() const; 25 | 26 | // 函数：通过Q_INVOKABLE宏标记的public函数可以在QML中访问 27 | Q_INVOKABLE void testFun(); // 功能为打印信息 28 | 29 | signals: 30 | // 信号：可以直接在QML中访问信号 31 | void cppSignalA();//一个无参信号 32 | void cppSignalB(const QString &str,int value); // 一个带参数信号 33 | void nameChanged(const QString name); 34 | void yearChanged(int year); 35 | 36 | public slots: 37 | // 槽函数：可以直接在QML中访问public槽函数 38 | void cppSlotA();//一个无参槽函数 39 | void cppSlotB(const QString &str,int value); // 一个带参数槽函数 40 | 41 | private: 42 | // 类的属性 43 | QString myName; 44 | int myYear; 45 | }; 46 | 47 | #endif // CPPOBJECT_H 48 | -------------------------------------------------------------------------------- /QmlCallCpp/QmlCallCpp.pro: -------------------------------------------------------------------------------- 1 | TEMPLATE = app 2 | 3 | QT += qml quick 4 | 5 | SOURCES += main.cpp \ 6 | CppObject.cpp 7 | 8 | 9 | HEADERS += \ 10 | CppObject.h 11 | 12 | RESOURCES += qml.qrc 13 | -------------------------------------------------------------------------------- /QmlCallCpp/main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | #include "CppObject.h" 5 | 6 | int main(int argc, char *argv[]) 7 | { 8 | QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); 9 | 10 | QGuiApplication app(argc, argv); 11 | 12 | // QML方式：qmlRegisterType注册C++类型至QML 13 | // 参数：qmlRegisterType (import时模块名 主版本号 次版本号 QML中的类型名) 14 | qmlRegisterType("MyCppObject", 1, 0, "CppObject"); 15 | 16 | QQmlApplicationEngine engine; 17 | 18 | // C++方式：也可以注册为qml全局对象 19 | //engine.rootContext()->setContextProperty("cppObj", new CppObject(qApp)); 20 | 21 | engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); 22 | if (engine.rootObjects().isEmpty()) 23 | return -1; 24 | 25 | return app.exec(); 26 | } 27 | -------------------------------------------------------------------------------- /QmlCallCpp/main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Window 2.9 3 | // 引入我们注册的模块 4 | import MyCppObject 1.0 5 | 6 | Window { 7 | id: root 8 | visible: true 9 | width: 500 10 | height: 300 11 | title: qsTr("QML调用Cpp对象") 12 | color: "green" 13 | 14 | signal qmlSignalA 15 | signal qmlSignalB(string str, int value) 16 | 17 | //定义的函数可以作为槽函数 18 | function processB(str, value){ 19 | console.log('qml function processB', str, value) 20 | } 21 | 22 | // 鼠标点击区域 23 | MouseArea{ 24 | anchors.fill: parent 25 | acceptedButtons: Qt.LeftButton | Qt.RightButton 26 | 27 | onClicked: { 28 | if(mouse.button === Qt.LeftButton){ 29 | console.log('----qml 点击左键：Cpp发射信号') 30 | // 1.修改属性会触发set函数，获取值会触发get函数 31 | cpp_obj.name = "gongjianbo" 32 | cpp_obj.year = 1992 33 | // 2.调用Q_INVOKABLE宏标记的函数 34 | cpp_obj.testFun() 35 | // 3.发射C++信号 36 | cpp_obj.cppSignalA() 37 | cpp_obj.cppSignalB("chenglong", 1995) 38 | } 39 | else{ 40 | console.log('----qml 点击右键：QML发射信号') 41 | root.qmlSignalA() 42 | root.qmlSignalB('gongjianbo', 1992) 43 | } 44 | } 45 | } 46 | 47 | // 作为一个QML对象 48 | CppObject{ 49 | id: cpp_obj 50 | //也可以像原生QML对象一样操作，增加属性之类的 51 | property int counts: 0 52 | 53 | onYearChanged: { 54 | counts++ 55 | console.log('qml onYearChanged', counts) 56 | } 57 | onCountsChanged: { 58 | console.log('qml onCountsChanged', counts) 59 | } 60 | } 61 | 62 | // 关联信号与信号处理函数的方式同QML中的类型 63 | Component.onCompleted: { 64 | // 1. Cpp对象的信号关联到Qml的槽函数 65 | // cpp_obj.onCppSignalA.connect(function() {console.log('qml signalA process')}) 66 | cpp_obj.onCppSignalA.connect(()=>console.log('qml signalA process')) // js的lambda 67 | cpp_obj.onCppSignalB.connect(processB) 68 | // 2. Qml对象的信号关联到Cpp的槽函数 69 | root.onQmlSignalA.connect(cpp_obj.cppSlotA) 70 | root.onQmlSignalB.connect(cpp_obj.cppSlotB) 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /QmlCallCpp/qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | main.qml 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # QML_Demo 2 | 存放编写的QML Demo 3 | -------------------------------------------------------------------------------- /signalSlot/CountDownPage.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Controls 2.3 3 | 4 | Rectangle { 5 | id: countDownPage 6 | width: 240 7 | height: 160 8 | color: "#ffffff" 9 | radius: 8 10 | 11 | // 3.定义接收槽函数 12 | function recvName2Date(strName, strDate){ 13 | console.log(strName + " " + strDate); 14 | textName.text = String("距离%1还有").arg(strName) 15 | textDate.text = strDate 16 | } 17 | 18 | // 设置子窗口 19 | Rectangle { 20 | id: subWindow 21 | width: 30 22 | height: 30 23 | visible: false 24 | color: "#000000" 25 | anchors.centerIn: parent 26 | } 27 | 28 | // 标题栏 29 | Rectangle { 30 | id: rectTitle 31 | width: parent.width 32 | height: 40 33 | color: "#498ff8" 34 | radius: 8 35 | anchors.left: parent.left 36 | 37 | // 标题文本 38 | Text { 39 | text: qsTr("倒数日") 40 | color: "#ffffff" 41 | font.pointSize: 20 42 | anchors.left: parent.left 43 | anchors.leftMargin: 12 44 | anchors.verticalCenter: parent.verticalCenter 45 | } 46 | 47 | // 设置按钮 48 | Button { 49 | width: 32 50 | height: 32 51 | text: qsTr("设置") 52 | anchors.right: parent.right 53 | anchors.rightMargin: 8 54 | anchors.verticalCenter: parent.verticalCenter 55 | onClicked: { 56 | var component = Qt.createComponent("CountSetPage.qml"); 57 | if (component.status === Component.Ready) { 58 | var object = component.createObject(iotMainPage, {x:100, y:50, width:400, height:320}) 59 | // 4.使用connect连接信号槽 60 | object.clickBtnOk.connect(recvName2Date); 61 | } 62 | } 63 | } 64 | } 65 | // 填充标题栏"左下"和"右下"的"圆角缺口" 66 | Rectangle { 67 | width: parent.width 68 | height: 8 69 | color: "#498ff8" 70 | anchors.left: parent.left 71 | anchors.bottom: rectTitle.bottom 72 | } 73 | 74 | // 名称文本 75 | Text { 76 | id: textName 77 | text: qsTr("距离期末考试还有") 78 | color: "#808080" 79 | font.pointSize: 18 80 | anchors.top: rectTitle.bottom 81 | anchors.topMargin: 12 82 | anchors.horizontalCenter: parent.horizontalCenter 83 | } 84 | 85 | // 日期文本 86 | Text { 87 | id: textDate 88 | text: qsTr("20") 89 | color: "#D9001B" 90 | font.pointSize: 28 91 | anchors.top: textName.bottom 92 | anchors.topMargin: 12 93 | anchors.horizontalCenter: parent.horizontalCenter 94 | } 95 | 96 | // "天"文本 97 | Text { 98 | text: qsTr("天") 99 | color: "#000000" 100 | font.pointSize: 20 101 | x: 150 102 | y: 120 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /signalSlot/CountDownPage.qmlc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/confidentFeng/QML_Demo/4635d3f960e08d4a9d88355c437166d5dc81fcbd/signalSlot/CountDownPage.qmlc -------------------------------------------------------------------------------- /signalSlot/CountSetPage.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Controls 2.3 3 | 4 | Rectangle { 5 | id: countSetPage 6 | width: 400 7 | height: 320 8 | color: "#ffffff" 9 | radius: 8 10 | 11 | // 1.自定义信号，传递信息 12 | signal clickBtnOk(string strName, string strDate) 13 | 14 | // 标题栏 15 | Rectangle { 16 | id: rectTitle 17 | width: parent.width 18 | height: 40 19 | color: "#498ff8" 20 | anchors.left: parent.left 21 | radius: 8 22 | 23 | // 标题文本 24 | Text { 25 | text: qsTr("常态录播") 26 | color: "#ffffff" 27 | font.pointSize: 20 28 | anchors.left: parent.left 29 | anchors.leftMargin: 12 30 | anchors.verticalCenter: parent.verticalCenter 31 | } 32 | 33 | // 关闭按钮 34 | Button { 35 | id: btnClose 36 | width: 32 37 | height: 32 38 | text: qsTr("设置") 39 | anchors.right: parent.right 40 | anchors.rightMargin: 8 41 | anchors.verticalCenter: parent.verticalCenter 42 | onClicked: countSetPage.destroy() 43 | } 44 | } 45 | // 填充标题栏"左下"和"右下"的"圆角缺口" 46 | Rectangle { 47 | width: parent.width 48 | height: 8 49 | color: "#498ff8" 50 | anchors.left: parent.left 51 | anchors.bottom: rectTitle.bottom 52 | } 53 | 54 | // 单行编辑框相关 55 | Column { 56 | anchors.left: parent.left 57 | anchors.leftMargin: 100 58 | anchors.top: rectTitle.bottom 59 | anchors.topMargin: 12 60 | spacing: 12 61 | 62 | Text { 63 | text: qsTr("名称") 64 | font.pointSize: 16 65 | } 66 | 67 | TextArea { 68 | id: textAreaName 69 | placeholderText: qsTr("期末考试") 70 | font.pointSize: 16 71 | 72 | background: Rectangle { 73 | implicitWidth: 200 74 | implicitHeight: 40 75 | border.color: textAreaName.enabled ? "#21be2b" : "transparent" 76 | } 77 | } 78 | 79 | Text { 80 | text: qsTr("截止日期") 81 | font.pointSize: 16 82 | } 83 | 84 | TextArea { 85 | id: textAreaDate 86 | placeholderText: qsTr("2020-05-04") 87 | font.pointSize: 16 88 | 89 | background: Rectangle { 90 | implicitWidth: 200 91 | implicitHeight: 40 92 | border.color: textAreaDate.enabled ? "#21be2b" : "transparent" 93 | } 94 | } 95 | } 96 | 97 | // 取消按钮 98 | Button { 99 | text: qsTr("取消") 100 | font.pointSize: 20 101 | anchors.left: parent.left 102 | anchors.leftMargin: 40 103 | anchors.bottom: parent.bottom 104 | anchors.bottomMargin: 12 105 | onClicked: countSetPage.destroy() 106 | } 107 | 108 | // 确定按钮 109 | Button { 110 | text: qsTr("确定") 111 | font.pointSize: 20 112 | 113 | anchors.right: parent.right 114 | anchors.rightMargin: 40 115 | anchors.bottom: parent.bottom 116 | anchors.bottomMargin: 12 117 | onClicked: { 118 | if(textAreaName.text == "" && textAreaDate.text == "") 119 | console.log("编辑框必须有输入") 120 | 121 | // 2.发送信号(名称 + 剩余天数) 122 | countSetPage.clickBtnOk(textAreaName.text, textAreaDate.text) 123 | 124 | // 关闭该页面 125 | countSetPage.destroy() 126 | } 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /signalSlot/CountSetPage.qmlc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/confidentFeng/QML_Demo/4635d3f960e08d4a9d88355c437166d5dc81fcbd/signalSlot/CountSetPage.qmlc -------------------------------------------------------------------------------- /signalSlot/main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | int main(int argc, char *argv[]) 5 | { 6 | QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); 7 | 8 | QGuiApplication app(argc, argv); 9 | 10 | QQmlApplicationEngine engine; 11 | engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); 12 | if (engine.rootObjects().isEmpty()) 13 | return -1; 14 | 15 | return app.exec(); 16 | } 17 | -------------------------------------------------------------------------------- /signalSlot/main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.9 2 | import QtQuick.Window 2.2 3 | 4 | Window { 5 | id: iotMainPage 6 | visible: true 7 | width: 600 8 | height: 400 9 | color: "#F2F2F2" 10 | title: qsTr("Hello World") 11 | 12 | // 倒数日页面 13 | CountDownPage { 14 | anchors.top: parent.top 15 | anchors.topMargin: 100 16 | anchors.horizontalCenter: parent.horizontalCenter 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /signalSlot/main.qmlc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/confidentFeng/QML_Demo/4635d3f960e08d4a9d88355c437166d5dc81fcbd/signalSlot/main.qmlc -------------------------------------------------------------------------------- /signalSlot/qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | main.qml 4 | CountDownPage.qml 5 | CountSetPage.qml 6 | 7 | 8 | -------------------------------------------------------------------------------- /signalSlot/signalSlot.pro: -------------------------------------------------------------------------------- 1 | QT += quick 2 | CONFIG += c++11 3 | 4 | # The following define makes your compiler emit warnings if you use 5 | # any feature of Qt which as been marked deprecated (the exact warnings 6 | # depend on your compiler). Please consult the documentation of the 7 | # deprecated API in order to know how to port your code away from it. 8 | DEFINES += QT_DEPRECATED_WARNINGS 9 | 10 | # You can also make your code fail to compile if you use deprecated APIs. 11 | # In order to do so, uncomment the following line. 12 | # You can also select to disable deprecated APIs only up to a certain version of Qt. 13 | #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0 14 | 15 | SOURCES += \ 16 | main.cpp 17 | 18 | RESOURCES += qml.qrc 19 | 20 | # Additional import path used to resolve QML modules in Qt Creator's code model 21 | QML_IMPORT_PATH = 22 | 23 | # Additional import path used to resolve QML modules just for Qt Quick Designer 24 | QML_DESIGNER_IMPORT_PATH = 25 | 26 | # Default rules for deployment. 27 | qnx: target.path = /tmp/$${TARGET}/bin 28 | else: unix:!android: target.path = /opt/$${TARGET}/bin 29 | !isEmpty(target.path): INSTALLS += target 30 | -------------------------------------------------------------------------------- /signalSlot/signalSlot.pro.user: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | EnvironmentId 7 | {26242a15-bf57-4e9c-9c2e-df3b4fdcf92d} 8 | 9 | 10 | ProjectExplorer.Project.ActiveTarget 11 | 0 12 | 13 | 14 | ProjectExplorer.Project.EditorSettings 15 | 16 | true 17 | false 18 | true 19 | 20 | Cpp 21 | 22 | CppGlobal 23 | 24 | 25 | 26 | QmlJS 27 | 28 | QmlJSGlobal 29 | 30 | 31 | 2 32 | UTF-8 33 | false 34 | 4 35 | false 36 | 80 37 | true 38 | true 39 | 1 40 | true 41 | false 42 | 0 43 | true 44 | true 45 | 0 46 | 8 47 | true 48 | 0 49 | true 50 | true 51 | true 52 | false 53 | 54 | 55 | 56 | ProjectExplorer.Project.PluginSettings 57 | 58 | 59 | -fno-delayed-template-parsing 60 | 61 | true 62 | 63 | 64 | 65 | ProjectExplorer.Project.Target.0 66 | 67 | Desktop Qt 5.11.2 MinGW 32bit 68 | Desktop Qt 5.11.2 MinGW 32bit 69 | qt.qt5.5112.win32_mingw53_kit 70 | 0 71 | 0 72 | 0 73 | 74 | E:/C++ Project/QML/build-signalSlot-Desktop_Qt_5_11_2_MinGW_32bit-Debug 75 | 76 | 77 | true 78 | qmake 79 | 80 | QtProjectManager.QMakeBuildStep 81 | true 82 | 83 | false 84 | false 85 | false 86 | 87 | 88 | true 89 | Make 90 | 91 | Qt4ProjectManager.MakeStep 92 | 93 | false 94 | 95 | 96 | 97 | 2 98 | Build 99 | 100 | ProjectExplorer.BuildSteps.Build 101 | 102 | 103 | 104 | true 105 | Make 106 | 107 | Qt4ProjectManager.MakeStep 108 | 109 | true 110 | clean 111 | 112 | 113 | 1 114 | Clean 115 | 116 | ProjectExplorer.BuildSteps.Clean 117 | 118 | 2 119 | false 120 | 121 | Debug 122 | Debug 123 | Qt4ProjectManager.Qt4BuildConfiguration 124 | 2 125 | true 126 | 127 | 128 | E:/C++ Project/QML/build-signalSlot-Desktop_Qt_5_11_2_MinGW_32bit-Release 129 | 130 | 131 | true 132 | qmake 133 | 134 | QtProjectManager.QMakeBuildStep 135 | false 136 | 137 | false 138 | false 139 | true 140 | 141 | 142 | true 143 | Make 144 | 145 | Qt4ProjectManager.MakeStep 146 | 147 | false 148 | 149 | 150 | 151 | 2 152 | Build 153 | 154 | ProjectExplorer.BuildSteps.Build 155 | 156 | 157 | 158 | true 159 | Make 160 | 161 | Qt4ProjectManager.MakeStep 162 | 163 | true 164 | clean 165 | 166 | 167 | 1 168 | Clean 169 | 170 | ProjectExplorer.BuildSteps.Clean 171 | 172 | 2 173 | false 174 | 175 | Release 176 | Release 177 | Qt4ProjectManager.Qt4BuildConfiguration 178 | 0 179 | true 180 | 181 | 182 | E:/C++ Project/QML/build-signalSlot-Desktop_Qt_5_11_2_MinGW_32bit-Profile 183 | 184 | 185 | true 186 | qmake 187 | 188 | QtProjectManager.QMakeBuildStep 189 | true 190 | 191 | false 192 | true 193 | true 194 | 195 | 196 | true 197 | Make 198 | 199 | Qt4ProjectManager.MakeStep 200 | 201 | false 202 | 203 | 204 | 205 | 2 206 | Build 207 | 208 | ProjectExplorer.BuildSteps.Build 209 | 210 | 211 | 212 | true 213 | Make 214 | 215 | Qt4ProjectManager.MakeStep 216 | 217 | true 218 | clean 219 | 220 | 221 | 1 222 | Clean 223 | 224 | ProjectExplorer.BuildSteps.Clean 225 | 226 | 2 227 | false 228 | 229 | Profile 230 | Profile 231 | Qt4ProjectManager.Qt4BuildConfiguration 232 | 0 233 | true 234 | 235 | 3 236 | 237 | 238 | 0 239 | 部署 240 | 241 | ProjectExplorer.BuildSteps.Deploy 242 | 243 | 1 244 | Deploy Configuration 245 | 246 | ProjectExplorer.DefaultDeployConfiguration 247 | 248 | 1 249 | 250 | 251 | false 252 | false 253 | 1000 254 | 255 | true 256 | 257 | false 258 | false 259 | false 260 | false 261 | true 262 | 0.01 263 | 10 264 | true 265 | 1 266 | 25 267 | 268 | 1 269 | true 270 | false 271 | true 272 | valgrind 273 | 274 | 0 275 | 1 276 | 2 277 | 3 278 | 4 279 | 5 280 | 6 281 | 7 282 | 8 283 | 9 284 | 10 285 | 11 286 | 12 287 | 13 288 | 14 289 | 290 | 2 291 | 292 | signalSlot 293 | 294 | Qt4ProjectManager.Qt4RunConfiguration:E:/C++ Project/QML/signalSlot/signalSlot.pro 295 | true 296 | 297 | signalSlot.pro 298 | 299 | E:/C++ Project/QML/build-signalSlot-Desktop_Qt_5_11_2_MinGW_32bit-Debug 300 | 3768 301 | false 302 | true 303 | false 304 | false 305 | true 306 | 307 | 1 308 | 309 | 310 | 311 | ProjectExplorer.Project.TargetCount 312 | 1 313 | 314 | 315 | ProjectExplorer.Project.Updater.FileVersion 316 | 18 317 | 318 | 319 | Version 320 | 18 321 | 322 | 323 | --------------------------------------------------------------------------------