qml 之ListView嵌套GridView

、设置禁止滑动

      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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 在 QML 中使用 ListView 嵌套可以使用以下代码示例进行参考: ``` import QtQuick 2.0 ListView { width: 200 height: 300 model: outerModel delegate: Item { width: 200 height: 50 ListView { width: 200 height: 50 model: innerModel delegate: Text { text: name } } } } ``` 在上面的代码中,我们定义了一个外部的 ListView,它的 model 属性绑定了一个名为 outerModel 的数据模型。然后我们在外部 ListView 的 delegate 中再定义一个 ListView,并将它的 model 属性绑定到一个名为 innerModel 的数据模型。这样,就可以在外部 ListView 中显示内部 ListView,即每个外部 ListView 的 delegate 中都包含了一个 ListView。 请注意,这里的代码仅是一个示例,您需要根据自己的需要进行相应的调整和修改。 ### 回答2: 在QML中,可以使用ListView组件来实现列表视图的功能。如果要实现嵌套ListView,可以参考以下步骤进行编写: 1. 在主页面上创建一个外部的ListView,用于展示外部的列表数据。例如,可以在主页面上创建一个List对象,并将其作为外部ListView的模型。 2. 在外部ListView的委托项中的某个位置(例如,在ListView中的delegate中),创建一个内部的ListView组件。可以使用delegate的方式,将内部的ListView嵌入到外部的ListView中。 3. 为内部的ListView定义一个模型,用于展示内部列表数据。可以使用Model对象,将其作为内部ListView的模型。 4. 在内部的ListView的委托项中创建适当的视图组件,用于展示内部列表数据。 5. 根据需求和设计,可以设置外部的ListView和内部的ListView的属性,以满足需要。例如,可以设置外部ListView的layout属性来控制列表项在外部ListView中的布局方式。 一个简单示例的代码如下所示: ```qml import QtQuick 2.15 import QtQuick.Controls 2.15 Item { property var outerListData: [ { name: "List 1", items: ["Item 1", "Item 2", "Item 3"] }, { name: "List 2", items: ["Item 4", "Item 5", "Item 6"] } ] ListView { width: 200 height: 300 model: outerListData delegate: Item { width: 200 height: 100 ListView { width: 180 height: 80 model: modelData.items delegate: Text { width: parent.width text: modelData } } } } } ``` 以上示例中,外部的ListView展示了两个列表,每个列表的名称是外部列表数据中的name属性,内部的ListView展示了对应列表的items属性。内部的ListView的委托项使用Text组件展示了内部列表中的每一项数据。 这样,就实现了在QML嵌套编写ListView组件的功能。 ### 回答3: 在QML嵌套ListView的写法相对简单,可以通过在ListView的delegate中再嵌套一个ListView来实现。下面我将详细说明如何写嵌套ListView。 1. 首先,在QML文件中导入ListView和ListModel模块: ``` import QtQuick 2.0 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.0 ``` 2. 接下来,创建两个ListView,一个用于外层列表,一个用于内层列表: ```qml ListView { id: outerListView width: 300 height: 300 model: outerModel // 外层列表中的每个项目 delegate: Item { width: outerListView.width height: outerListView.height / 3 ListView { width: parent.width height: parent.height // 内层列表中的每个项目 delegate: Item { width: outerListView.width / 2 height: outerListView.height / 3 Text { text: "Inner Item " + index } } model: innerModel } } } ``` 3. 创建两个ListModel,一个用于外层ListView的数据,一个用于内层ListView的数据: ```qml ListModel { id: outerModel ListElement { name: "Outer Item 1" } ListElement { name: "Outer Item 2" } } ListModel { id: innerModel ListElement { name: "Inner Item 1" } ListElement { name: "Inner Item 2" } } ``` 这样就完成了一个简单的嵌套ListView。外层ListView中的每个项目都包含一个内层ListView,内层ListView中的每个项目都是一个文本项。 需要注意的是,嵌套ListView的性能可能会受到影响,尤其是在列表项数量较多时。因此,在实际开发中,应尽量避免过多的嵌套
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值