摘要:在日常开发中,我们经常使用二级列表控件,而且我们想做成自定义任何一个样式的,小编亲自做一个这样的控件分享给大家,以后会吧这个控件格式化成可自定义样式形状的,为了做效果暂时做成定格的二级控件好,在这里简单介绍实现这个控件的思路首先我们要理解二
在日常开发中,我们经常使用二级列表控件,而且我们想做成自定义任何一个样式的,小编亲自做一个这样的控件分享给大家,以后会吧
这个控件格式化成可自定义样式形状的,为了做效果暂时做成定格的二级控件:
好,在这里简单介绍实现这个控件的思路:
首先我们要理解二级控件的构架:
列表视图 父级组件 子级组件 父级数据组 子级数据组
在这里我们通过qml实用的ListModel来存放父级数据和子级数据
</>复制代码
import QtQuick 2.5
Item {
property int pItemHeight:50
property int cItemHeight:40
//当前显示子组件的数量
property int currentChildrenCount:0
//当前福组件的数量
property int currentparentcount:appTypemodel.count
//父组件之间的间隔
property int parentItemSpacing:20
//接收对应子控件被点击后返回的引索值,以处理数据的选择
signal itemClicked(int index);
id:root
//子级数据存储
ListModel{
id:appsmodel
ListElement{
appName:"hellword"
appType: "media"
}
ListElement{
appName:"tommego music"
appType: "media"
}
ListElement{
appName:"my ending"
appType: "media"
}
ListElement{
appName:"close music"
appType: "media"
}
ListElement{
appName:"tommego media"
appType: "media"
}
ListElement{
appName:"tommego media"
appType: "games"
}
ListElement{
appName:"tommego media"
appType: "games"
}
ListElement{
appName:"tommego media"
appType: "games"
}
ListElement{
appName:"tommego media"
appType: "games"
}
ListElement{
appName:"tommego media"
appType: "games"
}
ListElement{
appName:"tommego media"
appType: "notes"
}
ListElement{
appName:"tommego media"
appType: "notes"
}
ListElement{
appName:"tommego media"
appType: "notes"
}
ListElement{
appName:"tommego media"
appType: "notes"
}
ListElement{
appName:"tommego media"
appType: "notes"
}
ListElement{
appName:"tommego media"
appType: "others"
}
ListElement{
appName:"tommego media"
appType: "others"
}
ListElement{
appName:"tommego media"
appType: "others"
}
ListElement{
appName:"tommego media"
appType: "others"
}
ListElement{
appName:"tommego media"
appType: "others"
}
ListElement{
appName:"tommego media"
appType: "others"
}
}
//父级数据存储
ListModel{
id:appTypemodel
ListElement{
appType: "media"
shown:false
}
ListElement{
appType: "games"
shown:false
}
ListElement{
appType: "notes"
shown:false
}
ListElement{
appType: "others"
shown:false
}
}
//父级列表显示,内嵌子级列表
Column{
id:parentcol
spacing: parentItemSpacing
Repeater{
model:appTypemodel
delegate:Component{
id:content
Item{
width: root.width
height: appTypemodel.get(parentcontent.cindex).shown?pItemHeight+cItemHeight*appcol.childrenCount:pItemHeight
Behavior on height{
PropertyAnimation{
properties: "height"
duration: 350
easing.type:Easing.OutQuart
}
}
Rectangle{
id:typebnt
width: pma.containsMouse?root.width:root.width-20
height: pItemHeight
radius: pma.containsMouse?0:height/2
color: "#3d3c3c"
Behavior on radius{
PropertyAnimation{
properties: "radius"
duration: 250
}
}
Behavior on width{
PropertyAnimation{
properties: "width"
duration: 250
}
}
Text {
id: typetext
text: qsTr(appType)
anchors.centerIn: parent
color: "#12ccaa"
font.pixelSize: 20
}
MouseArea{
id:pma
anchors.fill: parent
hoverEnabled: true
onClicked: {
//判断这个父组件是否已经显示子组件
if(appTypemodel.get(index).shown==false){
for(var a=0;a
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/79853.html
摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbbyrX?w=500&h=500); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comeh...
摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbbyrX?w=500&h=500); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comeh...
阅读 2800·2021-11-24 09:38
阅读 2050·2019-08-30 15:53
阅读 1389·2019-08-30 15:44
阅读 3293·2019-08-30 14:10
阅读 3682·2019-08-29 16:29
阅读 1879·2019-08-29 16:23
阅读 1167·2019-08-29 16:20
阅读 1549·2019-08-29 11:13