qml中ListView从cpp中将QStringList数据展示出来

本文详细描述了使用C++编写的DataModel类与前端QML中的ComboBox和ListModel进行交互的过程,涉及QStringList数据的设置、选择事件的处理以及前后端数据同步。
摘要由CSDN通过智能技术生成

后端cpp部分

直接上代码:

cpp文件:

#include "data_base.h"
#include <QDebug>

DataModel::DataModel(QObject *parent): QObject(parent)
{
    stringList_ << "Item data1" << "Item data2" << "Item data3";
    selectString_ = stringList_[1];
}

QStringList DataModel::stringList() const
{
    return stringList_;
}

void DataModel::setStringList(const QStringList &list)
{
    if (stringList_ == list) {
        return;
    }
    stringList_ = list;
    emit stringListChanged();
}

QString DataModel::SelectString() const
{
    return selectString_;
}

void DataModel::SetSelectString(const QString string)
{
    qDebug() << " cpp : change data str is: " << string;
    selectString_ = string;
    qDebug() << " cpp : selectString_ is : " << selectString_;
    emit SelectStringChange();
}

头文件

#ifndef DATA_BASE_H
#define DATA_BASE_H

#include "data_base.h"
#include <QObject>
#include <QStringList>

class DataModel : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QStringList stringList READ stringList WRITE setStringList NOTIFY stringListChanged)
    Q_PROPERTY(QString selectString READ SelectString WRITE SetSelectString NOTIFY SelectStringChange)

public:
    explicit DataModel(QObject *parent = nullptr);
    QStringList stringList() const ;
    void setStringList(const QStringList &list);
    QString SelectString() const;
    void SetSelectString(const QString string);

signals:
    void stringListChanged();
    void SelectStringChange();

private:
    QStringList stringList_;
    QList< QStringList > list_;
    QString selectString_;
};
#endif // DATA_BASE_H

前端qml界面

qml文件:

import QtQuick
import QtQuick.Controls
import MyApp 1.0
//  创建一个包含多个字符串的 JavaScript 数组,并将其暴露给 QML
ComboBox {
    editable: true
    textRole: "text"
    displayText: currentText + "  >>> " + currentIndex
    // model: [
    //     { value: Qt.NoModifier, text: qsTr("No modifier") },
    //     { value: Qt.ShiftModifier, text: qsTr("Shift") },
    //     { value: Qt.ControlModifier, text: qsTr("Control") }
    // ]

    //------------------显示Model方式1-----------------------------------------
    // model: ListModel {
    //     id: model
    //     ListElement { text: "Banana" }
    //     ListElement { text: "Apple" }
    //     ListElement { text: "Coconut" }
    // }

    // ------------------显示Model方式2---------------------------
    // 导入模块
    DataModel {
        id: dataModel
    }
    model:ListModel {
        id: listModel
    }
    // 将 QStringList 数据写入 ListModel 中
    Component.onCompleted: {
        for (var i = 0; i < dataModel.stringList.length; ++i) {
            listModel.append({ "text": qsTr(dataModel.stringList[i])})
        }
        currentIndex = indexOfValue(dataModel.selectString)     // 找到数据对应的值
    }

    // 存在可能重复选中的情况
    onAccepted: {
        if (find(editText) === -1) {
            // model.append({text: editText})
        } else {
            // 选中一个数据后,下发到后端
            dataModel.selectString = currentValue
        }
        console.log(" editText data is ", editText);
    }
    onCurrentIndexChanged: {
        // 选中一个数据后,下发到后端
        // currentValue 是上一个选中数据的data
        dataModel.selectString = dataModel.stringList[currentIndex]
        console.log(currentValue + " index is:" + currentIndex, " data is:", currentValue)
    }
}

前端和后端的连接:

从main中导入数据,模块导入

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
QMLListView是一种非常常用的QML组件,用于以列表形式展示数据ListView可以使用不同的数据模型来提供数据,从而实现灵活的数据展示和交互。 以下是几种常见的ListView数据模型: 1. ListModel模型:这是最常用的数据模型之一,它允许我们通过添加项目来动态修改和管理数据。可以通过在ListView外部创建一个ListModel对象,并将该对象作为ListView的model属性来实现。ListModel对象的每个项目都可以通过属性定义。可以使用JavaScript的API来操作ListModel的项目,如添加、删除、移动等。 2. ArrayDataModel模型:这种数据模型适用于静态数据。在QML,我们可以使用JavaScript数组来初始化数据,并将该数组作为ListView的model属性值。此模型基于JavaScript数组,并且不允许对数据进行修改。如果需要对数据进行更改,需要先将数组数据复制到一个新的数组,然后将新数组作为model。 3. XmlListModel模型:这个模型是XML数据源的绑定模型。它可以从远程或本地XML文件提取数据,并在ListView展示。可以在XmlListModel指定XML文件的路径,然后使用XmlRole来定义需要展示数据。XmlListModel可以通过一系列XPath表达式来过滤和排序数据。 4. SqlListModel模型:这个模型是用于绑定SQL数据库的数据模型。可以通过指定SQL查询语句来从数据获取数据,并在ListView展示。可以使用roleNames属性来定义在ListView展示哪些数据。SqlListModel还具有数据过滤和排序功能。 总的来说,QMLListView可以使用多种数据模型来展示不同类型的数据。无论是动态数据还是静态数据,XML数据源还是SQL数据库,都可以通过适当选择数据模型来满足个性化的需求。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值