前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Qml自定义ListModel(视频)

Qml自定义ListModel(视频)

作者头像
Qt君
发布2023-03-17 14:54:44
5420
发布2023-03-17 14:54:44
举报
文章被收录于专栏:跟Qt君学编程跟Qt君学编程

❝创建C++的列表模型,并注册到Qml中使用。❞

1. 自定义ListModel

  MyListModel继承于QAbstractListModel。

代码语言:javascript
复制
/* 创建一个列表模型 */
class MyListModel : public QAbstractListModel
{
    Q_OBJECT
public:
    MyListModel()
    {
        m_stringList = QStringList{"1", "2", "3"};
    }

    int rowCount(const QModelIndex &parent) const
    {
        return m_stringList.count();
    }

    QVariant data(const QModelIndex &index, int role) const
    {
        return m_stringList.at(index.row());
    }

    bool setData(const QModelIndex &index, const QVariant &value, int role)
    {
        m_stringList[index.row()] = value.toString();

        emit dataChanged(index, index);
        return true;
    }

    /* 创建数据访问的别名。(可用于Qml使用) */
    QHash<int, QByteArray> roleNames() const
    {
        QHash<int, QByteArray> roles;
        roles[Qt::UserRole] = "modelData";
        return roles;
    }

private:
    QStringList m_stringList;
};

2. 注册到Qml中

代码语言:javascript
复制
/* 注册Qml类型 */
qmlRegisterType<MyListModel>("MyListModel", 1, 0, "MyListModel");

3. 使用

  声明MyListModel到Qml中,并创建其实例MyListModel { id: myListModel }。ListView的代理(delegate)通过设置modelData改变其myListModel对象的QStringList内容。

代码语言:javascript
复制
import MyListModel 1.0
...
ListView {
    id: listView
    anchors.fill: parent
    model: MyListModel { id: myListModel }
    delegate: Rectangle {
        width: 300
        height: 100

        Row {
            Text {
                anchors.verticalCenter: parent.verticalCenter
                width: 200
                text: modelData
            }

            Rectangle {
                width: 50
                height: 50
                color: mouseArea.pressed ? "lightgray" : "lightblue"

                Text {
                    anchors.centerIn: parent
                    /* 改变数据(随机数) */
                    text: "改变"
                }

                MouseArea {
                    id: mouseArea
                    anchors.fill: parent
                    onClicked: {
                        modelData = Math.random()
                    }
                }
            }
        }
    }
}
...
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-01-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Qt君 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 自定义ListModel
  • 2. 注册到Qml中
  • 3. 使用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档