Qt 示例学习--1. 1 qml实现list

Qt示例：QML实现List

最新推荐文章于 2025-10-01 13:11:04 发布

原创

最新推荐文章于 2025-10-01 13:11:04 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#qt

本文是Qt Quick Application的学习笔记，重点是使用QML实现一个列表视图。作者从新建项目开始，详细介绍了如何在main.qml中设置ListView、ListModel和自定义Delegate，并添加图片资源。通过Delegate，作者发现其在控制列表内容展示上比C++更便捷。文章末尾展示了最终的效果图。

开头

之前学习了Qt的第一个示例，其中使用到了quick，基本理解思路，但并不是很理解qml的使用，遂仿照例子自己写了个list

实作

新建Qt Quick Application
实作main.qml(并添加图片资源，图片均添加的是Qt例子中的图片)
分析main.qml：

import QtQuick 2.3
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.2

Window {
    visible: true
    width: 400
    height: 640

    ListModel {
        id: listModel
    }

    MouseArea {
        anchors