QML中ListView的几种数据模型

最新推荐文章于 2024-06-12 11:08:01 发布
最新推荐文章于 2024-06-12 11:08:01 发布
阅读量1k 收藏 4
点赞数
分类专栏： QML学习之路

原文的博客写得比较清楚，可惜代码的排版有点不敢恭维，自己进行了缩进。
原文地址：https://blog.csdn.net/qq_35173114/article/details/80873842
在QML中，经常会用到ListView控件，我们主要用到MVC模式，下面介绍几种常用数据模型,其中包括QML和C++模型

方式一：ListModel:

ListModel是一个简单的ListElement容器，每个容器都包含数据角色。其中内容可以动态定义，也可以在QML中显式定义。

ListModel {
    id: m_model
    ListElement {
        name: "Bill Smith"
        number: "555 3264"
        color1: "red"
    }
    ListElement {
        name: "John Brown"
        number: "555 8426"
        color1: "green"
    }
    ListElement {
        name: "Sam Wise"
        number: "555 0473"
        color1: "blue"
    }
}

 ListView {
	width: 100
	height: 100
	model: m_model
	delegate: Text{
	    color: color1
	    text: name+":"+number
	}
}

这样就指定了刚才的model，运行效果：
在这里插入图片描述

方式二：ObjectModel

当ObjectModel被用于视图的时候，视图不再需要委托，因为对象模型已经包含了可视化的委托(项)

ObjectModel {
    id: itemModel
    Rectangle {
        height: 20; width: 80;
        Text {
            color: "red"
            text: "Bill Smith" + ":" + "555 3264"
        }
    }
    Rectangle {
        height: 20; width: 80;
        Text{
            color: "green"
            text: "John Brown" + ":" + "555 8426"
        }
    }
    Rectangle {
        height: 20; width: 80;
        Text {
            color: "blue"
            text: "Sam Wise"+":" + "555 0473"
        }
    }
}

选择该数据模型：

ListView{
    width: 100
    height: 100
    model: itemModel
}

运行效果：
在这里插入图片描述

方式三：C++中的QStringList作为数据模型

在main.cpp中

QStringList a;
a << "Bill Smith" << "John Brown" << "Sam Wise";            //QStringList model
QQmlApplicationEngine engine;
engine.rootContext()->setContextProperty("name1", QVariant::fromValue(a));

在qml文件中：

ListView{
    width: 100
    height: 100
    model: name1
    delegate: Text{
        text: modelData
    }
}

运行效果：
在这里插入图片描述

方式四：C++中QList作为数据源

在main.cpp中：
自定义头文件：dataobject.h

#ifndef DATAOBJECT_H
#define DATAOBJECT_H

#include <QObject>

class DataObject : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)
    Q_PROPERTY(QString color READ color WRITE setColor NOTIFY colorChanged)
    Q_PROPERTY(QString number READ number WRITE setNumber NOTIFY numberChanged)
public:
    DataObject(QObject *parent = nullptr);
    DataObject(const QString &name,const QString &color,const QString &number,QObject *parent=nullptr);
    QString name()const;
    void setName(const QString &name);
    QString color()const;
    void  setColor(const QString &color);
    QString number()const;
    void setNumber(const QString &number);

signals:
    void nameChanged();
    void colorChanged();
    void numberChanged();
private:
    QString m_name;
    QString m_color;
    QString m_number;
};

#endif // DATAOBJECT_H

源文件：

#include "dataobject.h"

DataObject::DataObject(QObject *parent) : QObject(parent)
{
}

DataObject::DataObject(const QString &name, const QString &color, const QString &number, QObject *parent)
    :QObject(parent),m_name(name),m_color(color),m_number(number)
{
}

QString DataObject::name() const
{
    return m_name;
}

void DataObject::setName(const QString &name)
{
    if(name!=m_name)
        m_name=name;
    emit nameChanged();
}

QString DataObject::color() const
{
    return m_color;
}

void DataObject::setColor(const QString &color)
{
    if(color!=m_color)
        m_color=color;
    emit colorChanged();
}

QString DataObject::number() const
{
    return m_number;
}

void DataObject::setNumber(const QString &number)
{
    if(number!=m_number)
        m_number=number;
    emit numberChanged();
}

在main.cpp中

QList<QObject*> dataList;                                    //QObject model
dataList << new DataObject("Bill Smith","red","555 3264") << new DataObject("John Brown","green","555 8426")
         << new DataObject("Sam Wise","blue","555 0473");
QQmlApplicationEngine engine;  //之前有定义的，这里就不用重复定义了
engine.rootContext()->setContextProperty("myObjectModel", QVariant::fromValue(dataList));

qml文件中：

ListView{
    width: 100
    height: 100
    model: myObjectModel
    delegate: Text{
    color: model.modelData.color
    text: name+":"+number}
}

运行效果：
在这里插入图片描述

方式五：自定义类AbstractListModel

自定义头文件abstractlistmodel.h

#ifndef ABSTRACTLISTMODEL_H
#define ABSTRACTLISTMODEL_H
#include <QAbstractListModel>
#include<QStringList>
class  AbstractList   //抽象数据列表类
{
   public:
    AbstractList(const QString &name,const QString &color,const QString &number);
    QString name() const;
    QString color() const;
    QString number() const;
private:
    QString m_name;
    QString m_color;
    QString m_number;

};
class AbstractListModel : public  QAbstractListModel
{
    Q_OBJECT
public:
    enum AbstractListRoles{
         NameRole=Qt::UserRole+1,
        ColorRole,
        NumberRole
    };                               //定义抽象类成员角色
    AbstractListModel(QObject *parent=nullptr);
    void addList(const AbstractList &list);
    int rowCount(const QModelIndex &parent=QModelIndex()) const;  //返回给定父项行数
    QVariant data(const QModelIndex &index, int role=Qt::DisplayRole) const;//返回索引所在项给定角色的存储数据
protected:
    QHash<int,QByteArray> roleNames() const;  //返回模型的角色名
private:
    QList<AbstractList> m_abstractList;     //抽象列表类容器
};

#endif // ABSTRACTLISTMODEL_H

源文件：

#include "abstractlistmodel.h"
AbstractListModel::AbstractListModel(QObject *parent)
    :QAbstractListModel(parent)
{
}

void AbstractListModel::addList(const AbstractList &list)
{
    beginInsertRows(QModelIndex(),rowCount(),rowCount());
    m_abstractList.append(list);
//    m_abstractList<<list;
    endInsertRows();
}

int AbstractListModel::rowCount(const QModelIndex &parent) const
{
    Q_UNUSED(parent);
    return m_abstractList.count();
}

QVariant AbstractListModel::data(const QModelIndex &index, int role) const
{
  if(index.row()<0||index.row()>=m_abstractList.count())
      return QVariant();
  const AbstractList &abstractList=m_abstractList[index.row()];
  if(role==AbstractListRoles::NameRole)
      return abstractList.name();
  else if(role==AbstractListRoles::ColorRole)
      return abstractList.color();
  else if(role==AbstractListRoles::NumberRole)
          return abstractList.number();
  return QVariant();
}

QHash<int, QByteArray> AbstractListModel::roleNames() const
{
    QHash<int,QByteArray> roles;
    //use operator[]
//    roles[AbstractListRoles::NameRole]="name";            //定义对应角色值
//    roles[AbstractListRoles::ColorRole]="color1";
//    roles[AbstractListRoles::NumberRole]="number";
    //use insert
    roles.insert(AbstractListRoles::NameRole,"name");
    roles.insert(AbstractListRoles::ColorRole,"color1");
    roles.insert(AbstractListRoles::NumberRole,"number");
    return roles;
}

AbstractList::AbstractList(const QString &name, const QString &color, const QString &number)
    :m_name(name),m_color(color),m_number(number)
{

}

QString AbstractList::name() const
{
    return m_name;
}

QString AbstractList::color() const
{
    return m_color;
}

QString AbstractList::number() const
{
    return m_number;
}

main.cpp中

AbstractListModel listmodel;
listmodel.addList(AbstractList("Bill Smith","red","555 3264"));
listmodel.addList(AbstractList("John Brown","green","555 8426"));
listmodel.addList(AbstractList("Sam Wise","blue","555 0473"));
QQmlApplicationEngine engine;
engine.rootContext()->setContextProperty("myModel", &listmodel);

qml文件中：

ListView{
    width: 100
    height: 100
    model: myModel
    delegate: Text {
        color: color1
        text: name+":"+number}
    }
}

运行效果：
在这里插入图片描述
main.qml文件的所有代码：

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQml.Models 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ListModel {
        id: m_model
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
            color1: "red"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
            color1: "green"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
            color1: "blue"
        }
    }

    ObjectModel {
        id: itemModel
        Rectangle {
            height: 20; width: 80;
            Text {
                color: "red"
                text: "Bill Smith" + ":" + "555 3264"
            }
        }
        Rectangle {
            height: 20; width: 80;
            Text{
                color: "green"
                text: "John Brown" + ":" + "555 8426"
            }
        }
        Rectangle {
            height: 20; width: 80;
            Text {
                color: "blue"
                text: "Sam Wise"+":" + "555 0473"
            }
        }
    }

    Column{
    spacing: 10

    ListView{
        width: 100
        height: 100
        model: m_model
        delegate: Text{
            color: color1
            text: name+":"+number
        }
    }

    ListView{
        width: 100
        height: 100
        model: itemModel
    }

    ListView{
        width: 100
        height: 100
        model: name1
        delegate: Text{
            text: modelData
        }
    }

    ListView{
        width: 100
        height: 100
        model: myObjectModel
        delegate: Text{
        color: model.modelData.color
        text: name+":"+number}
    }

    ListView{
        width: 100
        height: 100
        model: myModel
        delegate: Text {
            color: color1
            text: name+":"+number}
        }
    }
}

main.cpp文件：

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include<QQmlContext>
#include"dataobject.h"
#include"abstractlistmodel.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QStringList a;
    a << "Bill Smith" << "John Brown" << "Sam Wise";            //QStringList model

    QList<QObject*> dataList;                                    //QObject model
    dataList << new DataObject("Bill Smith","red","555 3264") << new DataObject("John Brown","green","555 8426")
             << new DataObject("Sam Wise","blue","555 0473");

    AbstractListModel listmodel;
    listmodel.addList(AbstractList("Bill Smith","red","555 3264"));
    listmodel.addList(AbstractList("John Brown","green","555 8426"));
    listmodel.addList(AbstractList("Sam Wise","blue","555 0473"));

    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("name1", QVariant::fromValue(a));
    engine.rootContext()->setContextProperty("myObjectModel", QVariant::fromValue(dataList));
    engine.rootContext()->setContextProperty("myModel", &listmodel);

    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

原文地址：https://blog.csdn.net/qq_35173114/article/details/80873842

hp_cpp
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QML中LIstView的几种数据模型
07-01
主要涉及在qml中ListView显示，使用了ListModel、ObjectModel、QStringList、QList、QAbstractListModel作为数据模型，其中使用ObjectModel能省去delegate.
Qt Qml ListView上拉加载数据 Demo源码
09-03
6. **加载新数据**: 在触发加载事件后，执行异步操作（如网络请求）来获取新的数据，然后将这些数据添加到模型中。确保在数据加载过程中禁用上拉加载功能，防止用户连续触发加载。 7. **更新页脚状态**: 当新数据...
Qml控件ListView中model数据类型
quietbxj的博客
09-04 1822
Qml控件-ListView中model支持的数据类型： ListModel{} new Array 以上两种类型的数据都支持，但由于类型的CRUD方法不一样，不能混用。否则会造成显示逻辑的bug。
QML学习十五：ListView的简单使用（内建Model）
最新发布
qq_35662333的博客
06-12 586
转载。
QML视图（ListView）
qq_45303986的博客
03-12 2830
如果模型不是按部分排序的，则创建的部分可能不是唯一的;不同部分之间的每个边界都将导致创建部分标题，即使该部分存在于其他地方也是如此。保存过渡以应用于视图中由于视图模型中的移动操作而移动的项。保存转换以应用于视图中因删除视图中的其他项而替换的项。保存转换以应用于视图中因添加视图中的其他项而替换的项。保存过渡以应用于视图模型中的移动操作所取代的项。当前的部分：保存当前位于视图开头的部分。保存从突出显示组件创建的突出显示项。保存要应用于从视图中删除的项的过渡。保存要应用于从视图中添加的项的过渡。
QML之ListView列表视图
Luck-Dream的博客
06-13 8139
Rectangle{ x:20 y:20 height: 50 width: 50 radius: 5 color: mous.pressed ? "red" :"gray" Text { anchors.centerIn: parent
QML实现树形组件
03-29
`TreeView`是QML中的一个标准元素，用于显示数据模型的层次结构。然而，在某些情况下，`TreeView`的默认行为和样式可能不足以满足复杂的应用场景，这促使开发者寻找替代方案或对其进行扩展。 要实现自定义的树形...
Qml写的文件浏览器
11-20
ListModel可以绑定到视图组件（如ListView），这样视图就能根据模型中的数据自动更新。在文件浏览器应用中，ListModel可以存储目录路径、文件名等信息。 4. **Delegate**：Delegate在QML中是视图项的模板，定义了...
qml-TreeView拖拽-移动item到其他item
02-17
在Qt Quick QML中，`TreeView`是一种强大的组件，用于展示和操作结构化的数据。本文将深入探讨如何在`TreeView`中实现拖放功能，即移动一个Item到另一个Item的位置，这对于构建用户交互丰富的数据管理界面非常有用。...
QML 模型（ListModel）
qq_45303986的博客
03-10 3814
LIstModel（列表模型）ListModel 是ListElement定义的简单容器，每个定义都包含数据角色。内容可以在 QML 中动态定义或显式定义。索引处的索引字典n从一个移动到索引索引处的。
QML ListView
11-05
QML python qt quick1.0
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
ListView中使用自定义列表项数据模型
03-14 611
大多数时候我们使用ArrayAdapt时都是使用ArrayAdapt arrayAdapt 但是在我们实际开发时为了满足各种不同的需求，我们就需要为适配器自定义一个数据类型 例如新建一个java类，用作自定义的数据类型 package com.example.kanzaki.learnarraylist; /** * Created by Kanzaki on 2016/3/7.
QML数据模型(Model)
热门推荐
henreash的专栏
09-24 3万+
QML数据模型(Model) QML中的ListView,GridView和Repeater等元素需要数据模型来提供要显示的数据.这些元素需要一个为模型中的每一项数据生成一个实例的代理组件(delegate component).模型可以是静态的,也可对其动态修改,插入,删除,移动. 给代理提供的数据通过叫做角色的数据绑定到代理.下面的ListModel有两个角色,type和age,ListV
QML ListView列表
yu_20501253的博客
10-10 691
import QtQuick 2.0 import QtQuick.Controls 1.4 import io.qt.DataBaseModel 1.0 import QtQuick.Controls.Styles 1.4 Rectangle { id:root property real sqlClawLeftRight: 0.0 property real sqlClawOpenClose: 5.8 property real sqlWristClawRota: 0.
QML之ListView
qq_33271629的博客
03-21 510
最近在写一个网络测试小工具，需要用到ListView来显示收到和发送的网络消息，需要能显示消息收到的时间，消息的发送方，还有消息内容，为了防止占用内存过多，要能设置界面上最多显示的消息数量，超过后自动删除最早的消息。感觉主要难点还是这么多窗口的颜色配置，颜色不合适界面就很丑。
qml中listview的几种数据模型
09-08
以下是几种常见的ListView数据模型： 1. ListModel模型：这是最常用的数据模型之一，它允许我们通过添加项目来动态修改和管理数据。可以通过在ListView外部创建一个ListModel对象，并将该对象作为ListView的model...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值