qml demo分析(photosurface-图片涅拉)

　　阅读qml示例代码已有一小段时间，也陆续的写了一些自己关于qml示例代码的理解，可能由于自己没有大量的qml开发经验，总感觉复杂的ui交互qml处理起来可能会比较棘手，但事实总是会出人意料，今天我们就来分析一个关于油耗交互的qml代码。从毕业后就一直从事qt的相关开发，一直在使用QWidget窗口做产品，看多了qml后才发现原来还有这么好的ui开发利器，完全的数据和展示分离，ui可以做到想怎么变怎么变，没有了QBoxLayout的帮助(同样是约束)，ui再也不用那么死板，对于灵活、绚丽的桌面程序个人觉着qml可以逐步取代QWidget窗口。

一、效果展示

　　如图1所示是photosurface的效果展示，是不是觉着功能还挺强大，完成这些功能真正起作用的代码却没有几行，下边就让我们一起来分析下这个示例代码吧。

图1 photosurface效果展示

二、源码分析

　　图片展示窗口默认拉取的系统目录为C:UsersAdministratorPictures，也就是我们通常所指的系统图库目录，如图2所示即是photosurface效果展示所拉取的图片数据。

图2 系统图库目录

　　这个示例代码也是相对比较简单，主要的代码都是使用qml实现，C++部分提供了程序所能支持读取的图片文件格式和获取当前系统图库目录，最后使用QQmlContext的setContextProperty接口将获取到的值注册到qml上下文系统中。

1、获取支持的图片格式文件

static QStringList imageNameFilters()
{
    QStringList result;
    QMimeDatabase mimeDatabase;
    foreach (const QByteArray &m, QImageReader::supportedMimeTypes()) {
        foreach (const QString &suffix, mimeDatabase.mimeTypeForName(m).suffixes())
            result.append(QStringLiteral("*.") + suffix);
    }
    return result;
}

　　如上代码是通过QImageReader获取当前所支持的图片格式后缀，并组装成*.suffixes字符串，例如：*.png。

2、获取当前系统目录

    QQmlApplicationEngine engine;
    QQmlContext *context = engine.rootContext();

    QUrl picturesLocationUrl = QUrl::fromLocalFile(QDir::homePath());
    const QStringList picturesLocations = QStandardPaths::standardLocations(QStandardPaths::PicturesLocation);
    if (!picturesLocations.isEmpty()) {
        picturesLocationUrl = QUrl::fromLocalFile(picturesLocations.first());
        if (initialUrl.isEmpty()
            && !QDir(picturesLocations.first()).entryInfoList(nameFilters, QDir::Files).isEmpty()) {
            initialUrl = picturesLocationUrl;
        }
    }

    context->setContextProperty(QStringLiteral("contextPicturesLocation"), picturesLocationUrl);
    context->setContextProperty(QStringLiteral("contextInitialUrl"), initialUrl);
    context->setContextProperty(QStringLiteral("contextImageNameFilters"), nameFilters);

　　qt5之后获取系统路径的类变为QStandardPaths，通过该类可以获取到系统图库目录、系统音乐目录等，具体参见StandardLocation参数，如图3所示

图3 支持系统目录

3、qml部分

　　开篇我就感慨了下，就因为qml写ui时可以随意写，接下来就让我们一起看看有多么的随意

3.1打开目录选择对话框

FileDialog {//打开文件夹
        id: fileDialog
        title: "Choose a folder with some images"
        selectFolder: true
        folder: picturesLocation
        onAccepted: folderModel.folder = fileUrl + "/"
    }

　　picturesLocation是通过C++程序获取的变量并注册到qml上下文系统中，该变量指明了当前对话框打开时默认选中的目录

3.2窗口底部文字说明

    //窗口最底下说明
    Text {
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.margins: 10
        color: "darkgrey"
        wrapMode: Text.WordWrap
        font.pointSize: 8
        text: "On a touchscreen: use two fingers to zoom and rotate, one finger to drag
" +
              "With a mouse: drag normally, use the vertical wheel to zoom, horizontal wheel to rotate, or hold Ctrl while using the vertical wheel to rotate"
    }

　　该组件使用了anchors锚点，可以始终停留在主窗口底部

3.3组件加载完毕动作

    Component.onCompleted: {
        if (typeof contextInitialUrl !== 'undefined') {
            // Launched from C++ with context properties set.
            imageNameFilters = contextImageNameFilters;//QImageReader支持的图片格式
            picturesLocation = contextPicturesLocation;//组件加载完毕时  初始化打开图片路径
            if (contextInitialUrl == "")
                fileDialog.open();//没有获取到系统图片路径 直接打开
            else
                folderModel.folder = contextInitialUrl + "/";//指定对话框默认打开文件夹路径
        } else {
            // Launched via QML viewer without context properties set. 当没有使用C++代码设置context值时
            fileDialog.open();
        }
    }

3.4左上角文件夹图标

//左上角文件夹图标  点击弹出系统文件夹选择框
    Image {
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.margins: 10
        source: "resources/folder.png"
        MouseArea {
            anchors.fill: parent
            anchors.margins: -10
            onClicked: fileDialog.open()//点击打开文件夹对话框
            hoverEnabled: true
            onPositionChanged: {
                tooltip.visible = false//位置改变时 隐藏提示框
                hoverTimer.start()
            }
            onExited: {
                tooltip.visible = false//鼠标离开时 隐藏提示框
                hoverTimer.stop()
            }
            Timer {
                id: hoverTimer
                interval: 1000
                onTriggered: {
                    tooltip.x = parent.mouseX
                    tooltip.y = parent.mouseY
                    tooltip.visible = true
                }
            }
            Rectangle {//提示框
                id: tooltip
                border.color: "black"
                color: "beige"
                 tooltipText.implicitWidth + 8
                height: tooltipText.implicitHeight + 8
                visible: false
                Text {
                    id: tooltipText
                    anchors.centerIn: parent
                    text: "Open an image directory (" + openShortcut.sequenceString + ")"
                }
            }
        }
        Shortcut {
            id: openShortcut
            sequence: StandardKey.Open
            onActivated: fileDialog.open()
        }
    }

　　习惯了C++这种编译性语言，qml这种声明性语言用起来感觉好简单，就拿这段代码中的提示框来说，不管数据怎么样，提示框的行为和效果展示我们都可以随意定制，这在使用QWidget来实现时就没有这么容易。提示框的显示和隐藏只需要在交互合适的时机通过id来设置visible属性即可。

3.5滚动条

//右侧垂直滚动条
Rectangle {
    id: verticalScrollDecorator
    anchors.right: parent.right//锚定父窗口右侧
    anchors.margins: 2//距离边界2px
    color: "cyan"
    border.color: "black"//滚动条边框颜色
    border. 1//滚动条边框宽度
     5//滚动条宽度
    radius: 2//四角圆角半径
    antialiasing: true//反锯齿
    height: flick.height * (flick.height / flick.contentHeight) - (width - anchors.margins) * 2//滚动条高度
    y:  flick.contentY * (flick.height / flick.contentHeight)//滚动条y值
    NumberAnimation on opacity { id: vfade; to: 0; duration: 500 }//使用动画将滚动条透明度设置为0，即不可见
    onYChanged: { opacity = 1.0; scrollFadeTimer.restart() }//启动滚动条小时定时器->调用水平和垂直透明度渐变动画，知道滚动条消失
}

　　水平滚动条和垂直滚动条一样

//水平底部滚动条
Rectangle {
    id: horizontalScrollDecorator
    anchors.bottom: parent.bottom
    anchors.margins: 2
    color: "cyan"
    border.color: "black"
    border. 1
    height: 5
    radius: 2
    antialiasing: true
     flick.width * (flick.width / flick.contentWidth) - (height - anchors.margins) * 2
    x:  flick.contentX * (flick.width / flick.contentWidth)
    NumberAnimation on opacity { id: hfade; to: 0; duration: 500 }
    onXChanged: { opacity = 1.0; scrollFadeTimer.restart() }
}

3.6 可滑动区域

　　最后一个，也是最重要的一个滑动区域

Flickable {
    id: flick
    anchors.fill: parent
    contentWidth: width * surfaceViewportRatio//可展示组件区域宽度
    contentHeight: height * surfaceViewportRatio//可展示组件区域高度
    Repeater {
        model: FolderListModel {//FolderListModel：文件夹系统model
            id: folderModel
            objectName: "folderModel"
            showDirs: false
            nameFilters: imageNameFilters//过滤文件夹格式"*.png", "*.jpg", "*.gif"
        }
        Rectangle {
            id: photoFrame
             image.width * (1 + 0.10 * image.height / image.width)
            height: image.height * 1.10
            scale: defaultSize / Math.max(image.sourceSize.width, image.sourceSize.height)
            Behavior on scale { NumberAnimation { duration: 200 } }//缩放、x坐标和y坐标发生变化时都使用动画在200ms完成
            Behavior on x { NumberAnimation { duration: 200 } }
            Behavior on y { NumberAnimation { duration: 200 } }
            border.color: "black"//图片边框别景色
            border. 2
            smooth: true//平滑
            antialiasing: true//反锯齿
            Component.onCompleted: {
                x = Math.random() * root.width - width / 2
                y = Math.random() * root.height - height / 2
                rotation = Math.random() * 13 - 6//随机一个角度
            }
            Image {
                id: image
                anchors.centerIn: parent
                fillMode: Image.PreserveAspectFit//图片均匀缩放 不剪裁
                source: folderModel.folder + fileName//filename是FolderListModel提供的属性
                antialiasing: true
            }
            //通常和一个可见的 Item 配合使用来处理捏拉手势
            PinchArea {//http://blog.csdn.net/foruok/article/details/32078761
                anchors.fill: parent
                pinch.target: photoFrame//pinch 属性知名与捏拉手势的详情
                pinch.minimumRotation: -360//涅拉逆向旋转最大360°
                pinch.maximumRotation: 360//涅拉顺时旋转最大360°
                pinch.minimumScale: 0.1//涅拉最小缩放到原始大小10%
                pinch.maximumScale: 10//涅拉最大缩放到原始大小10倍
                pinch.dragAxis: Pinch.XAndYAxis//拖拽x轴和y轴都可以
                onPinchStarted: setFrameColor();//第一次识别到捏拉手势时发出 修改当前图片
                property real zRestore: 0
                onSmartZoom: {
                    if (pinch.scale > 0) {//放大
                        photoFrame.rotation = 0;
                        photoFrame.scale = Math.min(root.width, root.height) / Math.max(image.sourceSize.width, image.sourceSize.height) * 0.85
                        photoFrame.x = flick.contentX + (flick.width - photoFrame.width) / 2
                        photoFrame.y = flick.contentY + (flick.height - photoFrame.height) / 2
                        zRestore = photoFrame.z
                        photoFrame.z = ++root.highestZ;//涅拉时z值增大
                    } else {
                        photoFrame.rotation = pinch.previousAngle
                        photoFrame.scale = pinch.previousScale
                        photoFrame.x = pinch.previousCenter.x - photoFrame.width / 2
                        photoFrame.y = pinch.previousCenter.y - photoFrame.height / 2
                        photoFrame.z = zRestore//缩小时还原z值
                        --root.highestZ
                    }
                }

                MouseArea {
                    id: dragArea
                    hoverEnabled: true
                    anchors.fill: parent
                    drag.target: photoFrame//拖拽对象  为Flickable中Model数据的绘制代理
                    scrollGestureEnabled: false  // 2-finger-flick gesture should pass through to the Flickable
                    onPressed: {
                        photoFrame.z = ++root.highestZ;
                        parent.setFrameColor();//鼠标按下图片区域时 重置当前图片currentFrame  主要重置属性z  代表图片显示层
                    }
                    onEntered: parent.setFrameColor();//鼠标进入图片区域时 重置当前图片currentFrame
                    onWheel: {//鼠标滚轮滚动时 如果按下contrl键 则当前图片进行旋转  否则进行缩放
                        if (wheel.modifiers & Qt.ControlModifier) {
                            photoFrame.rotation += wheel.angleDelta.y / 120 * 5;
                            if (Math.abs(photoFrame.rotation) < 4)
                                photoFrame.rotation = 0;
                        } else {
                            photoFrame.rotation += wheel.angleDelta.x / 120;
                            if (Math.abs(photoFrame.rotation) < 0.6)
                                photoFrame.rotation = 0;
                            var scaleBefore = photoFrame.scale;
                            photoFrame.scale += photoFrame.scale * wheel.angleDelta.y / 120 / 10;
                        }
                    }
                }
                function setFrameColor() {
                    if (currentFrame)
                        currentFrame.border.color = "black";//设置上一张图片边框颜色为黑色
                    currentFrame = photoFrame;
                    currentFrame.border.color = "red";//设置当前图片边框颜色为红色
                }
            }
        }
    }
}

　　源码中有大量的注释，针对大多数代码都有了注释，应该不难理解。

　　这个滑动区域使用了Repeater元素来生成多个对象，对象来自模型FolderListModel，id为photoFrame的Rectangle为绘制代理，在绘制代理中有两个事件响应组件PinchArea和MouseArea，这两个事件所针对的情况不一样，MouseArea是鼠标事件，PinchArea是涅拉事件主要针对触屏操作。PinchArea细节