Qt官方示例-速度仪表盘

• 2019 年 10 月 11 日
• 筆記

该刻度盘控件为一个速度仪表盘。

预览

运行演示

分析

• 采用Qml语言实现；
• 使用到了图片素材(刻度盘，指示器，指示器阴影，覆盖层)；

• 它结合了Image元素，Rotation变换和SpringAnimation行为，用来组合生成交互式的速度仪表盘。
• 核心代码：

Item {      id: root      property real value : 0        width: 210; height: 210        Image { source: "background.png" }    //! [needle_shadow]      Image {          x: 96          y: 35          source: "needle_shadow.png"          transform: Rotation {              origin.x: 9; origin.y: 67              angle: needleRotation.angle          }      }  //! [needle_shadow]  //! [needle]      Image {          id: needle          x: 98; y: 33          antialiasing: true          source: "needle.png"          transform: Rotation {              id: needleRotation              origin.x: 5; origin.y: 65              //! [needle angle]              angle: Math.min(Math.max(-130, root.value*2.6 - 130), 133)              Behavior on angle {                  SpringAnimation {                      spring: 1.4                      damping: .15                  }              }              //! [needle angle]          }      }  //! [needle]  //! [overlay]      Image { x: 21; y: 18; source: "overlay.png" }  //! [overlay]  }  

关于更多

• 在QtCreator软件可以找到

• 或在你的Qt安装目录C:Qt{你的Qt版本}Examples{你的Qt版本}quickcustomitemsdialcontrol找到。
• 相关链接

https://doc.qt.io/qt-5/qtquick-customitems-dialcontrol-example.html