今天给大家分享：
如何用 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 提供的数据是一个目录下的所有内容，这里对应的就是照片了。
嵌入式物联网需要学的东西真的非常多，千万不要学错了路线和内容，导致工资要不上去！
无偿分享大家一个资料包，差不多150多G。里面学习内容、面经、项目都比较新也比较全！某鱼上买估计至少要好几十。
点击这里找小助理0元领取：嵌入式物联网学习资料（头条）
运行效果：
点击左上角的文件夹图标，会弹出一个目录选择框。
我选择的目录里放着 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， 也刷新成功。
到此，虽然程序还有很多需要完善的地方，但是电子相框的基本功能已经实现完毕了，感兴趣的小伙伴们可以再深入研究一下代码。
感谢阅读~~~
原文链接：https://mp.weixin.qq.com/s/KCZQcjRxIQIlyoEig1adVg
文章转载自：老吴嵌入式
文章来源于：送老婆，用1小时为家人制作精美电子相框 | Qt 示例
版权声明：本文来源于网络，免费传达知识，版权归原作者所有，如涉及作品版权问题，请联系我进行删除
