送亲人，用1小时制作精美电子相框 | Qt 示例

欢迎大家来到IT世界,在知识的湖畔探索吧!

今天给大家分享：

如何用 Qt 实现一个电子相框。

运行效果：

欢迎大家来到IT世界,在知识的湖畔探索吧!

代码链接：

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() } } } 

欢迎大家来到IT世界,在知识的湖畔探索吧!

FileDialog 用于提供选择文件 / 目录的功能， 这里我们通过它来选择照片所在目录。

Repeater 会根据 model 里数据重复构建多个一样的控件，这里我们通过它来创建所有照片载体控件。

Repeater 的数据源是 FolderListModel，FolderListModel 提供的数据是一个目录下的所有内容，这里对应的就是照片了。

嵌入式物联网需要学的东西真的非常多，千万不要学错了路线和内容，导致工资要不上去！

无偿分享大家一个资料包，差不多150多G。里面学习内容、面经、项目都比较新也比较全！某鱼上买估计至少要好几十。

点击这里找小助理0元领取：嵌入式物联网学习资料（头条）

运行效果：

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

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

设置初始状态

欢迎大家来到IT世界,在知识的湖畔探索吧!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 则用于支持拖动事件。

运行效果：

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

支持缩放照片

欢迎大家来到IT世界,在知识的湖畔探索吧!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..com/s/KCZQcjRxIQIlyoEig1adVg

文章转载自：老吴嵌入式

文章来源于：送老婆，用1小时为家人制作精美电子相框 | Qt 示例

原文链接：送老婆，用1小时为家人制作精美电子相框 | Qt 示例

版权声明：本文来源于网络，免费传达知识，版权归原作者所有，如涉及作品版权问题，请联系我进行删除