qmlbook学习总结

Posted 2021-12-19 yantuguiguziPGJ

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

1

大家好，我是土盐。

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

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

于是去如下网站，http://md.aclickall.com/

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

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

git clone https://github.com/qmlbook/qmlbook.git
cd C:\\\\Users\\\\pgjgg\\\\Desktop\\\\qml_learn\\\\qmlbook
pip install -i https://pypi.doubanio.com/simple/ virtualenv 
virtualenv -p python3 qmlbook_env
./qmlbook_env/Scripts/activate.bat
pip install -i https://pypi.doubanio.com/simple/ -r requirements.txt
pip install -i https://pypi.doubanio.com/simple/  python-language-server

参考链接：
https://github.com/qmlbook/qmlbook
windows下python虚拟环境virtualenv安装和使用 - 倥偬时光 - 博客园 (cnblogs.com)
https://www.cnblogs.com/cwp-bg/p/python.html
python三大神器之virtualenv - 似是故人来~ - 博客园 (cnblogs.com)
https://www.cnblogs.com/freely/p/8022923.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: greenBox
        x: 40; y: root.height-height
        source: "assets/box_green.png"
        text: "animation on property"
        NumberAnimation on y 
            to: 40; duration: 4000
        
    
    //<<M1

    //M2>>
    ClickableImageV2 
        id: blueBox
        x: (root.width-width)/2; y: root.height-height
        source: "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: redBox
        x: root.width-width-40; y: root.height-height
        source: "assets/box_red.png"
        onClicked: anim.start()
//        onClicked: anim.restart()

        text: "standalone animation"

        NumberAnimation 
            id: anim
            target: redBox
            properties: "y"
            to: 40
            duration: 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 CreateObject

Item 
    id: root

    ListModel 
        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)
    
// <<M1

    width: 1024
    height: 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: xmlModel
        query: "/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
// <<M4
    Column 
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.topMargin: 10

        spacing: 10

        width: 100

        Image 
            anchors.horizontalCenter: parent.horizontalCenter
            source: "ufo.png"

            MouseArea 
                anchors.fill: parent
                onClicked: addUfo();
            
        

        Image 
            anchors.horizontalCenter: parent.horizontalCenter
            source: "rocket.png"

            MouseArea 
                anchors.fill: parent
                onClicked: addRocket();
            
        

        Rectangle 
            anchors.horizontalCenter: parent.horizontalCenter

            width: 100
            height: 40

            color: "#53d769"

            MouseArea 
                anchors.fill: parent
                onClicked: 
                    xmlModel.xml = serialize();
                    clearItems();
                
            
        

        Rectangle 
            anchors.horizontalCenter: parent.horizontalCenter

            width: 100
            height: 40

            color: "#fed958"

            MouseArea 
                anchors.fill: parent
                onClicked: deserialize();
            
        
    

4

图片阅读器：

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

Image 
        id: image
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
        asynchronous: true
    

    FileDialog 
        id: fileOpenDialog

        // ...

        title: "Select an image file"
        folder: shortcuts.documents
        nameFilters: [ "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: colorTools
        anchors 
            horizontalCenter: parent.horizontalCenter
            top: parent.top
            topMargin: 8
        
        property variant activeSquare: red
        property color paintColor: "#33B5E5"
        spacing: 4
        Repeater 
            model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444"]
            ColorSquare 
                id: red
                color: modelData
                active: parent.paintColor == color
                onClicked: 
                    parent.paintColor = color
                
            
        
    
    // <<M1

    Rectangle 
        anchors.fill: canvas
        border.color: "#666666"
        border.width: 4
    

    // M2>>
    Canvas 
        id: canvas
        anchors 
            left: parent.left
            right: parent.right
            top: colorTools.bottom
            bottom: parent.bottom
            margins: 8
        
        property real lastX
        property real lastY
        property color color: colorTools.paintColor

        onPaint: 
            var ctx = getContext('2d')
            ctx.lineWidth = 1.5
            ctx.strokeStyle = canvas.color
            ctx.beginPath()
            ctx.moveTo(lastX, lastY)
            lastX = area.mouseX
            lastY = area.mouseY
            ctx.lineTo(lastX, lastY)
            ctx.stroke()
        
        MouseArea 
            id: area
            anchors.fill: parent
            onPressed: 
                canvas.lastX = mouseX
                canvas.lastY = mouseY
            
            onPositionChanged: 
                canvas.requestPaint()
            
        
    
    // <<M2

qmlbook书籍代码和运行环境分享
链接：https://pan.baidu.com/s/1Bt1vRkjfazQTnLfoTXgzlQ 
提取码：5514

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

--End--