├── .gitignore ├── Qt-Qml-Calendar ├── .gitignore ├── Day.qml ├── DayTemplet.qml ├── OneMonth.qml ├── README.md ├── Rili.pro ├── icon │ ├── arrowleft.png │ ├── arrowright.png │ └── demo.gif ├── main.cpp ├── main.qml ├── qml.qrc └── qtquickcontrols2.conf ├── Qt-Qml-Contacts ├── .gitignore ├── AddressList.pro ├── AddressList.qml ├── Pinyin.js ├── README.md ├── demo.gif ├── main.cpp ├── main.qml └── qml.qrc ├── Qt-Qml-Echarts ├── .gitignore ├── MyWebView.qml ├── README.md ├── TestEchart.pro ├── echarts.js ├── main.cpp ├── main.qml ├── qml.qrc ├── qtquickcontrols2.conf └── test.html └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # C++ objects and libs 2 | *.slo 3 | *.lo 4 | *.o 5 | *.a 6 | *.la 7 | *.lai 8 | *.so 9 | *.dll 10 | *.dylib 11 | 12 | # Qt-es 13 | object_script.*.Release 14 | object_script.*.Debug 15 | *_plugin_import.cpp 16 | /.qmake.cache 17 | /.qmake.stash 18 | *.pro.user 19 | *.pro.user.* 20 | *.qbs.user 21 | *.qbs.user.* 22 | *.moc 23 | moc_*.cpp 24 | moc_*.h 25 | qrc_*.cpp 26 | ui_*.h 27 | *.qmlc 28 | *.jsc 29 | Makefile* 30 | *build-* 31 | 32 | # Qt unit tests 33 | target_wrapper.* 34 | 35 | # QtCreator 36 | *.autosave 37 | 38 | # QtCreator Qml 39 | *.qmlproject.user 40 | *.qmlproject.user.* 41 | 42 | # QtCreator CMake 43 | CMakeLists.txt.user* 44 | -------------------------------------------------------------------------------- /Qt-Qml-Calendar/.gitignore: -------------------------------------------------------------------------------- 1 | # C++ objects and libs 2 | *.slo 3 | *.lo 4 | *.o 5 | *.a 6 | *.la 7 | *.lai 8 | *.so 9 | *.dll 10 | *.dylib 11 | 12 | # Qt-es 13 | object_script.*.Release 14 | object_script.*.Debug 15 | *_plugin_import.cpp 16 | /.qmake.cache 17 | /.qmake.stash 18 | *.pro.user 19 | *.pro.user.* 20 | *.qbs.user 21 | *.qbs.user.* 22 | *.moc 23 | moc_*.cpp 24 | moc_*.h 25 | qrc_*.cpp 26 | ui_*.h 27 | *.qmlc 28 | *.jsc 29 | Makefile* 30 | *build-* 31 | 32 | # Qt unit tests 33 | target_wrapper.* 34 | 35 | # QtCreator 36 | *.autosave 37 | 38 | # QtCreator Qml 39 | *.qmlproject.user 40 | *.qmlproject.user.* 41 | 42 | # QtCreator CMake 43 | CMakeLists.txt.user* 44 | -------------------------------------------------------------------------------- /Qt-Qml-Calendar/Day.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import QtQuick.Controls 1.4 3 | import QtQuick.Controls.Styles 1.4 4 | import QtQuick.Controls 2.0 5 | 6 | Item { 7 | width: 800 8 | height: 720 9 | id:item 10 | property var dayList: [] 11 | property int year 12 | property int month 13 | property int day 14 | property var weekDay //星期几 15 | signal clickFresh(); 16 | 17 | Component.onCompleted: { 18 | var nowTime = new Date(); 19 | console.log("nowTime："+nowTime) 20 | year = nowTime.getFullYear() 21 | month = nowTime.getMonth() 22 | day = nowTime.getDate() 23 | // console.log("nowTimeyear："+year) 24 | // console.log("nowTimemonth："+month)//8 表示9月 25 | // console.log("nowTimeDay："+day) 26 | // initView(year,month,day) 27 | 28 | } 29 | 30 | function addMonth(){ 31 | // console.log("+1月") 32 | pathView.incrementCurrentIndex() 33 | refresh(); 34 | } 35 | 36 | function reduceMonth(){ 37 | // console.log("-1月") 38 | pathView.decrementCurrentIndex() 39 | refresh(); 40 | } 41 | 42 | function getShowText(year,month){ 43 | var showMonth = month+1 44 | var showText = year+"/"+("0"+showMonth).substring(("0"+showMonth).length-2,(("0"+showMonth).length)) 45 | return showText; 46 | } 47 | 48 | 49 | function refresh(){ 50 | var cIndex = pathView.currentIndex 51 | // console.log("onMovementEnded", "currentIndex："+cIndex) 52 | //pathView.currentIndex表示的是最左边的model 53 | //因为中间的一位永远是在显示的状态，所以在停止滑动之后，改变最左边和最右边的数据 54 | // console.log("当前月：",riliModel.get((cIndex+1)%3).data_month) 55 | // console.log("上一月：",riliModel.getMonth(0,riliModel.get((cIndex+1)%3).data_year,riliModel.get((cIndex+1)%3).data_month)) 56 | 57 | riliModel.setProperty(cIndex, 58 | "data_year", 59 | riliModel.getYear(0, 60 | riliModel.get((cIndex+1)%3).data_year, 61 | riliModel.get((cIndex+1)%3).data_month 62 | ) 63 | ) 64 | riliModel.setProperty(cIndex, "data_month", riliModel.getMonth(0,riliModel.get((cIndex+1)%3).data_year,riliModel.get((cIndex+1)%3).data_month)) 65 | riliModel.setProperty((cIndex+2)%3, "data_year", riliModel.getYear(2,riliModel.get((cIndex+1)%3).data_year,riliModel.get((cIndex+1)%3).data_month)) 66 | riliModel.setProperty((cIndex+2)%3, "data_month", riliModel.getMonth(2,riliModel.get((cIndex+1)%3).data_year,riliModel.get((cIndex+1)%3).data_month)) 67 | // riliModel.sync();// 这部不能省略，但是报错List sync() can only be called from a WorkerScript 68 | pathView.model = riliModel 69 | // oneMonth.initView(); 70 | tv.text = getShowText(riliModel.get((cIndex+1)%3).data_year,riliModel.get((cIndex+1)%3).data_month) 71 | item.clickFresh(); 72 | } 73 | //当停止滑动，页面静止之后，更新currentIndex 74 | Connections{ 75 | target: pathView 76 | onMovementEnded:{ 77 | refresh(); 78 | } 79 | } 80 | 81 | 82 | 83 | 84 | Rectangle { 85 | id: rectangle 86 | color: "#2c2f38" 87 | radius: 10 88 | border.width: 0 89 | anchors.fill: parent 90 | 91 | Rectangle { 92 | id: rectangle1 93 | height: 42 94 | color: "#1e1f23" 95 | radius: 5 96 | anchors.right: parent.right 97 | anchors.rightMargin: 80 98 | anchors.left: parent.left 99 | anchors.leftMargin: 80 100 | anchors.top: parent.top 101 | anchors.topMargin: 20 102 | 103 | Text { 104 | id: tv 105 | color: "#ffffff" 106 | text: getShowText(year,month) 107 | anchors.centerIn: parent 108 | font.pixelSize: 25 109 | } 110 | } 111 | 112 | Image { 113 | id: image 114 | width: 42 115 | height: 42 116 | anchors.top: rectangle1.top 117 | anchors.topMargin: 0 118 | anchors.left: parent.left 119 | anchors.leftMargin: 15 120 | source: "icon/arrowleft.png" 121 | 122 | MouseArea{ 123 | anchors.fill: parent 124 | onClicked: { 125 | item.reduceMonth() 126 | } 127 | } 128 | 129 | } 130 | 131 | Image { 132 | id: image1 133 | x: 225 134 | width: 42 135 | height: 42 136 | anchors.top: rectangle1.top 137 | anchors.topMargin: 0 138 | anchors.right: parent.right 139 | anchors.rightMargin: 15 140 | source: "icon/arrowright.png" 141 | MouseArea{ 142 | anchors.fill: parent 143 | onClicked: { 144 | item.addMonth() 145 | } 146 | } 147 | } 148 | 149 | 150 | Rectangle { 151 | id: rectangle2 152 | color: "#2c2f38" 153 | anchors.bottom: parent.bottom 154 | anchors.bottomMargin: 50 155 | anchors.right: parent.right 156 | anchors.rightMargin: 50 157 | anchors.left: parent.left 158 | anchors.leftMargin: 50 159 | anchors.top: rectangle1.bottom 160 | anchors.topMargin: 50 161 | 162 | Row { 163 | id: row 164 | x: 38 165 | width: children.width+spacing*6 166 | height: 70 167 | anchors.horizontalCenter: parent.horizontalCenter 168 | spacing: 40 169 | anchors.top: parent.top 170 | anchors.topMargin: 0 171 | 172 | Text { 173 | id: text1 174 | width: 60 175 | color: "#ffffff" 176 | text: qsTr("周日") 177 | horizontalAlignment: Text.AlignHCenter 178 | anchors.verticalCenter: parent.verticalCenter 179 | font.pixelSize: 25 180 | } 181 | 182 | Text { 183 | id: text2 184 | width: 60 185 | color: "#ffffff" 186 | text: qsTr("周一") 187 | anchors.verticalCenter: parent.verticalCenter 188 | horizontalAlignment: Text.AlignHCenter 189 | font.pixelSize: 25 190 | } 191 | 192 | Text { 193 | id: text3 194 | width: 60 195 | color: "#ffffff" 196 | text: qsTr("周二") 197 | anchors.verticalCenter: parent.verticalCenter 198 | horizontalAlignment: Text.AlignHCenter 199 | font.pixelSize: 25 200 | } 201 | 202 | Text { 203 | id: text4 204 | width: 60 205 | color: "#ffffff" 206 | text: qsTr("周三") 207 | anchors.verticalCenter: parent.verticalCenter 208 | horizontalAlignment: Text.AlignHCenter 209 | font.pixelSize: 25 210 | } 211 | 212 | Text { 213 | id: text5 214 | width: 60 215 | color: "#ffffff" 216 | text: qsTr("周四") 217 | anchors.verticalCenter: parent.verticalCenter 218 | horizontalAlignment: Text.AlignHCenter 219 | font.pixelSize: 25 220 | } 221 | 222 | Text { 223 | id: text6 224 | width: 60 225 | color: "#ffffff" 226 | text: qsTr("周五") 227 | anchors.verticalCenter: parent.verticalCenter 228 | horizontalAlignment: Text.AlignHCenter 229 | font.pixelSize: 25 230 | } 231 | 232 | Text { 233 | id: text7 234 | width: 60 235 | color: "#ffffff" 236 | text: qsTr("周六") 237 | anchors.verticalCenter: parent.verticalCenter 238 | horizontalAlignment: Text.AlignHCenter 239 | font.pixelSize: 25 240 | } 241 | } 242 | 243 | //日历的数字显示区 244 | Rectangle { 245 | id: rectangle3 246 | color: "#2c2f38" 247 | height: parent.height-row.height 248 | width: parent.width 249 | anchors.bottom: parent.bottom 250 | anchors.right: parent.right 251 | anchors.left: parent.left 252 | anchors.top: row.bottom 253 | clip: true 254 | 255 | PathView { 256 | id: pathView 257 | anchors.fill: parent 258 | model: riliModel 259 | delegate: delegate 260 | currentIndex : 0 261 | clip:true 262 | path: Path { 263 | 264 | startX: - pathView.width/2 265 | startY: pathView.height/2 266 | 267 | PathLine { 268 | x: pathView.width*2.5 269 | y: pathView.height / 2 270 | } 271 | 272 | } 273 | 274 | //路径上可见的项目数。如果不设置则会全部显示出来 275 | pathItemCount:3 276 | //不让它有拖拉惯性，无论拖拉再远都只显示路径上紧邻的一个 277 | snapMode:PathView.SnapOneItem 278 | } 279 | 280 | 281 | //日历的数据，平常的日历只用传入年和月。 282 | ListModel { 283 | id: riliModel 284 | 285 | //ListElement里面不允许写JS语法 286 | 287 | Component.onCompleted: { 288 | riliModel.append({"data_year": getYear(0,year,month),"data_month": getMonth(0,year,month)}) 289 | riliModel.append({"data_year": getYear(1,year,month),"data_month": getMonth(1,year,month)}) 290 | riliModel.append({"data_year": getYear(2,year,month),"data_month": getMonth(2,year,month)}) 291 | } 292 | 293 | function getMonth(index,year,month){ 294 | if(index === 1){ 295 | return month 296 | }else if(index === 0){ 297 | return month === 0 ? 11:month-1//如果是一月份，那么月份为11 298 | }else{ 299 | return month === 11 ? 0:month+1 300 | } 301 | } 302 | 303 | function getYear(index,year,month){ 304 | if(index === 1){ 305 | return year 306 | }else if(index === 0){ 307 | return month === 0 ? year -1:year //如果是一月份，那么年份减一 308 | }else{ 309 | return month === 11 ?year +1:year 310 | } 311 | } 312 | } 313 | 314 | //代理，显示一个月的日历控件 315 | Component { 316 | id:delegate 317 | OneMonth{ 318 | height: rectangle3.height 319 | width: rectangle3.width 320 | year: data_year 321 | month: data_month 322 | } 323 | 324 | } 325 | 326 | 327 | 328 | } 329 | 330 | 331 | } 332 | } 333 | } 334 | -------------------------------------------------------------------------------- /Qt-Qml-Calendar/DayTemplet.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import QtQuick.Controls 1.4 3 | import QtQuick.Controls.Styles 1.4 4 | 5 | Button { 6 | 7 | width: 100 8 | height: 100 9 | property var number: 01 //显示的数字 10 | property var beClicked:false //是否被点击过 11 | property var isPass: true //是否已经过了，用来设置文字的颜色。没过为灰色，不可点击，过了的为白色 12 | id: control 13 | 14 | 15 | Text { 16 | text: qsTr("" + number) 17 | anchors.centerIn: parent 18 | font.pixelSize: 30 19 | //如果是“今”：白色/如果 20 | color:text=="今"?"white": control.checked?"white":isPass ? "#aaffffff" : "gray" 21 | horizontalAlignment: Text.AlignHCenter 22 | verticalAlignment: Text.AlignVCenter 23 | } 24 | 25 | style: ButtonStyle { 26 | background:Rectangle { 27 | anchors.fill: parent 28 | opacity: enabled ? 1 : 0.3 //透明度 29 | color: control.checked ? "#4975F8" : "#2C2F38" 30 | 31 | Rectangle { 32 | id: rectangle 33 | x: 12 34 | width: 6 35 | height: 6 36 | color: "#4975F8" 37 | radius: 3 38 | anchors.bottom: parent.bottom 39 | anchors.bottomMargin: 15 40 | anchors.horizontalCenter: parent.horizontalCenter 41 | visible:number===""?false:!beClicked 42 | } 43 | 44 | } 45 | 46 | } 47 | 48 | 49 | onClicked: { 50 | if(number!==""){ 51 | control.checked = true; 52 | beClicked = true 53 | }} 54 | } 55 | 56 | 57 | -------------------------------------------------------------------------------- /Qt-Qml-Calendar/OneMonth.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import QtQuick.Controls 1.4 3 | 4 | 5 | Item { 6 | //提供给外界的参数 7 | id:oneMonth 8 | property int year 9 | property int month 10 | property var dayList: [] 11 | property var nowDate : new Date() 12 | 13 | Component.onCompleted: { 14 | initView(year,month) 15 | } 16 | 17 | 18 | Connections{ 19 | target:item 20 | onClickFresh:{ 21 | initView(year,month) 22 | } 23 | } 24 | 25 | // 根据年、和月（日）来刷新视图 26 | function initView(x_year,x_month){ 27 | 28 | dayList = [] 29 | //获取month月天数： 30 | var daycount = new Date(x_year,x_month+1,0).getDate(); 31 | // console.log((x_month+1)+"月天数："+daycount) 32 | // var myDate = new Date(x_year,x_month,x_day); 33 | // console.log("myDate"+myDate) 34 | // console.log("2018年11月1号是星期："+new Date(2018,10,1).getDay()) 35 | //这个月的第一号是星期几(getDay方法) 36 | var weeDate = new Date(x_year,x_month,1); 37 | var weekDay = weeDate.getDay(); 38 | // console.log("这个月一号是星期："+weekDay) 39 | // 加入dayList,先加入上个月的空白，然后加入本月的日期 40 | for(var i = 1;i<=weekDay;i++){ 41 | dayList.push("") 42 | } 43 | 44 | for(var i = 1;i<=daycount;i++){ 45 | var str = ("0"+i); 46 | dayList.push(str.substring(str.length-2,str.length)) //QML 的数组插入元素为push方法 47 | } 48 | 49 | // console.log(dayList) 50 | repeater.model = dayList //需要手动指定model去刷新控件 51 | // console.log("--------") 52 | } 53 | 54 | 55 | //显示一个月的日历控件 56 | 57 | Grid { 58 | id: grid 59 | anchors.fill: parent 60 | columns:7 61 | spacing:1 62 | 63 | ExclusiveGroup { 64 | id: buttonGroup 65 | } 66 | 67 | Repeater{ 68 | id:repeater 69 | model:dayList 70 | delegate: 71 | DayTemplet{ 72 | exclusiveGroup:buttonGroup //1.4里面的属性 73 | width: grid.width/7-1 74 | height: grid.height/6-1 75 | number:year == nowDate.getFullYear()?month == nowDate.getMonth()?modelData==nowDate.getDate()?"今":modelData:modelData:modelData 76 | isPass: judgePass(year,month) 77 | 78 | function judgePass(year,month){ 79 | if(yearnowDate.getFullYear()){ 82 | return false 83 | }else{ 84 | if(monthnowDate.getMonth()) 87 | return false; 88 | else{ 89 | if(modelData<=nowDate.getDate()) 90 | return true; 91 | else 92 | return false; 93 | } 94 | } 95 | } 96 | } 97 | } 98 | } 99 | 100 | 101 | } 102 | -------------------------------------------------------------------------------- /Qt-Qml-Calendar/README.md: -------------------------------------------------------------------------------- 1 | # QtCalendar 2 | > QT/QML 的日历控件 3 | 4 | 基于`PathView`绘制 5 | 6 | ## 效果图 7 | ![](https://github.com/licoba/QtProjects/blob/master/Qt-Qml-Calendar/icon/demo.gif) 8 | -------------------------------------------------------------------------------- /Qt-Qml-Calendar/Rili.pro: -------------------------------------------------------------------------------- 1 | QT += qml quick 2 | 3 | CONFIG += c++11 4 | 5 | SOURCES += main.cpp 6 | 7 | RESOURCES += qml.qrc 8 | 9 | # Additional import path used to resolve QML modules in Qt Creator's code model 10 | QML_IMPORT_PATH = 11 | 12 | # Additional import path used to resolve QML modules just for Qt Quick Designer 13 | QML_DESIGNER_IMPORT_PATH = 14 | 15 | # The following define makes your compiler emit warnings if you use 16 | # any feature of Qt which as been marked deprecated (the exact warnings 17 | # depend on your compiler). Please consult the documentation of the 18 | # deprecated API in order to know how to port your code away from it. 19 | DEFINES += QT_DEPRECATED_WARNINGS 20 | 21 | # You can also make your code fail to compile if you use deprecated APIs. 22 | # In order to do so, uncomment the following line. 23 | # You can also select to disable deprecated APIs only up to a certain version of Qt. 24 | #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0 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 | -------------------------------------------------------------------------------- /Qt-Qml-Calendar/icon/arrowleft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/licoba/QtProjects/4195e81082b47e640d2797516175f96ed6b95f4c/Qt-Qml-Calendar/icon/arrowleft.png -------------------------------------------------------------------------------- /Qt-Qml-Calendar/icon/arrowright.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/licoba/QtProjects/4195e81082b47e640d2797516175f96ed6b95f4c/Qt-Qml-Calendar/icon/arrowright.png -------------------------------------------------------------------------------- /Qt-Qml-Calendar/icon/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/licoba/QtProjects/4195e81082b47e640d2797516175f96ed6b95f4c/Qt-Qml-Calendar/icon/demo.gif -------------------------------------------------------------------------------- /Qt-Qml-Calendar/main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | int main(int argc, char *argv[]) 5 | { 6 | QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); 7 | QGuiApplication app(argc, argv); 8 | 9 | QQmlApplicationEngine engine; 10 | engine.load(QUrl(QLatin1String("qrc:/main.qml"))); 11 | 12 | return app.exec(); 13 | } 14 | -------------------------------------------------------------------------------- /Qt-Qml-Calendar/main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import QtQuick.Controls 2.0 3 | import QtQuick.Layouts 1.0 4 | 5 | ApplicationWindow { 6 | visible: true 7 | width: 1280 8 | height: 800 9 | title: qsTr("日历控件") 10 | color:"#232429" 11 | 12 | Day { 13 | anchors.centerIn: parent 14 | } 15 | 16 | // SwipeView { 17 | // id: swipeView 18 | // // width: 800 19 | // // height: 720 20 | // // anchors.centerIn: parent 21 | // anchors.fill: parent 22 | // currentIndex: tabBar.currentIndex 23 | 24 | // Item{ 25 | 26 | // Day { 27 | // anchors.centerIn: parent 28 | // } 29 | // } 30 | 31 | // Page { 32 | // Label { 33 | // text: qsTr("Second page") 34 | // anchors.centerIn: parent 35 | // } 36 | // } 37 | // } 38 | 39 | // footer: TabBar { 40 | // id: tabBar 41 | // currentIndex: swipeView.currentIndex 42 | // TabButton { 43 | // text: qsTr("日历") 44 | // } 45 | // TabButton { 46 | // text: qsTr("Second") 47 | // } 48 | // } 49 | 50 | 51 | 52 | } 53 | -------------------------------------------------------------------------------- /Qt-Qml-Calendar/qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | icon/arrowleft.png 4 | icon/arrowright.png 5 | Day.qml 6 | DayTemplet.qml 7 | main.cpp 8 | main.qml 9 | qml.qrc 10 | qtquickcontrols2.conf 11 | Rili.pro 12 | OneMonth.qml 13 | 14 | 15 | -------------------------------------------------------------------------------- /Qt-Qml-Calendar/qtquickcontrols2.conf: -------------------------------------------------------------------------------- 1 | ; This file can be edited to change the style of the application 2 | ; See Styling Qt Quick Controls 2 in the documentation for details: 3 | ; http://doc.qt.io/qt-5/qtquickcontrols2-styles.html 4 | 5 | [Controls] 6 | Style=Default 7 | 8 | [Universal] 9 | Theme=Light 10 | ;Accent=Steel 11 | 12 | [Material] 13 | Theme=Light 14 | ;Accent=BlueGrey 15 | ;Primary=BlueGray 16 | -------------------------------------------------------------------------------- /Qt-Qml-Contacts/.gitignore: -------------------------------------------------------------------------------- 1 | # C++ objects and libs 2 | *.slo 3 | *.lo 4 | *.o 5 | *.a 6 | *.la 7 | *.lai 8 | *.so 9 | *.dll 10 | *.dylib 11 | 12 | # Qt-es 13 | object_script.*.Release 14 | object_script.*.Debug 15 | *_plugin_import.cpp 16 | /.qmake.cache 17 | /.qmake.stash 18 | *.pro.user 19 | *.pro.user.* 20 | *.qbs.user 21 | *.qbs.user.* 22 | *.moc 23 | moc_*.cpp 24 | moc_*.h 25 | qrc_*.cpp 26 | ui_*.h 27 | *.qmlc 28 | *.jsc 29 | Makefile* 30 | *build-* 31 | 32 | # Qt unit tests 33 | target_wrapper.* 34 | 35 | # QtCreator 36 | *.autosave 37 | 38 | # QtCreator Qml 39 | *.qmlproject.user 40 | *.qmlproject.user.* 41 | 42 | # QtCreator CMake 43 | CMakeLists.txt.user* 44 | -------------------------------------------------------------------------------- /Qt-Qml-Contacts/AddressList.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 | -------------------------------------------------------------------------------- /Qt-Qml-Contacts/AddressList.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import QtQuick.Layouts 1.1 3 | import QtQuick.Controls 2.1 4 | import "./Pinyin.js" as PinyinUtil 5 | Item { 6 | width: 1870/2 7 | height: 1000 8 | 9 | property var letters: ["A","B","C","D","E","F","G","H","I","J","K", 10 | "L","M","N","O","P","Q","R","S","T","U","V","W", 11 | "X","Y","Z","#"] 12 | 13 | 14 | //联系人列表 15 | Item{ 16 | width: parent.width 17 | height: parent.height 18 | anchors.centerIn: parent 19 | 20 | 21 | Rectangle{ 22 | anchors.fill: parent 23 | color: "#2A2D33" 24 | } 25 | 26 | Component { 27 | id:sectionHeader 28 | Item { 29 | width: 100 30 | height: 120 31 | 32 | Text { 33 | // anchors.verticalCenter: parent.verticalCenter 34 | text: section.toUpperCase()/*.substr(0, 1)*/ 35 | font.pixelSize: 54 36 | anchors.left: parent.left 37 | anchors.leftMargin: 40 38 | color: "#545a66" 39 | anchors.bottom: parent.bottom 40 | } 41 | } 42 | } 43 | 44 | 45 | 46 | 47 | ListView{ 48 | 49 | //listview的分组不会自动排序 50 | width:parent.width;height: parent.height-130 51 | anchors.bottom: parent.bottom 52 | clip: true 53 | id:listView 54 | // spacing:20 55 | 56 | model: testModel 57 | delegate: Item { 58 | height: 120 59 | width: parent.width 60 | Text { 61 | text: listView.getShowTextSpecial(name) 62 | anchors.verticalCenter: parent.verticalCenter 63 | color: "#858fa2" 64 | font.pixelSize: 45 65 | x:40 66 | } 67 | Rectangle{ 68 | anchors.bottom: parent.bottom 69 | color: "#1a1c20" 70 | width: parent.width 71 | height: 1 72 | } 73 | } 74 | 75 | ScrollIndicator.vertical: ScrollIndicator { 76 | anchors.right: parent.right 77 | anchors.rightMargin: 10 78 | contentItem: Rectangle { 79 | implicitWidth: 8 80 | radius: implicitWidth/2 81 | color: "#0f1115" 82 | } 83 | } 84 | 85 | function getShowTextSpecial(str){ 86 | var first = str[0]; 87 | if (first === "#") 88 | return str.substr(1); 89 | return str; 90 | } 91 | 92 | 93 | section.property: "pinyin"; 94 | section.criteria: ViewSection.FirstCharacter //ViewSection.FirstCharacter// 95 | section.delegate: sectionHeader 96 | 97 | } 98 | 99 | 100 | 101 | 102 | //只要是View就必须要给一个大小 103 | Item{ 104 | width:80;height: parent.height-130 105 | anchors.top: parent.top 106 | anchors.topMargin: 130 107 | anchors.right: parent.right 108 | anchors.rightMargin: 20 109 | 110 | MouseArea{ 111 | anchors.fill: parent 112 | //position:0到smallText.height*26(546) 113 | 114 | function changeBigText(){ 115 | bigTip.visible = true 116 | var index = parseInt(mouseY/(28)) 117 | // console.log("index："+index) 118 | if(index<0) 119 | index=0 120 | if(index>26) 121 | index = 26 122 | bigText.text = qsTr(letters[index]+"") 123 | 124 | var search_index = getIndexByLab(bigText.text) 125 | // console.log("search_index"+search_index ) 126 | listView.positionViewAtIndex(search_index, ListView.Beginning) 127 | 128 | } 129 | 130 | 131 | 132 | 133 | function getIndexByLab(lab) 134 | { 135 | var index = -1; 136 | for (var i=0;i《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]"); 216 | var pattern2 = /^[0-9]*$/; 217 | if (pattern1.test(str)||pattern2.test(str)){ 218 | return true; 219 | } 220 | return false; 221 | } 222 | 223 | //移动数组的第一个元素到最后 224 | function moveFirstToEnd(array){ 225 | var first = array[0] 226 | array.push(first) 227 | array.shift() 228 | } 229 | 230 | 231 | 232 | //测试数据 233 | ListModel{ 234 | id:testModel 235 | property var nameList: ["皮皮","日历","父亲","额额额","高大上","黑凤梨","阿文","阿南","宝贝","昌源","老妈","老爸","#特殊","*特殊","aaa","AAA","a啊a","啊aa","阿亮","1阿1","爸爸","第八个","奶奶","叔叔","智障啊","满意","岁月","可能","黄河"] 236 | 237 | // property var nameList: ["阿文","宝贝","阿6"] 238 | 239 | Component.onCompleted: { 240 | 241 | //因为ListView的分组不会自动排序，所以需要按照顺序排好啊 242 | // var resultArray = nameList.sort( 243 | // function compareFunction(param1, param2) { 244 | // return param1.localeCompare(param2,"en"); 245 | // } 246 | // ); 247 | 248 | 249 | 250 | //原生排序：特殊字符-->数字-->英文-->中文 251 | 252 | 253 | console.log("排序前的数组："+nameList) 254 | var resultArray = nameList.sort(function(a, b) { 255 | return PinyinUtil.pinyin.getFullChars(a).localeCompare(PinyinUtil.pinyin.getFullChars(b)) 256 | }) 257 | 258 | var specialNumber = 0; 259 | for(var i =0;i 40869 || unicode < 19968){ 27 | result += ch; 28 | }else{ 29 | name = this._getFullChar(ch); 30 | if(name !== false){ 31 | result += name; 32 | } 33 | } 34 | } 35 | return result; 36 | }, 37 | 38 | getCamelChars: function(str){ 39 | if(typeof(str) !== 'string') 40 | throw new Error(-1, "getFisrt Error!"); 41 | var chars = []; // 42 | for(var i=0,len=str.length; i < len; i++){ 43 | var ch = str.charAt(i); 44 | chars.push(this._getChar(ch)); 45 | } 46 | return this._getResult(chars); 47 | }, 48 | _getFullChar: function(str){ 49 | for (var key in this.full_dict){ 50 | if(-1 !== this.full_dict[key].indexOf(str)){ 51 | return this._capitalize(key); 52 | } 53 | } 54 | return false; 55 | }, 56 | 57 | _capitalize: function(str){ 58 | if(str.length>0){ 59 | var first = str.substr(0,1).toUpperCase(); 60 | var spare = str.substr(1,str.length); 61 | return first + spare; 62 | } 63 | }, 64 | _getChar: function(ch){ 65 | var unicode = ch.charCodeAt(0); 66 | 67 | if(unicode > 40869 || unicode < 19968) 68 | return ch; 69 | if(!this.options.checkPolyphone) 70 | return this.char_dict.charAt(unicode-19968); 71 | return this.polyphone[unicode] ? this.polyphone[unicode] : this.char_dict.charAt(unicode-19968); 72 | }, 73 | _getResult: function(chars){ 74 | if(!this.options.checkPolyphone) 75 | return chars.join(''); 76 | var result = ['']; 77 | for(var i=0,len=chars.length;i 2 | #include 3 | 4 | int main(int argc, char *argv[]) 5 | { 6 | 7 | 8 | QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); 9 | 10 | QGuiApplication app(argc, argv); 11 | 12 | QQmlApplicationEngine engine; 13 | engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); 14 | if (engine.rootObjects().isEmpty()) 15 | return -1; 16 | 17 | return app.exec(); 18 | } 19 | -------------------------------------------------------------------------------- /Qt-Qml-Contacts/main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.8 2 | import QtQuick.Window 2.2 3 | 4 | Window { 5 | id: window 6 | visible: true 7 | property real bili: 0.75 8 | width: 1870/2 9 | height: 1080 10 | title: qsTr("Hello World") 11 | 12 | AddressList{ 13 | 14 | } 15 | 16 | 17 | 18 | } 19 | -------------------------------------------------------------------------------- /Qt-Qml-Contacts/qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | AddressList.qml 4 | main.qml 5 | Pinyin.js 6 | 7 | 8 | -------------------------------------------------------------------------------- /Qt-Qml-Echarts/.gitignore: -------------------------------------------------------------------------------- 1 | # C++ objects and libs 2 | *.slo 3 | *.lo 4 | *.o 5 | *.a 6 | *.la 7 | *.lai 8 | *.so 9 | *.dll 10 | *.dylib 11 | 12 | # Qt-es 13 | object_script.*.Release 14 | object_script.*.Debug 15 | *_plugin_import.cpp 16 | /.qmake.cache 17 | /.qmake.stash 18 | *.pro.user 19 | *.pro.user.* 20 | *.qbs.user 21 | *.qbs.user.* 22 | *.moc 23 | moc_*.cpp 24 | moc_*.h 25 | qrc_*.cpp 26 | ui_*.h 27 | *.qmlc 28 | *.jsc 29 | Makefile* 30 | *build-* 31 | 32 | # Qt unit tests 33 | target_wrapper.* 34 | 35 | # QtCreator 36 | *.autosave 37 | 38 | # QtCreator Qml 39 | *.qmlproject.user 40 | *.qmlproject.user.* 41 | 42 | # QtCreator CMake 43 | CMakeLists.txt.user* 44 | -------------------------------------------------------------------------------- /Qt-Qml-Echarts/MyWebView.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.0 2 | import QtWebEngine 1.4 3 | Item { 4 | 5 | anchors.fill: parent 6 | 7 | WebEngineView{ 8 | anchors.fill: parent 9 | url:"test.html" 10 | // url: "http://www.baidu.com" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Qt-Qml-Echarts/README.md: -------------------------------------------------------------------------------- 1 | # Qt-Qml-Echarts 2 | Baidu-Echarts For Qt/QML. Just a demo for using. 3 | 4 | ## Result 5 | ![](https://image.licoba.top/superbed/2018/11/20/5bf3baccc4ff9e1b63fc074c.jpg) 6 | 7 | ## Detail For Using 8 | 9 | [QT QML结合ECharts绘图](https://www.licoba.top/index.php/archives/189/) 10 | 11 | 12 | ## Notice 13 | 14 | Require：You need to install Visual Studio on your computer, and choose msvc201x 64bit to compile this project. 15 | (Because QT webengine module needs it) -------------------------------------------------------------------------------- /Qt-Qml-Echarts/TestEchart.pro: -------------------------------------------------------------------------------- 1 | QT += qml quick webengine 2 | 3 | CONFIG += c++11 4 | 5 | SOURCES += main.cpp 6 | 7 | RESOURCES += qml.qrc 8 | 9 | # Additional import path used to resolve QML modules in Qt Creator's code model 10 | QML_IMPORT_PATH = 11 | 12 | # Additional import path used to resolve QML modules just for Qt Quick Designer 13 | QML_DESIGNER_IMPORT_PATH = 14 | 15 | # The following define makes your compiler emit warnings if you use 16 | # any feature of Qt which as been marked deprecated (the exact warnings 17 | # depend on your compiler). Please consult the documentation of the 18 | # deprecated API in order to know how to port your code away from it. 19 | DEFINES += QT_DEPRECATED_WARNINGS 20 | 21 | # You can also make your code fail to compile if you use deprecated APIs. 22 | # In order to do so, uncomment the following line. 23 | # You can also select to disable deprecated APIs only up to a certain version of Qt. 24 | #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0 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 | 31 | DISTFILES += 32 | -------------------------------------------------------------------------------- /Qt-Qml-Echarts/main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); 8 | QGuiApplication app(argc, argv); 9 | 10 | QtWebEngine::initialize(); 11 | 12 | QQmlApplicationEngine engine; 13 | engine.load(QUrl(QLatin1String("qrc:/main.qml"))); 14 | 15 | return app.exec(); 16 | } 17 | -------------------------------------------------------------------------------- /Qt-Qml-Echarts/main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.7 2 | import QtQuick.Controls 2.0 3 | import QtQuick.Layouts 1.0 4 | 5 | ApplicationWindow { 6 | visible: true 7 | width: 640 8 | height: 480 9 | title: qsTr("Hello World") 10 | 11 | MyWebView{ 12 | 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /Qt-Qml-Echarts/qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | test.html 4 | MyWebView.qml 5 | main.qml 6 | echarts.js 7 | 8 | 9 | -------------------------------------------------------------------------------- /Qt-Qml-Echarts/qtquickcontrols2.conf: -------------------------------------------------------------------------------- 1 | ; This file can be edited to change the style of the application 2 | ; See Styling Qt Quick Controls 2 in the documentation for details: 3 | ; http://doc.qt.io/qt-5/qtquickcontrols2-styles.html 4 | 5 | [Controls] 6 | Style=Default 7 | 8 | [Universal] 9 | Theme=Light 10 | ;Accent=Steel 11 | 12 | [Material] 13 | Theme=Light 14 | ;Accent=BlueGrey 15 | ;Primary=BlueGray 16 | -------------------------------------------------------------------------------- /Qt-Qml-Echarts/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ECharts 6 | 7 | 8 | 9 | 10 |
11 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # :sunny:Qt 控件、项目合集 2 | Qt写的控件、项目合集，包含： 3 | - Qt仿手机通讯录：Qt-Qml-Contacts 4 | - Qt结合Echarts绘图：Qt-Qml-Echarts 5 | - Qt无限滚动日历控件：Qt-Qml-Calendar 6 | 7 | ## 项目说明 8 | 9 | ### :blush:Qt-Qml-Contacts 10 | 11 | Qt/QML做的一个仿手机通讯录界面，效果： 12 | 13 | ![](https://github.com/licoba/QtProjects/blob/master/Qt-Qml-Contacts/demo.gif) 14 | 15 | ### :blush:Qt-Qml-Echarts 16 | 17 | Qt/QML使用WebEngine展示的百度ECharts图表Demo，效果：
18 | ![yNqUCsMh5WJZit8](https://i.loli.net/2021/11/27/yNqUCsMh5WJZit8.jpg) 19 | 20 | 相关博客链接 21 | https://blog.csdn.net/silence__star/article/details/84304921 22 | 23 | ### :blush:Qt-Qml-Calendar 24 | 25 | 基于PathView，Qt/QML做的一个可以无限滚动的日历控件，效果： 26 | 27 | ![](https://github.com/licoba/QtProjects/blob/master/Qt-Qml-Calendar/icon/demo.gif) 28 | --------------------------------------------------------------------------------