找回密码
 立即注册
Qt开源社区 门户 查看内容

Qml的Slider控件示例

2019-4-12 05:39| 发布者: admin| 查看: 1583| 评论: 0

摘要: 通过自定义样式美化Slider起始值0处标识同心圆;拖动动画变化颜色;气泡显示数值.示例源码importQtQuick2.0import"../"asMyRectangle{ width:320; height:240Row{ anchors.centerIn: parent spacing: ...

通过自定义样式美化Slider

  • 起始值0处标识同心圆;

  • 拖动动画变化颜色;

  • 气泡显示数值.



示例源码


  1. importQtQuick2.0

  2. import"../"asMy


  3. Rectangle{

  4. width:320; height:240


  5. Row{

  6. anchors.centerIn: parent

  7. spacing:20


  8. Column{

  9. spacing:50

  10. /* handle is rectangle */


  11. Repeater{


  12. model:["red","blue","green"]


  13. My.Slider{

  14. id: slider

  15. to:100


  16. handle:Item{

  17. width:14

  18. height: width


  19. Rectangle{

  20. width:14

  21. height: width

  22. radius: width/2

  23. color: slider.position ===0?"#d5d5d5": modelData

  24. anchors.verticalCenter: parent.verticalCenter


  25. NumberAnimation on width { running: slider.pressed;from:14; to:20; duration:100}

  26. NumberAnimation on width { running:!slider.pressed;from:20; to:14; duration:100}


  27. Rectangle{

  28. anchors.centerIn: parent

  29. width:10; height: width

  30. radius: width/2

  31. visible: slider.position ===0

  32. color:"white"


  33. NumberAnimation on width { running: slider.pressed;from:10; to:14; duration:100}

  34. NumberAnimation on width { running:!slider.pressed;from:14; to:10; duration:100}

  35. }


  36. Image{

  37. anchors.horizontalCenter: parent.horizontalCenter

  38. anchors.bottom: parent.top

  39. width:0; height: width

  40. smooth:true

  41. source:"./"+ modelData +"_64_64.svg"


  42. NumberAnimation on width { running: slider.pressed;from:0; to:48; duration:100}

  43. NumberAnimation on width { running:!slider.pressed;from:48; to:0; duration:100}


  44. Text{

  45. visible: slider.pressed

  46. anchors.centerIn: parent

  47. color:"white"

  48. text: parseInt(slider.position * slider.to)

  49. }

  50. }

  51. }

  52. }


  53. background:Rectangle{

  54. width:200

  55. height:2

  56. radius:2

  57. color:"#d5d5d5"


  58. /* available rectangle */

  59. Rectangle{

  60. width: slider.position*parent.width

  61. height: parent.height

  62. radius: parent.radius

  63. color: modelData

  64. }

  65. }

  66. }

  67. }

  68. }

  69. }

  70. }

源码地址


  1. https://github.com/QtComponent/Slider.git


----------------------------------------------------------------------------------------------------------------------
我们尊重原创,也注重分享,文章来源于微信公众号:你才小学生,建议关注公众号查看原文。如若侵权请联系qter@qter.org。
----------------------------------------------------------------------------------------------------------------------

鲜花

握手

雷人

路过

鸡蛋

公告
可以关注我们的微信公众号yafeilinux_friends获取最新动态,或者加入QQ会员群进行交流:190741849、186601429(已满) 我知道了