QT listview 加入元素

### 如何在 Qt 中向 ListView 添加元素

为了实现向 `ListView` 动态添加项目，在Qt框架下通常会涉及到模型/视图设计模式的应用。具体来说，可以创建一个继承自 `QAbstractListModel` 的类来作为数据源，并通过修改该模型的数据结构从而影响到 `ListView` 显示的内容。

下面是一个简单的例子展示如何定义自己的列表项模型并将其绑定给 QML中的 `ListView` 控件：

#### 定义 C++ 模型类
首先需要编写C++代码部分，用于构建和管理要显示的数据集合。这里假设已经有一个名为 `MyViewModel` 的类实现了必要的接口方法以便于与QML交互[^3]。

// MyViewModel.h 文件内容省略...

class MyViewModel : public QAbstractListModel {
    Q_OBJECT
    
public:
    enum Roles {
        NameRole = Qt::UserRole + 1,
        ValueRole
    };

    explicit MyViewModel(QObject *parent = nullptr);

    int rowCount(const QModelIndex & parent = QModelIndex()) const override;
    QVariant data(const QModelIndex & index, int role = Qt::DisplayRole) const override;

signals:
    void countChanged();

private slots:
    void addItem(QString name, QString value);
};

接着实现在 `.cpp` 文件里的成员函数逻辑，其中最重要的是重载虚函数 `rowCount()` 和 `data()`, 同时提供公共槽函数 `addItem()` 来允许外部调用者往内部容器里追加新条目:

int MyViewModel::rowCount(const QModelIndex&) const{
    return m_items.size();
}

QVariant MyViewModel::data(const QModelIndex& index, int role) const {
    if (!index.isValid())
        return QVariant();

    switch (role){
        case NameRole: return m_items.at(index.row()).name;
        case ValueRole:return m_items.at(index.row()).value;
        default:       return QVariant();
    }
}
void MyViewModel::addItem(QString name, QString value){
    beginInsertRows(QModelIndex(), rowCount(), rowCount());
    Item newItem{name,value}; // 假设Item是包含两个QString属性(name/value)的struct或class.
    m_items.append(newItem);
    endInsertRows();
    
    emit countChanged(); // 发射信号通知界面更新
}

最后一步是在应用程序入口处实例化此对象并将它注册为上下文属性传递给QML引擎处理:

auto vm = new MyViewModel();
QQmlApplicationEngine engine;
engine.rootContext()->setContextProperty("myModel", vm);

#### 修改 QML 页面布局文件
接下来调整对应的`.qml`页面描述文档，确保能够正确渲染来自上述C++端提供的信息流。对于本案例而言，只需简单配置好目标组件即可完成整个流程设置工作：

import QtQuick 2.0
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 640;height: 480

    ListModel{id:listData}// 这个是用来接收c++传过来的数据模型

    Component.onCompleted:{
        myModel.countChanged.connect(function(){
            console.log('model changed');
            listData.clear()
            for(var i=0;i<myModel.count;++i){
                var item=myModel.get(i)
                listData.append({"text":item.name})
            }
        })
    }

    Column{
        anchors.fill: parent
        
        Button{text:"Add"; onClicked:{myModel.addItem("New Entry","Some Data")}}
        
        ListView{
            model:listData
            delegate:Text{ text:model.text }
        }
    }
}

以上就是完整的解决方案说明以及相应操作指南。值得注意的地方在于每当有新的记录被加入至底层存储器之后都需要同步刷新前端UI界面上所呈现出来的效果；此外还应该考虑异常情况下的错误提示机制等问题以提高用户体验度。