qml----Model/View入门(三)ListView分组显示

除了动画效果外,还有一个实用的功能就是按条件分组。如同手机里通讯录一般

section,就是实现分组的主角,简略讲讲这个主角的本领

section.property  表明了分组的依据,比如section.property: "cost"

section.criteria 指定了section,property的判断条件,通常有ViewSection.FullString和ViewSection.FirstCharacter两种,全串匹配和首字母匹配。匹配时不区分大小写

section.delegate 通过设置一个component,来显示每个section

还有很多section的属性,具体的可查帮助文档。不过有一点需要注意:listview的分组不会自动排序,也就是说,如果apple和huawei的手机交替出现时,那么listview则可能会显示多个           相同的section.

下面是个具体的实例

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

Rectangle {
    width: 360
    height: 400
    color: "#EEEEEE"

    Component{
        id: phoneModel

        ListModel{
            ListElement{
                name: "iphone 5"
                cost: "4900"
                manufacture: "Apple"
            }

            ListElement{
                name: "iphone 3gs"
                cost: "1000"
                manufacture: "Apple"
            }

            ListElement{
                name: "iphone 4"
                cost: "1800"
                manufacture: "Apple"
            }

            ListElement{
                name: "iphone 4s"
                cost: "2300"
                manufacture: "Apple"
            }

            ListElement{
                name: "B199"
                cost: "1590"
                manufacture: "HuaWei"
            }

            ListElement{
                name: "c88160"
                cost: "590"
                manufacture: "HuaWei"
            }

            ListElement{
                name: "galaxy s5"
                cost: "2300"
                manufacture: "sumsung"
            }

            ListElement{
                name: "galaxy s7"
                cost: "4900"
                manufacture: "sumsung"
            }

            ListElement{
                name: "galaxy s4"
                cost: "1200"
                manufacture: "sumsung"
            }

            ListElement{
                name: "MI5"
                cost: "2300"
                manufacture: "XiaoMi"
            }
        }
    }// phoneModel is end

    Component{
        id: phoneDelegate

        Item {
            id: wrapper
            width: parent.width
            height: 30
            ListView.onAdd: console.log("count:", ListView.view.count)

            MouseArea{
                anchors.fill: parent
                onClicked: wrapper.ListView.view.currentIndex = index
            }

            RowLayout{
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                spacing: 8

                Text{
                    id: coll
                    text: name
                    color: wrapper.ListView.isCurrentItem ? "red" : "black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18
                    Layout.preferredWidth: 120
                }

                Text{
                    text: cost
                    color: wrapper.ListView.isCurrentItem ? "red" : "black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18
                    Layout.preferredWidth: 80
                }

                Text{
                    text: manufacture
                    color: wrapper.ListView.isCurrentItem ? "red" : "black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18
                    Layout.fillWidth: true
                }
            }
        }
    }//phoneDelegate is end

    Component{
        id: sectionHeader

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

    ListView{
        id: listView
        anchors.fill: parent
        delegate: phoneDelegate
        model: phoneModel.createObject(listView)
        focus: true
        highlight: Rectangle{
            color: "lightblue"
        }

        /*  特别注意的是,listview的分组不会引起listview自动按分组来处理Item的顺序。如果listView的Model
         *  内的数据没有按分组顺序编排,比如说samsung和apple的手机在model内交替出现,那么listview则可能会
         *  显示多个相同的section
         */
        section.property: "manufacture"
        section.criteria: ViewSection.FullString
        section.delegate: sectionHeader
    }
}

 

转载于:https://www.cnblogs.com/SaveDictator/p/8192623.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在QML中,我们可以使用ListView实现窗口跳转功能。下面是一种常见的实现方式: 首先,我们需要一个存储窗口信息的模型。可以使用一个自定义的数据模型来实现,也可以使用Qt提供的ListModel。 接下来,我们在QML中创建一个ListView,并将该模型设置为其model属性。ListView会根据模型的内容自动生成相应的窗口。 在ListView的delegate属性中,我们可以定义窗口的外观和交互方式。可以使用Rectangle或Item作为窗口的外观,根据需要进行定制。 在窗口外观的交互部分,我们可以添加一个MouseArea来接收鼠标点击事件。在该事件的处理函数中,我们可以获取点击的索引值,并根据需求执行相应的窗口跳转操作。 对于窗口跳转操作,有多种方式可供选择。例如,我们可以使用StackView或StackWindow来进行窗口切换。也可以直接更改显示内容的属性值,实现窗口内容的动态刷新。 在实际开发中,还可以根据具体需求进行更多的定制。例如,可以添加动画效果、设置窗口间的传参、处理窗口关闭等。 总之,使用ListView实现窗口跳转功能的基本步骤包括:创建一个存储窗口信息的模型、将其设置为ListViewmodel属性、在delegate中定义窗口的外观和交互方式、处理窗口的跳转操作。通过这种方式,我们可以方便地实现QML中的窗口跳转。 ### 回答2: 在QML中,要实现ListView的窗口跳转,可以通过以下步骤来实现: 1. 创建至少两个QML文件,分别表示不同的窗口。例如,我们可以创建一个名为"MainPage.qml"的主页面和一个名为"DetailPage.qml"的详细页面。 2. 在"MainPage.qml"中创建一个ListView,并设置model为一个代表数据源的ListModel,例如: ListView { model: myModel delegate: Item { // 设置列表项的外观 } } 3. 在"MainPage.qml"中,为ListView的每个列表项添加一个点击事件处理函数,当点击某个列表项时,触发该事件。在该事件处理函数中,可以执行窗口跳转的逻辑,例如: ListView { //... delegate: Item { //... MouseArea { //... onClicked: { // 执行窗口跳转逻辑,例如: var component = Qt.createComponent("DetailPage.qml"); if (component.status === Component.Ready) { var detailPage = component.createObject(parent); // parent为当前页面的父项 // 可以传递数据给DetailPage.qml,例如: detailPage.itemData = model.get(index); } } } } } 4. 在"DetailPage.qml"中,根据需求设计详细页面的布局和内容。 通过以上步骤,当在"MainPage.qml"的ListView中点击某个列表项时,会触发相应的事件处理函数,在该函数中创建并显示"DetailPage.qml"的实例,并根据需要进行数据传递。这样就实现QMLListView的窗口跳转。 ### 回答3: QML 中的 ListView 是一个用于显示一个可滚动的列表的控件,它可以用于在窗口中展示一组数据。要实现窗口跳转,可以通过以下步骤: 1. 首先,确保在 QML 中引入 QtQuick 模块,以便使用 ListView 组件: ```qml import QtQuick 2.0 ``` 2. 创建一个 ListView 组件并指定其属性,比如宽度、高度、布局方向等等。 ```qml ListView { width: 200 height: 300 orientation: ListView.Vertical // 设置布局方向为垂直 model: ListModel { ... } // 设置列表的数据 } ``` 3. 在 ListViewmodel 属性中,通过 ListModel 创建一个数据模型,定义列表的内容。可以使用自定义的对象或者简单的字符串等。 ```qml model: ListModel { ListElement { text: "Item 1" } // 第一个列表项 ListElement { text: "Item 2" } // 第二个列表项 // ... } ``` 4. 在 ListView 的 delegate 属性中,定义每个列表项的外观。可以使用自定义的组件或者内置的 Item 组件。 ```qml delegate: Item { width: parent.width height: 50 Rectangle { width: parent.width height: parent.height color: index % 2 === 0 ? "lightgray" : "white" // 每隔一个变换背景色 Text { anchors.centerIn: parent text: model.text // 显示列表项的文本 } MouseArea { anchors.fill: parent onClicked: { // 在此处进行窗口跳转操作,比如使用 StackView 或改变当前窗口的 visible 属性等 } } } } ``` 5. 在 MouseArea 的 onClicked 信号中编写窗口跳转的代码。具体的实现方式取决于你使用的窗口管理器或导航机制。 以上就是利用 QML 中的 ListView 组件实现窗口跳转的基本步骤。根据具体的需求,你可能需要进一步扩展和优化代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值