使用QtQuick / QML创建机械计数器外观

Question

我试图用QtQuick复制机械计数器的外观。 （下图来自http://en.wikipedia.org/wiki/Counter#Mechanical_counters） 计数器值是一个浮点数，8.5可能会显示一个计数器轮，显示8的底部和9的顶部。

对于单个车轮，我想要显示图形条的移动摘录。以下图形将说明这一点。我的QML组件应显示蓝色矩形中的数字，其余部分（在下图中模糊）不可见。

我的问题是构建视图和更新计数器显示的最佳方法是什么？

• 每个数字都有一个小的Canvas元素，然后在其中绘制一段图形条？
• 使用小Flickable作为孩子的整个图形条，然后平移图形条？但是我不希望用户可以改变计数器视图，即它不应该接受鼠标或触摸事件来平移视图。
• 还有其他方法吗？

Answer 1

如果您希望项目环绕，请使用多个PathView，其模型为文字10：

model: 10

您可以为每个视图设置interactive至false以禁用用户互动。

每个视图都在Row中。将preferredHighlightBegin / end属性设置为0.5，以便当前项始终居中。

然后，将所有内容包含在Item中，其宽度等于行的implicitWidth，其高度等于您想要的任何高度（可能是一个项目委托的高度） 。将clip设置为true以隐藏不应显示的项目。然后，您可以将项目中的内容（行）居中。