日志

收藏新鲜事

基于QML开发的二维码生成的QML插件

2015-11-03 22:21

Requirement
目前移动开发，使用二维码的需求越来越多，那么如何使用Qt来生成二维码呢？当然使用开源的qrencode来进行封装
有网友经常问到如何生成二维码，于是就开发了这样一个QML插件，可以直接在QML当中使用，该插件可以安装到QtSDk相应目录
QRCode Powered QML Module
Designing cool, interactive interfaces. DuoDuoZhijiao came up with a much better answer for QRencode: QML, a declarative language perfect for designing UIs (and much more). Here’s a sample of how QREncode Plugin For QML looks like:

复制代码

import QtQuick 2.3
import com.duoduo.component 1.0
QREnCode{
id:qrwidth: 128
height: 128
qrSize: Qt.size(width,width)
anchors.centerIn: parent
qrData:"duoduozhijiao" //encode contents
qrForeground: "#29aee1" //encode color
qrBackground: "white"
qrMargin: 2
qrMode: QREnCode.MODE_8 //encode model
qrLevel: QREnCode.LEVEL_Q // encode level
qrLogo: "qrc:/256.png" //or local path or qrc path but not network url
onQrSaveFileChanged: {console.log("We get save file path is :"+qrfilepath)
}
}

This project aims at bringing the power of qrencode to qml designer UI.
Summary

How to Build

Add the source code to your local machine on Mac Windows Linux.

Make Sure Setting your env for Qt SDK

Use Command

Git clone it.make clean(mingw32-make clean)qmakemake （mingw32-make mingw) | nmake(vc)sudo make install (*unix)
Use QtCreator

You may use qtcreator to build it.
How to use with QREnCode

Note that for the following, you need to have Qt SDK for Qt5.x or later installed.
QREnCode

You can use QREnCode to encode your qrencode UI.

复制代码

import QtQuick 2.3
import com.duoduo.component 1.0
QREnCode{
id:qrwidth: 128
height: 128
qrSize: Qt.size(width,width)
anchors.centerIn: parent
qrData:"duoduozhijiao" //encode contents
qrForeground: "#29aee1" //encode color
qrBackground: "white"
qrMargin: 2
qrMode: QREnCode.MODE_8 //encode model
qrLevel: QREnCode.LEVEL_Q // encode level
qrLogo: "qrc:/256.png" //or local path or qrc path but not network url
onQrSaveFileChanged: {console.log("We get save file path is :"+qrfilepath)}

[size=2][color=#0000aa][font=Comic Sans MS]//use this function also can save current item to file[/font][/color][/size]
[size=2][color=#0000aa][font=Comic Sans MS]     function savetofile(obj,filename){[/font][/color][/size]
[size=2][color=#0000aa][font=Comic Sans MS]        obj.grabToImage(function(result) {[/font][/color][/size]
[size=2][color=#0000aa][font=Comic Sans MS]      result.saveToFile(filename);[/font][/color][/size]
[size=2][color=#0000aa][font=Comic Sans MS]    });[/font][/color][/size]
}

Implemented QML Extension USE C++ (QQmlExtensionPlugin)

Implemented a QML Extension module that:

refer to http://doc.qt.io/qt-5/qqmlextensionplugin.html.

Implemented properties

qrData (qrencode data show)
qrLogo (qrencode middle logo)
qrSize (qrencode size)
qrMode (mode )
qrLevel (level )
qrCasesen (casesen upper)
qrMargin (margin)
qrPercent (percent)
qrForeground (qrForeground)
qrBackground (qrBackground)

Implemented signals

Above all signals
Implemented slots and functions

-all Above slots-setQrSaveFile(const QString& filePath) //can sava current qrencode to file
FeedBack

contact information
Email(373955953#qq.com, Change#to@)
QQ: 39559539234
QQ Group:312125701
github: 寒山-居士
Thanks
https://github.com/penk/terrarium-app
About Author

复制代码