QML学习十五：ListView的简单使用（内建Model）

最新推荐文章于 2024-07-18 13:20:30 发布
最新推荐文章于 2024-07-18 13:20:30 发布
阅读量610 收藏 22
点赞数 22
分类专栏： QT 学习笔记 文章标签： qt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35662333/article/details/139621140
版权

转载QML学习十五：ListView的简单使用（内建Model）_qml listview-CSDN博客

一、概念

1、MVC

作为一种经典的架构模式，通过把职责、性质相近的成分归结在一起，不相近的进行隔离，MVC将系统分解为模型、视图、控制器三部分，每一部分都相对独立，职责单一。MVC是对系统复杂性的一种合理的梳理与切分，它的思想实质就是“关注点分离”。

QT中的Model-View编程框架，对Controller部分做了改动，引入了Delegate的概念，合起来就是Model-View-Delegate。

在QT C++中，对Model-View-Delegate已经做了基础的实现，不必去设计Model-View框架，只需学习Qt给的框架即可。

2、ListView

ListView用来一个条目列表，条目对应的数据来自于Model， 而每个条目的外观则由Delegate决定。

要使用ListView，必须指定一个Model、一个Delegate。

Model可以是QML内建类型，如ListModel、XmlListModel，也可以是在C++实现的QAbstractItemModel或QAbstractListModel的派生类。

二、ListView简单的使用

1、简单的显示例子

修改main.qml内容：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
 
import MyObj 1.0
 
 
Window {
    id: window
    visible: true
    width: 600
    height: 480
    title: qsTr("Hello World")
 
    Rectangle {
        width: 360
        height: 300
        color: "#EEEEEE"
 
        Component {
            id: phoneDelegate
 
            Item {
                id: wrapper
                width: parent.width
                height: 30
 
                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: manufacturer
                        color: wrapper.ListView.isCurrentItem ? "red" : "black";
                        font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18
                        Layout.fillWidth: true
                    }
                }
            }
        }
 
        ListView {
            id: listView
            anchors.fill: parent
            delegate: phoneDelegate
 
            model: ListModel {
                id: phoneModel
 
                ListElement {
                    name: "iPhone 3gs"
                    cost: "1000"
                    manufacturer: "Apple"
                }
 
                ListElement {
                    name: "iphone 4"
                    cost: "1800"
                    manufacturer: "Apple"
                }
 
                ListElement {
                    name: "iphone 5"
                    cost: "2800"
                    manufacturer: "Apple"
                }
 
                ListElement {
                    name: "iphone 6"
                    cost: "3800"
                    manufacturer: "Apple"
                }
 
                ListElement {
                    name: "iphone 8"
                    cost: "4800"
                    manufacturer: "Apple"
                }
            }
            focus: true
            highlight: Rectangle {
                color: "lightblue"
            }
        }
    }
 
}

编译运行：

2、增加Head和Footer

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
 
import MyObj 1.0
 
 
Window {
    id: window
    visible: true
    width: 600
    height: 480
    title: qsTr("Hello World")
 
    Rectangle {
        width: 360
        height: 300
        color: "#EEEEEE"
 
        Component {
            id: phoneModel
 
            ListModel {
                ListElement {
                    name: "iPhone 3"
                    cost: "1000"
                    manufacturer: "Apple"
                }
                ListElement {
                    name: "iPhone 4"
                    cost: "2000"
                    manufacturer: "Apple"
                }
                ListElement {
                    name: "iPhone 5"
                    cost: "3000"
                    manufacturer: "Apple"
                }
                ListElement {
                    name: "iPhone 6"
                    cost: "4000"
                    manufacturer: "Apple"
                }
            }
        }
 
        Component {
            id: headerView
 
            Item {
                width: parent.width
 
                RowLayout {
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 8
 
                    Text {
                        text: "Name"
                        font.bold: true
                        font.pixelSize: 20
                        Layout.preferredWidth: 120
                    }
 
                    Text {
                        text: "Cost"
                        font.bold: true
                        font.pixelSize: 20
                        Layout.preferredWidth: 80
                    }
 
                    Text {
                        text: "Manufacturer"
                        font.bold: true
                        font.pixelSize: 20
                        Layout.fillWidth: true
                    }
                }
            }
        }
 
        Component {
            id: footerView
 
            Text {
                width: parent.width
                font.italic: true
                color: "blue"
                height: 30
                verticalAlignment: Text.AlignVCenter
            }
        }
 
        Component {
            id: phoneDelegate
 
            Item {
                id: wrapper
 
                width: parent.width
                height: 30
 
                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: manufacturer
                        color: wrapper.ListView.isCurrentItem ? "red" : "black";
                        font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18
                        Layout.fillWidth: true
                    }
                }
            }
        }
 
        ListView {
            id: listView
            anchors.fill: parent
            delegate: phoneDelegate
 
            model: phoneModel.createObject(listView)
            header: headerView
            footer: footerView
            focus: true
            highlight: Rectangle {
                color: "lightblue"
            }
 
            onCurrentIndexChanged: {
                if(listView.currentIndex >= 0) {
                    var data = listView.model.get(listView.currentIndex);
                    listView.footerItem.text = data.name + "," + data.cost + "," + data.manufacturer;
                } else {
                    listView.footerItem.text = "-";
                }
            }
        }
    }
}

编译结果：

 3、访问与修改Model

(1) 访问数据

ListModel的count属性表示Model中有多少条数据。

ListModel的get()方法接受一个int类型的参数，用来获取指定索引位置的数据返回一个QML对象。

然后，我们就可以像访问属性那样访问数据的role。

eq:
 
var data = listView.model.get(listView.currentIndex);
console.log(data.name + "," + data.cost + "," + data.manufacturer);
(2) 删除数据

ListModel的remove(int index, int count)方法，删除一条或多条数据。

eq:
 
MouseArea {
    anchors.fill: parent
    onClicked: {
        wrapper.ListView.view.currentIndex = index;
    }
 
    onDoubleClicked: {
        wrapper.ListView.view.model.remove(index);
    }
}
(3) 修改数据

修改数据使用的是ListModel的setProperty(int index, string property, variant value)方法。

比如：修改价格
listView.model.setProperty(5, "cost", 16999)
(4) 添加数据

添加数据使用的是append()方法。

eq:
listView.model.append (
    {
        "name" : "mx3"
        "cost" : "1978"
        "manufacturer" : "Meizu"
    }
)

三、完整代码

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
 
import MyObj 1.0
 
 
Window {
    id: window
    visible: true
    width: 600
    height: 480
    title: qsTr("Hello World")
 
    Rectangle {
        width: 360
        height: 300
        color: "#EEEEEE"
 
        Component {
            id: phoneModel
 
            ListModel {
                ListElement {
                    name: "iPhone 3"
                    cost: "1000"
                    manufacturer: "Apple"
                }
                ListElement {
                    name: "iPhone 4"
                    cost: "2000"
                    manufacturer: "Apple"
                }
                ListElement {
                    name: "iPhone 5"
                    cost: "3000"
                    manufacturer: "Apple"
                }
                ListElement {
                    name: "iPhone 6"
                    cost: "4000"
                    manufacturer: "Apple"
                }
            }
        }
 
        Component {
            id: headerView
 
            Item {
                width: parent.width
                height: 30
 
                RowLayout {
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 8
 
                    Text {
                        text: "Name"
                        font.bold: true
                        font.pixelSize: 20
                        Layout.preferredWidth: 120
                    }
 
                    Text {
                        text: "Cost"
                        font.bold: true
                        font.pixelSize: 20
                        Layout.preferredWidth: 80
                    }
 
                    Text {
                        text: "Manufacturer"
                        font.bold: true
                        font.pixelSize: 20
                        Layout.fillWidth: true
                    }
                }
            }
        }
 
        Component {
            id: footerView
 
            Item {
                id: footerRootItem
 
                width: parent.width
                height: 30
                property alias text: txt.text
                signal clean()
                signal add()
 
                Text {
                    anchors.left: parent.left
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    id: txt
                    font.italic: true
                    color: "blue"
                    verticalAlignment: Text.AlignVCenter
                }
 
                Button {
                    id: clearAll
 
                    anchors.right: parent.right
                    anchors.verticalCenter: parent.verticalCenter
                    text: "Clear"
                    onClicked: footerRootItem.clean();
                }
 
                Button {
                    id: addOne
 
                    anchors.right: clearAll.left
                    anchors.rightMargin: 4
                    anchors.verticalCenter: parent.verticalCenter
                    text: "Add"
                    onClicked: footerRootItem.add()
                }
            }
        }
 
        Component {
            id: phoneDelegate
 
            Item {
                id: wrapper
 
                width: parent.width
                height: 30
 
                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: manufacturer
                        color: wrapper.ListView.isCurrentItem ? "red" : "black";
                        font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18
                        Layout.fillWidth: true
                    }
                }
            }
        }
 
        ListView {
            id: listView
            anchors.fill: parent
            delegate: phoneDelegate
 
            model: phoneModel.createObject(listView)
            header: headerView
            footer: footerView
            focus: true
            highlight: Rectangle {
                color: "lightblue"
            }
 
            onCurrentIndexChanged: {
                if(listView.currentIndex >= 0) {
                    var data = listView.model.get(listView.currentIndex);
                    listView.footerItem.text = data.name + "," + data.cost + "," + data.manufacturer;
                } else {
                    listView.footerItem.text = "-";
                }
            }
 
            function addOne() {
                model.append(
                            {
                                "name" : "MX3",
                                "cost": "1233",
                                "manufacturer": "Meizu"
                            });
            }
 
            Component.onCompleted: {
                listView.footerItem.clean.connect(listView.model.clear);
                listView.footerItem.add.connect(listView.addOne);
            }
        }
    }
}

编译结果：

去往火星
关注
  • 22
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QML中LIstView的几种数据模型
07-01
主要涉及在qml中ListView显示，使用了ListModel、ObjectModel、QStringList、QList、QAbstractListModel作为数据模型，其中使用ObjectModel能省去delegate.
qml ListView结合cpp的model使用
03-30
这篇博客文章“qml ListView结合cpp的model使用”深入探讨了如何将QML的ListView与C++的模型（model）相结合，以实现更高效、更灵活的数据绑定和操作。 首先，QML的ListView组件主要包含以下关键属性： 1. **model...
【QML Model-View】ListView-简单使用（一）
m0_60259116的博客
03-04 939
【QML Model-View】ListView-简单使用（一）
QML数据模型(Model)
热门推荐
henreash的专栏
09-24 3万+
QML数据模型(Model) QML中的ListView,GridView和Repeater等元素需要数据模型来提供要显示的数据.这些元素需要一个为模型中的每一项数据生成一个实例的代理组件(delegate component).模型可以是静态的,也可对其动态修改,插入,删除,移动. 给代理提供的数据通过叫做角色的数据绑定到代理.下面的ListModel有两个角色,type和age,ListV
qml - 修改listmodel的字段值，需特别注意的细节
2401_83709388的博客
06-24 223
qml----listmodel----1.get方法更适合读取数据，不适合用来写值。 估计它返回的只是数据对象，缺少数据变化了的信号。因此不能自动更新与之绑定的值。 2. setproperty方法专门用来写入字段值。最安全的model写入方法 3.委托组件内用 requried 定义的变量，不能算作直接引用了外部变量，彼此是绑定关系 因此用来读值可以，不能用来给model赋值
QML视图（ListView）
qq_45303986的博客
03-12 2895
如果模型不是按部分排序的，则创建的部分可能不是唯一的;不同部分之间的每个边界都将导致创建部分标题，即使该部分存在于其他地方也是如此。保存过渡以应用于视图中由于视图模型中的移动操作而移动的项。保存转换以应用于视图中因删除视图中的其他项而替换的项。保存转换以应用于视图中因添加视图中的其他项而替换的项。保存过渡以应用于视图模型中的移动操作所取代的项。当前的部分：保存当前位于视图开头的部分。保存从突出显示组件创建的突出显示项。保存要应用于从视图中删除的项的过渡。保存要应用于从视图中添加的项的过渡。
QML ListView
baidu_41388533的博客
05-30 534
QML ListView 参考视频：https://www.bilibili.com/video/BV1Ay4y1W7xd 参考：ItemDelegate QML Type import QtQuick 2.14 import QtQuick.Window 2.14 import QtQuick.Controls 2.5 import QtQuick.Controls 1.4 as Ctr_1_4 import QtQuick.Layouts 1.15 import "./common.js" as
QML之ListView
qq_33271629的博客
03-21 521
最近在写一个网络测试小工具，需要用到ListView来显示收到和发送的网络消息，需要能显示消息收到的时间，消息的发送方，还有消息内容，为了防止占用内存过多，要能设置界面上最多显示的消息数量，超过后自动删除最早的消息。感觉主要难点还是这么多窗口的颜色配置，颜色不合适界面就很丑。
QML中ListView使用cpp的Model（csdn）————程序.pdf
12-03
第五步：在 QML 中使用 C++ Model 在 QML 文件中，首先需要导入对应的 C++ 模块，并声明一个对应的对象。接着，将这个对象赋值给 `ListView` 的 `model` 属性。同时，可以通过 `onDataChanged` 信号处理数据变化。 ...
QmlListView控件位置定位的几个方法
12-28
ListView控件有两大要素比较重要，一是model数据，二是delegate实例。用得好这两个基本上对这一控件没什么问题了，一开始笔者也是这样想的，可是学习不同于产品的开发，客户总是有这样那样的要求要去实现。你却有不...
Qt qml的ListView等视图控件Models(QAbstractItemModel)的使用
03-19
Qt官方文档解析到提供支持类型QStringList, a QVariantList, a QObjectList or a QAbstractItemModel. 其中QAbstractItemModel提供复杂的数据模型． ​该例程是QAbstractItemModel与qml结合是怎么使用．
Qt qml中listview 列表视图控件（下拉刷新、上拉分页、滚动轴）
01-04
Qt qml listview下拉刷新和上拉分页主要根据contentY来判断。但要加上顶部下拉指示器、滚动条，并封装成可简单调用的组件，着实花了我不少精力：） 先给大家展示下效果图： 【功能】 下拉刷新和上拉分页逻辑 /下拉刷新 /上拉更多 /滚动栏 /工具栏半拉显隐 Author: surfsky.cnblogs.com Lisence: MIT 请保留此文档声明 History: init. surfsky.cnblogs.com, 2015-01 add initPosition property. 2015-01 【调用】 控件使用非常简单，只要实现 onLoad 和 onL
QML ListView实现树形二级列表（类似 android ExpandableListView控件）
08-11
QML 中没有直接提供类似 android 的ExpandableListView二级列表控件，treeView，但是用 treeView 实在是有些不方便，并且达不到想要的效果，所以干脆用 ListView 来扩展一个。
QML--ListView委托添加不同的样式
06-09
在QML中，ListView是一种非常重要的组件，用于展示一系列数据项。它允许开发者通过自定义委托（Delegate）来实现各种复杂的数据展示效果。本篇将深入讲解如何在ListView中利用Loader组件来添加不同的样式，以实现在...
qml 实现一个listview
最新发布
foxgod的专栏
07-18 578
通过qml实现listview的主要功能，菜单，滚动条，拖动改变内容等
qml中orientation: ListView.Horizontal 是什么意思
05-30
在 QML 中，ListView 是一种用于显示列表的常用控件。orientation 属性用于指定 ListView 的滚动方向，可以设置为水平方向（ListView.Horizontal）或垂直方向（ListView.Vertical）。 当 orientation 设置为 ListView.Horizontal 时，ListView 将会横向滚动，而数据项也会水平排列。可以通过设置 delegate 的宽度和高度来控制每个数据项的大小和布局。同时，也可以使用 spacing 属性来控制数据项之间的间距。 下面是一个简单的 ListView 示例，展示了如何使用 orientation 属性来创建一个水平滚动的列表： ``` ListView { orientation: ListView.Horizontal model: ["Item 1", "Item 2", "Item 3", "Item 4"] delegate: Rectangle { width: 100 height: 50 color: "lightblue" border.color: "black" border.width: 2 Text { text: modelData anchors.centerIn: parent } } } ``` 这个示例中，ListView 的 orientation 属性被设置为 ListView.Horizontal，同时使用了一个简单的矩形作为 delegate，用于显示每个数据项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值