今天给大家分享：如何用 Qt 实现一个电子相框。

运行效果：

代码链接：

https://doc.qt.io/qt-5/qtmultimedia-multimediawidgets-videowidget-example.html

实现难度：

★★★☆☆

访问照片

Window {
    [...]

    FileDialog {
        [...]
        onAccepted: folderModel.folder = fileUrl + "/"
    }

    Item {
        [...]
        Repeater {
            model: FolderListModel {
                id: folderModel
            }
            Rectangle {
                [...]
                Image {
                    [...]
                    source: folderModel.folder + fileName
                }
            }
        }
    }

    Image {
        source: "qrc:/resources/folder.png"
        MouseArea {
            onClicked: fileDialog.open()
        }
    }
}

FileDialog 用于提供选择文件 / 目录的功能， 这里我们通过它来选择照片所在目录。Repeater 会根据 model 里数据重复构建多个一样的控件，这里我们通过它来创建所有照片载体控件。Repeater 的数据源是 FolderListModel，FolderListModel 提供的数据是一个目录下的所有内容，这里对应的就是照片了。

运行效果：

点击左上角的文件夹图标，会弹出一个目录选择框。

我选择的目录里放着 3 张公众号的头像，但是这里只看到一张头像，这是因为它们都重叠在一起了。

设置初始状态

Item {
    [...]
    Repeater {
        [...]
        Rectangle {
            id: photoFrame

            // 随机缩放照片
            scale: root.height / Math.max(image.sourceSize.width, image.sourceSize.height) * Math.max(0.3, Math.random())
            [...]

            Component.onCompleted: {
                // 随机生成照片的位置和旋转角度 
                x = Math.random() * root.width - width/2
                y = Math.random() * root.height - height/2
                rotation = Math.random() * 20 - 10
            }

            Image {
                id: image
                source: folderModel.folder + fileName
                [...]
            }
        }
    }
}

在 QML 里可以使用 JavaScript ，这里我们利用 Math.random() 生成随机数，从而实现照片摆放位置和旋转角度的随机化。scale 属性用于支持照片的缩放。

运行效果：

为了说明是不同的文件，我把文件名显示出来了。

可以看到，已经支持在初始化时随机摆放和缩放照片了。但是，此时无法单独移动某张照片。

支持移动照片

Rectangle {
    id: photoFrame
    [...]

    MouseArea {
        id: dragArea
        anchors.fill: parent
        drag.target: photoFrame

        onPressed: {
            photoFrame.z = ++root.highestZ;
            console.log(photoFrame.z)
        }
    }
}

MouseArea 用于支持鼠标点击事件，当用户点击某张图片时，我们将其 z 属性调整为最大值。z 属性用于设置控件的 z 轴坐标，z 值越大，显示的优先级越高。drag.target 则用于支持拖动事件。

运行效果：

被选中的照片会显示在最上层，然后通过鼠标可以移动被选中的照片。

支持缩放照片

Rectangle {
    id: photoFrame
    [...]

    MouseArea {
        id: dragArea
        [...]

        onWheel: {
            if (wheel.modifiers & Qt.ControlModifier) {
                photoFrame.rotation += wheel.angleDelta.y / 120 * 5;
                if (Math.abs(photoFrame.rotation) < 4)
                    photoFrame.rotation = 0;
            } else {
                photoFrame.scale += photoFrame.scale * wheel.angleDelta.y / 120 / 10;
                if (photoFrame.scale < 0.1)
                    photoFrame.scale = 0.1
            }
        }
    }
}

MouseArea.wheel 用于处理鼠标滚轮事件。当按住 Ctrl 键时，滚动滚轮改变照片的旋转角度。当不按住 Ctrl 键时，滚动滚轮改变照片的大小。

运行效果：

定时更新内容

Window {
    [...]
    function refresh() {
        [...]
        folderModel.folder = ""
        folderModel.folder = folderPath
    }

    Timer {
        id: updateTimer
        interval: 60000
        onTriggered: {
            refresh()
            updateTimer.restart()
        }
    }

    Shortcut {
        sequence: "F5"
        onActivated: {
            refresh()
            updateTimer.restart()
        }
    }
}

Timer 用于创建定时器，触发时长由 interval 来决定。当时间到了，就调用 refresh() 刷新展示的照片。Shortcut 用于创建键盘快捷键功能，这里绑定的是 F5 键。

运行效果：

我将自动刷新的时间设置为 3 秒，先让它自动刷新，然后我手动按下了 F5， 也刷新成功。

到此，虽然程序还有很多需要完善的地方，但是电子相框的基本功能已经实现完毕了，感兴趣的小伙伴们可以再深入研究一下代码。