qmlbook学习总结

qmlbook学习总结

这是 土盐 的第183篇原创文章

1

大家好，我是土盐。

今天把qmlbook的案例代码跑了一遍，感觉还是很酸爽的。

文章写完，发现代码默认排版不舒服。

于是去如下网站，/

美化代码排版后，复制回公众号编辑器。

无用的win下python虚拟机环境搭建。

git clone .git
cd C:\\Users\\pgjgg\\Desktop\\qml_learn\\qmlbook
pip install -i / virtualenv 
virtualenv -p python3 qmlbook_env
./qmlbook_env/Scripts/activate.bat
pip install -i / -r requirements.txt
pip install -i /  python-language-server参考链接：

windows下python虚拟环境virtualenv安装和使用 - 倥偬时光 - 博客园 (cnblogs)
.html
python三大神器之virtualenv - 似是故人来~ - 博客园 (cnblogs)
.html

qml+python代码运行效果,cpu内存占用动态显示：

代码位置：C:\Users\pgjgg\Desktop\qml_learn\qmlbook\docs\ch20-python\src\model

直接运行依赖项安装出错的情况下，进行了如下错误示范：

pip install -r requirements.txt

pip install Pygments-2.10.0-py3-none-any.whl
pip install requests  
pip install pytz-2021.3-py2.py3-none-any.whl
pip install Babel-2.9.1-py2.py3-none-any.whl
pip install sphinxcontrib-jsmath
pip install docutils-0.18-py2.py3-none-any.whl
pip install sphinxcontrib_serializinghtml-1.1.5-py2.py3-none-any.whl
pip install imagesize-1.3.0-py2.py3-none-any.whl
pip install sphinxcontrib_applehelp-1.0.2-py2.py3-none-any.whl
pip install sphinxcontrib_devhelp-1.0.2-py2.py3-none-any.whl
pip install MarkupSafe
pip install Jinja2-3.0.3-py3-none-any.whl
pip install colorama
pip install alabaster-0.7.12-py2.py3-none-any.whl
pip install snowballstemmer-2.2.0-py2.py3-none-any.whl
pip install sphinxcontrib-htmlhelp
pip install sphinxcontrib_qthelp-1.0.3-py2.py3-none-any.whl
pip install Sphinx-4.3.0-py3-none-any.whl

2

视频制作尝试，动画效果测试：

代码位置：C:\Users\pgjgg\Desktop\qml_learn\qmlbook-master\docs\ch05-fluid\src\EasingCurves

测试的是如下蓝色字体参数，在足球到最高点后的下落段的移动特效。

代码位置：C:\Users\pgjgg\Desktop\qml_learn\qmlbook\docs\ch05-fluid\src\animation\BouncingBallExample.qml

3

还有很多亮点，直接亮代码吧。

三种动画类型。

1：直接运动。

2：全过程可交互运动。

3：部分过程可交互运动。

代码位置：C:\Users\pgjgg\Desktop\qml_learn\qmlbook\docs\ch05-fluid\src\animation\AnimationTypesExample.qml

//M1>>ClickableImageV2 {id: greenBoxx: 40; y: root.height-heightsource: "assets/box_green.png"text: "animation on property"NumberAnimation on y {to: 40; duration: 4000}}//<<M1//M2>>ClickableImageV2 {id: blueBoxx: (root.width-width)/2; y: root.height-heightsource: "assets/box_blue.png"text: "behavior on property"Behavior on y {NumberAnimation { duration: 4000 }}onClicked: y = 40// random y on each click
//        onClicked: y = 40+Math.random()*(205-40)}//<<M2//M3>>ClickableImageV2 {id: redBoxx: root.width-width-40; y: root.height-heightsource: "assets/box_red.png"onClicked: anim.start()
//        onClicked: anim.restart()text: "standalone animation"NumberAnimation {id: animtarget: redBoxproperties: "y"to: 40duration: 4000}}//<<M3

序列化和反序列化，基于xml创建和销毁多个实例对象。

代码位置：C:\Users\pgjgg\Desktop\qml_learn\qmlbook\docs\ch15-dynamicqml\src\dynamic-scene\main.qml

import QtQuick.XmlListModel 2.0// M1>>
import QtQuick 2.5
import "create-object.js" as CreateObjectItem {id: rootListModel {id: objectsModel}function addUfo() {CreateObject.create("ufo.qml", root, itemAdded);}function addRocket() {CreateObject.create("rocket.qml", root, itemAdded);}function itemAdded(obj, source) {objectsModel.append({"obj": obj, "source": source})}
// <<M1width: 1024height: 600// M2>>function clearItems() {while(objectsModel.count > 0) {objectsModel.get(0).obj.destroy();objectsModel.remove(0);}}
// <<M2// M3>>function serialize() {var res = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<scene>\n";for(var ii=0; ii < objectsModel.count; ++ii) {var i = objectsModel.get(ii);res += "  <item>\n    <source>" + i.source + "</source>\n    <x>" + i.obj.x + "</x>\n    <y>" + i.obj.y + "</y>\n  </item>\n"}res += "</scene>";return res;}
// <<M3// M4>>XmlListModel {id: xmlModelquery: "/scene/item"XmlRole { name: "source"; query: "source/string()" }XmlRole { name: "x"; query: "x/string()" }XmlRole { name: "y"; query: "y/string()" }}function deserialize() {dsIndex = 0;CreateObject.create(xmlModel.get(dsIndex).source, root, dsItemAdded);}function dsItemAdded(obj, source) {itemAdded(obj, source);obj.x = xmlModel.get(dsIndex).x;obj.y = xmlModel.get(dsIndex).y;dsIndex ++;if (dsIndex < xmlModel.count)CreateObject.create(xmlModel.get(dsIndex).source, root, dsItemAdded);}property int dsIndex
// <<M4Column {anchors.left: parent.leftanchors.top: parent.topanchors.topMargin: 10spacing: 10width: 100Image {anchors.horizontalCenter: parent.horizontalCentersource: "ufo.png"MouseArea {anchors.fill: parentonClicked: addUfo();}}Image {anchors.horizontalCenter: parent.horizontalCentersource: "rocket.png"MouseArea {anchors.fill: parentonClicked: addRocket();}}Rectangle {anchors.horizontalCenter: parent.horizontalCenterwidth: 100height: 40color: "#53d769"MouseArea {anchors.fill: parentonClicked: {xmlModel.xml = serialize();clearItems();}}}Rectangle {anchors.horizontalCenter: parent.horizontalCenterwidth: 100height: 40color: "#fed958"MouseArea {anchors.fill: parentonClicked: deserialize();}}}
}

4

图片阅读器：

代码位置：C:\Users\pgjgg\Desktop\qml_learn\qmlbook\docs\ch06-controls\src\imageviewer-desktop

Image {id: imageanchors.fill: parentfillMode: Image.PreserveAspectFitasynchronous: true}FileDialog {id: fileOpenDialog// ...title: "Select an image file"folder: shortcuts.documentsnameFilters: [ "Image files (*.png *.jpeg *.jpg)" ]onAccepted: image.source = fileOpenDialog.fileUrl;}

画笔画布工具：

代码位置：C:\Users\pgjgg\Desktop\qml_learn\qmlbook\docs\ch09-canvas\src\canvas\paint.qml

// M1>>Row {id: colorToolsanchors {horizontalCenter: parent.horizontalCentertop: parent.toptopMargin: 8}property variant activeSquare: redproperty color paintColor: "#33B5E5"spacing: 4Repeater {model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444"]ColorSquare {id: redcolor: modelDataactive: parent.paintColor == coloronClicked: {parent.paintColor = color}}}}// <<M1Rectangle {anchors.fill: canvasborder.color: "#666666"border.width: 4}// M2>>Canvas {id: canvasanchors {left: parent.leftright: parent.righttop: colorTools.bottombottom: parent.bottommargins: 8}property real lastXproperty real lastYproperty color color: colorTools.paintColoronPaint: {var ctx = getContext('2d')ctx.lineWidth = 1.5ctx.strokeStyle = canvas.colorctx.beginPath()ctx.moveTo(lastX, lastY)lastX = area.mouseXlastY = area.mouseYctx.lineTo(lastX, lastY)ctx.stroke()}MouseArea {id: areaanchors.fill: parentonPressed: {canvas.lastX = mouseXcanvas.lastY = mouseY}onPositionChanged: {canvas.requestPaint()}}}// <<M2

qmlbook书籍代码和运行环境分享
链接： 
提取码：5514

今天又是秃头的一天，卒。

--End--