Add QmlFace

fwj514551450 · Oct 13, 2017 · 0f71f69 · 0f71f69
1 parent c622f98
commit 0f71f69
Show file tree

Hide file tree

Showing 65 changed files with 251 additions and 1 deletion.
diff --git a/QmlDragDrop/show.gif b/QmlDragDrop/show.gif
diff --git a/QmlFace/QmlFace.pro b/QmlFace/QmlFace.pro
@@ -0,0 +1,13 @@
+#-------------------------------------------------
+#
+# Copyright (C) 2003-2103 CamelSoft Corporation
+#
+#-------------------------------------------------
+
+QT += qml quick
+
+CONFIG += c++11
+
+SOURCES += main.cpp
+
+RESOURCES += qml.qrc
diff --git a/QmlFace/emoji/Face_(0).png b/QmlFace/emoji/Face_(0).png
diff --git a/QmlFace/emoji/Face_(1).png b/QmlFace/emoji/Face_(1).png
diff --git a/QmlFace/emoji/Face_(10).png b/QmlFace/emoji/Face_(10).png
diff --git a/QmlFace/emoji/Face_(11).png b/QmlFace/emoji/Face_(11).png
diff --git a/QmlFace/emoji/Face_(12).png b/QmlFace/emoji/Face_(12).png
diff --git a/QmlFace/emoji/Face_(13).png b/QmlFace/emoji/Face_(13).png
diff --git a/QmlFace/emoji/Face_(14).png b/QmlFace/emoji/Face_(14).png
diff --git a/QmlFace/emoji/Face_(15).png b/QmlFace/emoji/Face_(15).png
diff --git a/QmlFace/emoji/Face_(16).png b/QmlFace/emoji/Face_(16).png
diff --git a/QmlFace/emoji/Face_(17).png b/QmlFace/emoji/Face_(17).png
diff --git a/QmlFace/emoji/Face_(18).png b/QmlFace/emoji/Face_(18).png
diff --git a/QmlFace/emoji/Face_(19).png b/QmlFace/emoji/Face_(19).png
diff --git a/QmlFace/emoji/Face_(2).png b/QmlFace/emoji/Face_(2).png
diff --git a/QmlFace/emoji/Face_(20).png b/QmlFace/emoji/Face_(20).png
diff --git a/QmlFace/emoji/Face_(21).png b/QmlFace/emoji/Face_(21).png
diff --git a/QmlFace/emoji/Face_(22).png b/QmlFace/emoji/Face_(22).png
diff --git a/QmlFace/emoji/Face_(23).png b/QmlFace/emoji/Face_(23).png
diff --git a/QmlFace/emoji/Face_(24).png b/QmlFace/emoji/Face_(24).png
diff --git a/QmlFace/emoji/Face_(25).png b/QmlFace/emoji/Face_(25).png
diff --git a/QmlFace/emoji/Face_(26).png b/QmlFace/emoji/Face_(26).png
diff --git a/QmlFace/emoji/Face_(27).png b/QmlFace/emoji/Face_(27).png
diff --git a/QmlFace/emoji/Face_(28).png b/QmlFace/emoji/Face_(28).png
diff --git a/QmlFace/emoji/Face_(29).png b/QmlFace/emoji/Face_(29).png
diff --git a/QmlFace/emoji/Face_(3).png b/QmlFace/emoji/Face_(3).png
diff --git a/QmlFace/emoji/Face_(30).png b/QmlFace/emoji/Face_(30).png
diff --git a/QmlFace/emoji/Face_(31).png b/QmlFace/emoji/Face_(31).png
diff --git a/QmlFace/emoji/Face_(32).png b/QmlFace/emoji/Face_(32).png
diff --git a/QmlFace/emoji/Face_(33).png b/QmlFace/emoji/Face_(33).png
diff --git a/QmlFace/emoji/Face_(34).png b/QmlFace/emoji/Face_(34).png
diff --git a/QmlFace/emoji/Face_(35).png b/QmlFace/emoji/Face_(35).png
diff --git a/QmlFace/emoji/Face_(36).png b/QmlFace/emoji/Face_(36).png
diff --git a/QmlFace/emoji/Face_(37).png b/QmlFace/emoji/Face_(37).png
diff --git a/QmlFace/emoji/Face_(38).png b/QmlFace/emoji/Face_(38).png
diff --git a/QmlFace/emoji/Face_(39).png b/QmlFace/emoji/Face_(39).png
diff --git a/QmlFace/emoji/Face_(4).png b/QmlFace/emoji/Face_(4).png
diff --git a/QmlFace/emoji/Face_(40).png b/QmlFace/emoji/Face_(40).png
diff --git a/QmlFace/emoji/Face_(41).png b/QmlFace/emoji/Face_(41).png
diff --git a/QmlFace/emoji/Face_(42).png b/QmlFace/emoji/Face_(42).png
diff --git a/QmlFace/emoji/Face_(43).png b/QmlFace/emoji/Face_(43).png
diff --git a/QmlFace/emoji/Face_(44).png b/QmlFace/emoji/Face_(44).png
diff --git a/QmlFace/emoji/Face_(45).png b/QmlFace/emoji/Face_(45).png
diff --git a/QmlFace/emoji/Face_(46).png b/QmlFace/emoji/Face_(46).png
diff --git a/QmlFace/emoji/Face_(47).png b/QmlFace/emoji/Face_(47).png
diff --git a/QmlFace/emoji/Face_(48).png b/QmlFace/emoji/Face_(48).png
diff --git a/QmlFace/emoji/Face_(49).png b/QmlFace/emoji/Face_(49).png
diff --git a/QmlFace/emoji/Face_(5).png b/QmlFace/emoji/Face_(5).png
diff --git a/QmlFace/emoji/Face_(50).png b/QmlFace/emoji/Face_(50).png
diff --git a/QmlFace/emoji/Face_(51).png b/QmlFace/emoji/Face_(51).png
diff --git a/QmlFace/emoji/Face_(52).png b/QmlFace/emoji/Face_(52).png
diff --git a/QmlFace/emoji/Face_(53).png b/QmlFace/emoji/Face_(53).png
diff --git a/QmlFace/emoji/Face_(54).png b/QmlFace/emoji/Face_(54).png
diff --git a/QmlFace/emoji/Face_(55).png b/QmlFace/emoji/Face_(55).png
diff --git a/QmlFace/emoji/Face_(56).png b/QmlFace/emoji/Face_(56).png
diff --git a/QmlFace/emoji/Face_(6).png b/QmlFace/emoji/Face_(6).png
diff --git a/QmlFace/emoji/Face_(7).png b/QmlFace/emoji/Face_(7).png
diff --git a/QmlFace/emoji/Face_(8).png b/QmlFace/emoji/Face_(8).png
diff --git a/QmlFace/emoji/Face_(9).png b/QmlFace/emoji/Face_(9).png
diff --git a/QmlFace/main.cpp b/QmlFace/main.cpp
@@ -0,0 +1,20 @@
+/*!
+ *@file main.cpp
+ *@brief 程序主文件
+ *@version 1.0
+ *@section LICENSE Copyright (C) 2003-2103 CamelSoft Corporation
+ *@author zhengtianzuo
+*/
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+int main(int argc, char *argv[])
+{
+    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    engine.load(QUrl(QLatin1String("qrc:/main.qml")));
+
+    return app.exec();
+}
diff --git a/QmlFace/main.qml b/QmlFace/main.qml
@@ -0,0 +1,149 @@
+/*!
+ *@file main.qml
+ *@brief 主文件
+ *@version 1.0
+ *@section LICENSE Copyright (C) 2003-2103 CamelSoft Corporation
+ *@author zhengtianzuo
+*/
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.0
+
+ApplicationWindow {
+    visible: true
+    height: gridView.cellHeight*5+4*2
+    width: gridView.cellWidth*12+4*2
+    flags: Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint
+
+    ListModel {
+        id: listModel
+    }
+
+    Component{
+        id: baseListDelegate
+
+        Item {
+            id: delegateItem
+            height: gridView.cellHeight
+            width: gridView.cellWidth
+
+            Rectangle{
+                id: delegateItemBack
+                anchors.fill: parent
+                color : "#AAAAAA"
+
+                MouseArea {
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    onEntered: {
+                        delegateItem.GridView.view.currentIndex = model.index;
+                    }
+                }
+
+                Image {
+                    id: image
+                    anchors.centerIn: parent
+                    source: face
+                    width: 32
+                    height: 32
+                    MouseArea{
+                        anchors.fill: parent
+                        onClicked: {
+                            console.debug(qsTr("选择的名称: ") + face)
+                            close()
+                        }
+                    }
+                }
+            }
+
+            states: [
+                State {
+                    name: "isCurrentItem"
+                    when: delegateItem.GridView.isCurrentItem
+                    PropertyChanges {
+                        target: delegateItemBack; color : "#AAAAAA";
+                    }
+                },
+                State {
+                    name: "isNotCurrentItem"
+                    when: !delegateItem.GridView.isCurrentItem
+                    PropertyChanges {
+                        target: delegateItemBack; color : "transparent";
+                    }
+                }
+            ]
+        }
+    }
+
+    GridView {
+        id: gridView
+        anchors.margins: 4
+        anchors.fill: parent
+        clip: true
+        cellWidth: 40
+        cellHeight: 40
+        model: listModel
+        delegate: baseListDelegate
+        boundsBehavior: Flickable.StopAtBounds
+
+        Component.onCompleted: {
+            listModel.append({"face" : "emoji/Face_(0).png"})
+            listModel.append({"face" : "emoji/Face_(1).png"})
+            listModel.append({"face" : "emoji/Face_(2).png"})
+            listModel.append({"face" : "emoji/Face_(3).png"})
+            listModel.append({"face" : "emoji/Face_(4).png"})
+            listModel.append({"face" : "emoji/Face_(5).png"})
+            listModel.append({"face" : "emoji/Face_(6).png"})
+            listModel.append({"face" : "emoji/Face_(7).png"})
+            listModel.append({"face" : "emoji/Face_(8).png"})
+            listModel.append({"face" : "emoji/Face_(9).png"})
+            listModel.append({"face" : "emoji/Face_(10).png"})
+            listModel.append({"face" : "emoji/Face_(11).png"})
+            listModel.append({"face" : "emoji/Face_(12).png"})
+            listModel.append({"face" : "emoji/Face_(13).png"})
+            listModel.append({"face" : "emoji/Face_(14).png"})
+            listModel.append({"face" : "emoji/Face_(15).png"})
+            listModel.append({"face" : "emoji/Face_(16).png"})
+            listModel.append({"face" : "emoji/Face_(17).png"})
+            listModel.append({"face" : "emoji/Face_(18).png"})
+            listModel.append({"face" : "emoji/Face_(19).png"})
+            listModel.append({"face" : "emoji/Face_(20).png"})
+            listModel.append({"face" : "emoji/Face_(21).png"})
+            listModel.append({"face" : "emoji/Face_(22).png"})
+            listModel.append({"face" : "emoji/Face_(23).png"})
+            listModel.append({"face" : "emoji/Face_(24).png"})
+            listModel.append({"face" : "emoji/Face_(25).png"})
+            listModel.append({"face" : "emoji/Face_(26).png"})
+            listModel.append({"face" : "emoji/Face_(27).png"})
+            listModel.append({"face" : "emoji/Face_(28).png"})
+            listModel.append({"face" : "emoji/Face_(29).png"})
+            listModel.append({"face" : "emoji/Face_(30).png"})
+            listModel.append({"face" : "emoji/Face_(31).png"})
+            listModel.append({"face" : "emoji/Face_(32).png"})
+            listModel.append({"face" : "emoji/Face_(33).png"})
+            listModel.append({"face" : "emoji/Face_(34).png"})
+            listModel.append({"face" : "emoji/Face_(35).png"})
+            listModel.append({"face" : "emoji/Face_(36).png"})
+            listModel.append({"face" : "emoji/Face_(37).png"})
+            listModel.append({"face" : "emoji/Face_(38).png"})
+            listModel.append({"face" : "emoji/Face_(39).png"})
+            listModel.append({"face" : "emoji/Face_(40).png"})
+            listModel.append({"face" : "emoji/Face_(41).png"})
+            listModel.append({"face" : "emoji/Face_(42).png"})
+            listModel.append({"face" : "emoji/Face_(43).png"})
+            listModel.append({"face" : "emoji/Face_(44).png"})
+            listModel.append({"face" : "emoji/Face_(45).png"})
+            listModel.append({"face" : "emoji/Face_(46).png"})
+            listModel.append({"face" : "emoji/Face_(47).png"})
+            listModel.append({"face" : "emoji/Face_(48).png"})
+            listModel.append({"face" : "emoji/Face_(49).png"})
+            listModel.append({"face" : "emoji/Face_(50).png"})
+            listModel.append({"face" : "emoji/Face_(51).png"})
+            listModel.append({"face" : "emoji/Face_(52).png"})
+            listModel.append({"face" : "emoji/Face_(53).png"})
+            listModel.append({"face" : "emoji/Face_(54).png"})
+            listModel.append({"face" : "emoji/Face_(55).png"})
+            listModel.append({"face" : "emoji/Face_(56).png"})
+        }
+    }
+}
diff --git a/QmlFace/qml.qrc b/QmlFace/qml.qrc
@@ -0,0 +1,62 @@
+<RCC>
+    <qresource prefix="/">
+        <file>main.qml</file>
+        <file>emoji/Face_(0).png</file>
+        <file>emoji/Face_(1).png</file>
+        <file>emoji/Face_(2).png</file>
+        <file>emoji/Face_(3).png</file>
+        <file>emoji/Face_(4).png</file>
+        <file>emoji/Face_(5).png</file>
+        <file>emoji/Face_(6).png</file>
+        <file>emoji/Face_(7).png</file>
+        <file>emoji/Face_(8).png</file>
+        <file>emoji/Face_(9).png</file>
+        <file>emoji/Face_(10).png</file>
+        <file>emoji/Face_(11).png</file>
+        <file>emoji/Face_(12).png</file>
+        <file>emoji/Face_(13).png</file>
+        <file>emoji/Face_(14).png</file>
+        <file>emoji/Face_(15).png</file>
+        <file>emoji/Face_(16).png</file>
+        <file>emoji/Face_(17).png</file>
+        <file>emoji/Face_(18).png</file>
+        <file>emoji/Face_(19).png</file>
+        <file>emoji/Face_(20).png</file>
+        <file>emoji/Face_(21).png</file>
+        <file>emoji/Face_(22).png</file>
+        <file>emoji/Face_(23).png</file>
+        <file>emoji/Face_(24).png</file>
+        <file>emoji/Face_(25).png</file>
+        <file>emoji/Face_(26).png</file>
+        <file>emoji/Face_(27).png</file>
+        <file>emoji/Face_(28).png</file>
+        <file>emoji/Face_(29).png</file>
+        <file>emoji/Face_(30).png</file>
+        <file>emoji/Face_(31).png</file>
+        <file>emoji/Face_(32).png</file>
+        <file>emoji/Face_(33).png</file>
+        <file>emoji/Face_(34).png</file>
+        <file>emoji/Face_(35).png</file>
+        <file>emoji/Face_(36).png</file>
+        <file>emoji/Face_(37).png</file>
+        <file>emoji/Face_(38).png</file>
+        <file>emoji/Face_(39).png</file>
+        <file>emoji/Face_(40).png</file>
+        <file>emoji/Face_(41).png</file>
+        <file>emoji/Face_(42).png</file>
+        <file>emoji/Face_(43).png</file>
+        <file>emoji/Face_(44).png</file>
+        <file>emoji/Face_(45).png</file>
+        <file>emoji/Face_(46).png</file>
+        <file>emoji/Face_(47).png</file>
+        <file>emoji/Face_(48).png</file>
+        <file>emoji/Face_(49).png</file>
+        <file>emoji/Face_(50).png</file>
+        <file>emoji/Face_(51).png</file>
+        <file>emoji/Face_(52).png</file>
+        <file>emoji/Face_(53).png</file>
+        <file>emoji/Face_(54).png</file>
+        <file>emoji/Face_(55).png</file>
+        <file>emoji/Face_(56).png</file>
+    </qresource>
+</RCC>
diff --git a/QmlFace/show.gif b/QmlFace/show.gif
diff --git a/QtQuickExamples.pro b/QtQuickExamples.pro
@@ -7,4 +7,5 @@
 TEMPLATE = subdirs
 SUBDIRS += QmlBusyIndicator
 SUBDIRS += QmlCheckBox
-SUBDIRS += QmlDragDrop
+SUBDIRS += QmlDragDrop
+SUBDIRS += QmlFace
diff --git a/README.md b/README.md
@@ -20,5 +20,10 @@ QmlCheckBox: Qml自定义复选框
 
 QmlDragDrop: Qml拖放
 
+![](https://github.com/zhengtianzuo/QtQuickExamples/blob/master/QmlDragDrop/show.gif?raw=true)
 
 
+QmlFace: Qml表情选择框
+
+![](https://github.com/zhengtianzuo/QtQuickExamples/blob/master/QmlFace/show.gif?raw=true)
+