资讯专栏INFORMATION COLUMN

如何用qml做一个炫酷的二级列表控件ExpandableList

Cobub / 2251人阅读

摘要:在日常开发中,我们经常使用二级列表控件,而且我们想做成自定义任何一个样式的,小编亲自做一个这样的控件分享给大家,以后会吧这个控件格式化成可自定义样式形状的,为了做效果暂时做成定格的二级控件好,在这里简单介绍实现这个控件的思路首先我们要理解二

在日常开发中,我们经常使用二级列表控件,而且我们想做成自定义任何一个样式的,小编亲自做一个这样的控件分享给大家,以后会吧
这个控件格式化成可自定义样式形状的,为了做效果暂时做成定格的二级控件:




好,在这里简单介绍实现这个控件的思路:
首先我们要理解二级控件的构架:

列表视图 父级组件 子级组件 父级数据组 子级数据组
在这里我们通过qml实用的ListModel来存放父级数据和子级数据

</>复制代码

  1. import QtQuick 2.5
  2. Item {
  3. property int pItemHeight:50
  4. property int cItemHeight:40
  5. //当前显示子组件的数量
  6. property int currentChildrenCount:0
  7. //当前福组件的数量
  8. property int currentparentcount:appTypemodel.count
  9. //父组件之间的间隔
  10. property int parentItemSpacing:20
  11. //接收对应子控件被点击后返回的引索值,以处理数据的选择
  12. signal itemClicked(int index);
  13. id:root
  14. //子级数据存储
  15. ListModel{
  16. id:appsmodel
  17. ListElement{
  18. appName:"hellword"
  19. appType: "media"
  20. }
  21. ListElement{
  22. appName:"tommego music"
  23. appType: "media"
  24. }
  25. ListElement{
  26. appName:"my ending"
  27. appType: "media"
  28. }
  29. ListElement{
  30. appName:"close music"
  31. appType: "media"
  32. }
  33. ListElement{
  34. appName:"tommego media"
  35. appType: "media"
  36. }
  37. ListElement{
  38. appName:"tommego media"
  39. appType: "games"
  40. }
  41. ListElement{
  42. appName:"tommego media"
  43. appType: "games"
  44. }
  45. ListElement{
  46. appName:"tommego media"
  47. appType: "games"
  48. }
  49. ListElement{
  50. appName:"tommego media"
  51. appType: "games"
  52. }
  53. ListElement{
  54. appName:"tommego media"
  55. appType: "games"
  56. }
  57. ListElement{
  58. appName:"tommego media"
  59. appType: "notes"
  60. }
  61. ListElement{
  62. appName:"tommego media"
  63. appType: "notes"
  64. }
  65. ListElement{
  66. appName:"tommego media"
  67. appType: "notes"
  68. }
  69. ListElement{
  70. appName:"tommego media"
  71. appType: "notes"
  72. }
  73. ListElement{
  74. appName:"tommego media"
  75. appType: "notes"
  76. }
  77. ListElement{
  78. appName:"tommego media"
  79. appType: "others"
  80. }
  81. ListElement{
  82. appName:"tommego media"
  83. appType: "others"
  84. }
  85. ListElement{
  86. appName:"tommego media"
  87. appType: "others"
  88. }
  89. ListElement{
  90. appName:"tommego media"
  91. appType: "others"
  92. }
  93. ListElement{
  94. appName:"tommego media"
  95. appType: "others"
  96. }
  97. ListElement{
  98. appName:"tommego media"
  99. appType: "others"
  100. }
  101. }
  102. //父级数据存储
  103. ListModel{
  104. id:appTypemodel
  105. ListElement{
  106. appType: "media"
  107. shown:false
  108. }
  109. ListElement{
  110. appType: "games"
  111. shown:false
  112. }
  113. ListElement{
  114. appType: "notes"
  115. shown:false
  116. }
  117. ListElement{
  118. appType: "others"
  119. shown:false
  120. }
  121. }
  122. //父级列表显示,内嵌子级列表
  123. Column{
  124. id:parentcol
  125. spacing: parentItemSpacing
  126. Repeater{
  127. model:appTypemodel
  128. delegate:Component{
  129. id:content
  130. Item{
  131. width: root.width
  132. height: appTypemodel.get(parentcontent.cindex).shown?pItemHeight+cItemHeight*appcol.childrenCount:pItemHeight
  133. Behavior on height{
  134. PropertyAnimation{
  135. properties: "height"
  136. duration: 350
  137. easing.type:Easing.OutQuart
  138. }
  139. }
  140. Rectangle{
  141. id:typebnt
  142. width: pma.containsMouse?root.width:root.width-20
  143. height: pItemHeight
  144. radius: pma.containsMouse?0:height/2
  145. color: "#3d3c3c"
  146. Behavior on radius{
  147. PropertyAnimation{
  148. properties: "radius"
  149. duration: 250
  150. }
  151. }
  152. Behavior on width{
  153. PropertyAnimation{
  154. properties: "width"
  155. duration: 250
  156. }
  157. }
  158. Text {
  159. id: typetext
  160. text: qsTr(appType)
  161. anchors.centerIn: parent
  162. color: "#12ccaa"
  163. font.pixelSize: 20
  164. }
  165. MouseArea{
  166. id:pma
  167. anchors.fill: parent
  168. hoverEnabled: true
  169. onClicked: {
  170. //判断这个父组件是否已经显示子组件
  171. if(appTypemodel.get(index).shown==false){
  172. for(var a=0;a

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79853.html

相关文章

  • 前端每日实战:17# 视频演示何用纯 CSS 创作酷的同心矩形旋转动画

    摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbbyrX?w=500&h=500); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comeh...

    luqiuwen 评论0 收藏0
  • 前端每日实战:17# 视频演示何用纯 CSS 创作酷的同心矩形旋转动画

    摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbbyrX?w=500&h=500); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comeh...

    lixiang 评论0 收藏0

发表评论

0条评论

Cobub

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<