qml 之ListView嵌套GridView

单纯幼稚一辈子

已于 2022-11-15 12:02:05 修改

阅读量1.1k

点赞数

分类专栏： qt qml 文章标签： qml listview gridview

于 2020-10-16 17:56:51 首次发布

本文链接：https://blog.youkuaiyun.com/u013352076/article/details/109121307

版权

本文介绍如何在Qt QML中实现ListView嵌套GridView，通过示例代码展示了如何设置ListView禁止滑动、限制滑动边界，并提供了一个实际应用场景的使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

、设置禁止滑动

interactive:false

2、滑动不能超出界限

clip:true

3、实现嵌套

import QtQuick 2.0
import QtQuick.Controls 1.4

Rectangle {
visible: true
width: 1280
height: 720

property var fenlei_texts:
[
["KTV热歌","网络歌曲","现场音乐","背景音乐","经典","情歌"],
["夜店","学习工作","咖啡馆","运动","睡前","旅行"],
["伤感","安静","快乐","励志","治愈","思念"],
["00年代","90年代","80年代","70年代"],
["流行","电子","轻音乐","民谣","轻音乐","民谣","说唱","摇滚"],
["英语","韩语","日语","国语"]
]
ListModel{
id: phoneModel
}
Component{
id: sectionHeader

Rectangle{
width: parent.width
height: childrenRect.height
color: "lightsteelblue"
Text{
text: section
font.bold: true
font.pointSize: 20
}
}
}//sectionHeader is end

Component{
id:lisview_gridview
Rectangle{

width: ListView.view.width
height: 80
color: ListView.isCurrentItem?"#157efb":"#53d769" //选中颜色设置
border.color: Qt.lighter(color, 1.1)
GridView{
id:grid_view
model:fenlei_texts[index%6]
height:parent.height
width:parent.width　　　　　　　　
flickDeceleration:0
interactive:false
delegate: Component{
Rectangle{
id:back
color:GridView.isCurrentItem?"yellow":"red" //选中颜色设置
height:80
width:80
Text{
anchors.centerIn: parent
text:modelData
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.AllButtons
onClicked:{
grid_view.currentIndex = index //实现item切换
console.log("*******grid_currentIndex**********"+index)
}
onPressed: {
}
onReleased: {

}
}
}
}
Component.onCompleted: {
grid_view.currentIndex = -1;
}
}
MouseArea {
anchors.fill: parent
propagateComposedEvents: true
onPressed:{
listview.currentIndex = index //实现item切换
grid_view.currentIndex = -1
mouse.accepted = false
console.log("*******List_currentIndex**********"+index)
}
}
}
}
ListView {
id:listview
width: parent.width
height: parent.height
model:phoneModel
clip:true
delegate:lisview_gridview
section.property: "manufacture"
section.criteria: ViewSection.FullString
section.delegate: sectionHeader
}
Component.onCompleted: {
phoneModel.append({"manufacture":"主题"})

最低0.47元/天解锁文章