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

Question

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

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

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

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

Answer 1

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

model: 10

您可以将每个视图的interactive 设置为false 以禁用用户交互。

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

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