当前位置:   article > 正文

qml 之ListView嵌套GridView_qml listview嵌套

qml listview嵌套

、设置禁止滑动

      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":"主题"})
            phoneModel.append

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/170702
推荐阅读
相关标签
  

闽ICP备14008679号