Qt P5

QML ListView 列表组件完整学习笔记（逐行精讲+可直接发布）

这是专门为你整理的 ListView 核心用法笔记 ，包含数字列表 + 自定义数据模型列表 两段代码的逐行详细解释，结构清晰、适合学习、发布博客/笔记都能用。

---

一、完整代码（带精简注释）

先把你提供的两段 ListView 代码整理成干净可运行版本：

// ======================
// 第一段：简单数字列表（model = 固定数字）
// ======================
ListView{
    width: 100                // 列表宽度
    height: 100               // 列表高度
    anchors.centerIn: parent  // 列表在父控件中居中
    spacing: 10               // 列表项之间的间距
    model: 10                 // 数据模型：生成 0~9 共10条数据
    delegate: Label{          // 列表项（代理组件）
        text: "The number is :"+modelData  // 显示序号
        color: "#fff"                     // 文字白色
        font.pointSize: 14                // 文字大小
    }
}

// ======================
// 第二段：自定义数据模型 + 自定义列表项组件
// ======================
ListModel{                     // 自定义数据模型
    id:mymodel                  // 模型唯一ID
    ListElement{ name:"ycc"; age:24 }   // 数据项1
    ListElement{ name:"yc"; age:27 }    // 数据项2
    ListElement{ name:"yccd"; age:29 }   // 数据项3
    ListElement{ name:"ycfc"; age:28 }  // 数据项4
    ListElement{ name:"ydcc"; age:20 }  // 数据项5
}

ListView{                       // 列表组件
    width: 100                  // 宽度
    height: 100                 // 高度
    spacing: 10                 // 项间距
    anchors.centerIn:parent     // 居中
    model: mymodel              // 绑定自定义数据模型
    delegate: mylegate          // 使用自定义列表项组件
}

Component{                     // 自定义列表项（可复用组件）
    id:mylegate                 // 组件ID
    Label{                     // 列表项内容
        text: "姓名："+name+" 年龄："+age  // 显示自定义字段
        color: "#fff"                     // 白色文字
        font.pointSize: 14                // 字号
    }
}

---

二、逐段代码超详细解释（学习核心）

第一段代码：简单数字列表

作用

快速生成一个 0~9 的纯数字列表，不需要单独定义数据模型。

ListView{
    width: 100                
    height: 100               
    anchors.centerIn: parent  
    spacing: 10               
    model: 10                 
    delegate: Label{          
        text: "The number is :"+modelData
        color: "#fff"
        font.pointSize: 14
    }
}

逐行解释

1. ListView

   列表组件，专门用来显示一列可滚动的内容（文字、图片、按钮都可以）。

2. width: 100

   列表的宽度为 100 像素。

3. height: 100

   列表的高度为 100 像素。

4. anchors.centerIn: parent

   让列表在父容器里居中显示（QML 最常用布局）。

5. spacing: 10

   每个列表项之间的间隔距离为 10 像素。

6. model: 10

   模型 = 10 → 自动生成 0、1、2、3...9 共 10 条数据。

7. delegate: Label{ ... }
delegate = 列表项代理

   意思是：列表里的每一项，都用这个 Label 来显示。

8. text: "The number is :"+modelData
modelData 是固定关键字，用来获取 model:10 生成的数字（0~9）。

9. color: "#fff"

   文字颜色为白色。

10. font.pointSize: 14

    文字大小 14 号。

---

第二段代码：自定义数据模型 ListModel

作用

存储多条自定义数据（姓名、年龄、学号、头像...），非常适合实际项目。

ListModel{
    id:mymodel
    ListElement{ name:"ycc"; age:24 }
    ListElement{ name:"yc"; age:27 }
    ListElement{ name:"yccd"; age:29 }
    ListElement{ name:"ycfc"; age:28 }
    ListElement{ name:"ydcc"; age:20 }
}

逐行解释

1. ListModel

   自定义数据模型，用来存放多条结构化数据。

2. id:mymodel

   给模型起名字，方便后面 ListView 绑定使用。

3. ListElement{ ... }

   一个 ListElement = 一条数据（一行）。

4. name:"ycc"; age:24

   自定义字段：

   • name 姓名
   • age 年龄
     你可以自己加：height、phone、address 等。

---

第三段代码：绑定自定义模型的 ListView

ListView{
    width: 100
    height: 100
    spacing: 10
    anchors.centerIn:parent
    model: mymodel
    delegate: mylegate
}

逐行解释

1. model: mymodel

   把列表绑定到上面定义的自定义数据模型（显示姓名+年龄）。

2. delegate: mylegate

   列表项不再直接写 Label，而是引用外部自定义组件，方便复用。

---

第四段代码：自定义列表项组件 Component

Component{
    id:mylegate
    Label{
        text: "姓名："+name+" 年龄："+age
        color: "#fff"
        font.pointSize: 14
    }
}

逐行解释

1. Component

   可复用组件，相当于把列表项单独封装起来，多处使用。

2. id:mylegate

   组件名字，给 ListView 调用。

3. text: "姓名："+name+" 年龄："+age

   直接使用模型里的字段：

   • name → 显示姓名
   • age → 显示年龄

---

三、核心知识点总结（笔记必背）

1. ListView 三要素

ListView 要显示内容，必须有 3 个东西：

1. ListView 列表容器
2. model 数据来源（数字 / 自定义模型）
3. delegate 列表项长什么样

2. 两种 model 写法

写法	用途
model: 10	快速生成 0~9 数字列表
ListModel	存储自定义数据（姓名、年龄等）

3. 两个关键字

• modelData：获取数字模型的数据
• 自定义字段名（name/age）：获取自定义模型的数据

4. Component 作用

• 封装列表项
• 可以重复使用
• 让代码更整洁

---

四、最精简记忆版（适合发布）

QML ListView 学习笔记

1. 基础数字列表

• model: 10 生成 0~9
• delegate 定义每一项样式
• modelData 获取序号

2. 自定义数据列表

• ListModel 存储多条数据
• ListElement 代表一条数据
• 可自定义字段：name、age...

3. 自定义列表项

• Component 封装可复用列表项
• delegate 绑定组件
• 直接使用模型字段：name、age

---

QML 自定义输入框组件 代码逐行精讲笔记

这是一份可直接发布的学习笔记 ，包含逐行代码解析、核心知识点、布局逻辑、运行效果 ，适合 Qt Quick 初学者学习自定义 TextField 样式、内联图片、内边距、背景绘制。

一、完整源码（带注释版）

// 导入Qt Quick核心模块，版本2.12，提供基础UI组件、布局、动画能力
import QtQuick 2.12
// 导入窗口模块，提供ApplicationWindow顶级窗口
import QtQuick.Window 2.2
// 导入Qt Quick标准控件，提供TextField、Button等基础控件
import QtQuick.Controls 2.5
// 导入Qt QML核心模块，提供JS逻辑、数据绑定能力
import QtQml 2.0
// 重复导入QtQuick 2.9（与2.12冲突，建议删除）
import QtQuick 2.9
// 导入Material风格样式模块（本代码未使用，可删除）
import QtQuick.Controls.Material 2.12

// 顶级窗口组件：整个应用的主窗口
ApplicationWindow
{
    // 窗口唯一标识，用于代码中引用本窗口
    id: window
    // 窗口默认显示（true=显示，false=隐藏）
    visible: true
    // 窗口宽度：1000像素
    width: 1000
    // 窗口高度：700像素
    height: 700
    // 窗口标题：qsTr()用于国际化翻译，固定显示"Application Demo"
    title: qsTr("Application Demo")

    // 矩形组件：作为窗口的背景容器
    Rectangle{
        // 锚布局：填充父控件（ApplicationWindow），占满整个窗口
        anchors.fill:parent
        // 背景颜色：纯橙色
        color: "orange"

        // 文本输入框：自定义样式的输入控件
        TextField{
            // 锚布局：在父控件（橙色矩形）中居中显示
            anchors.centerIn: parent
            // 输入框固定宽度：200像素
            width: 200
            // 输入文字颜色：红色
            color: "red"
            // 文字字号：24号字体
            font.pointSize: 24
            // 输入框 顶部内边距：文字距离上边框15像素
            topPadding: 15
            // 输入框 底部内边距：文字距离下边框15像素
            bottomPadding: 15
            // 输入框 左侧内边距：文字距离左边框70像素（给图片留空间）
            leftPadding:70
            // 输入框 右侧内边距：文字距离右边框20像素
            rightPadding:20

            // 自定义输入框背景：替换默认TextField背景
            background: Rectangle{
                // 填充父控件（输入框自身）
                anchors.fill: parent
                // 背景颜色：黄色
                color: "yellow"
                // 圆角半径：7像素，实现圆角输入框
                radius: 7
            }

            // 图片组件：嵌入输入框左侧的图标
            Image {
                // 图片唯一标识
                id: myImage
                // 图片资源路径：从Qt资源文件(qrc)中加载图片
                source: "qrc:/images/photo.png"
                // 图片宽度：32像素
                width: 32
                // 图片高度：40像素
                height: 40
                // 锚定到父控件（输入框）左侧
                anchors.left: parent.left
                // 垂直方向居中：与父控件垂直中心对齐
                anchors.verticalCenter: parent.verticalCenter
            }

            // 信号处理器：输入框文字改变时触发
            onTextChanged:{
                // 控制台打印日志，用于调试
                console.log("Text Change")
            }
        }
    }
}

// ==================== 以下为注释废弃代码 ====================
// 废弃的ListView列表组件：数字列表展示
// 废弃的ListModel数据模型：存储姓名+年龄数据
// 废弃的自定义列表项组件
// ==================== 废弃代码无实际运行效果 ====================

---

二、逐行代码详细解释

1. 模块导入区（最顶部 import 语句）

代码	详细作用	优化建议
import QtQuick 2.12	导入Qt Quick核心UI库，提供矩形、文本、图片、布局等基础元素	保留，必须导入
import QtQuick.Window 2.2	提供顶级窗口 ApplicationWindow，是QML应用的根容器	保留，主窗口必备
import QtQuick.Controls 2.5	提供输入框、按钮、列表等标准UI控件	保留，TextField 依赖此模块
import QtQml 2.0	提供JavaScript逻辑、信号、绑定支持	保留，简单界面可省略
import QtQuick 2.9	重复导入，与2.12版本冲突	建议删除
import QtQuick.Controls.Material 2.12	Material风格主题，本代码未使用	建议删除

---

2. 顶级窗口：ApplicationWindow

这是整个界面的根节点，相当于电脑上的应用窗口。

ApplicationWindow
{
    id: window              // 唯一ID，代码中可通过window引用本窗口
    visible: true           // 启动后直接显示窗口
    width: 1000             // 窗口宽
    height: 700             // 窗口高
    title: qsTr("Application Demo")  // 窗口标题栏文字
}

---

3. 背景容器：Rectangle

Rectangle{
    anchors.fill:parent     // 占满父窗口（全屏橙色背景）
    color: "orange"         // 背景色：橙色
}

• Rectangle：矩形基础组件，用于背景、边框、色块
• anchors.fill:parent：Qt Quick 锚布局 → 填满父控件
• color：设置纯色背景

---

4. 核心组件：自定义样式 TextField（输入框）

这是本代码的核心，实现带图标、圆角、黄色背景、红色文字的自定义输入框。

TextField{
    anchors.centerIn: parent   // 在橙色背景中居中显示
    width: 200                 // 固定宽度
    color: "red"               // 输入文字为红色
    font.pointSize: 24         // 文字大小24px
}

4.1 内边距（Padding）

topPadding: 15      // 顶部内边距
bottomPadding: 15   // 底部内边距
leftPadding:70      // 左侧内边距（给左侧图片留空间）
rightPadding:20     // 右侧内边距

• 作用：控制文字与输入框边框的距离
• leftPadding:70 是关键：避免文字覆盖左侧图片

4.2 自定义背景（background）

background: Rectangle{
    anchors.fill: parent
    color: "yellow"
    radius: 7
}

• background：TextField自带属性，用于替换默认背景
• 用黄色矩形实现圆角输入框 ，radius 控制圆角大小

4.3 内嵌图片（Image）

Image {
    id: myImage
    source: "qrc:/images/photo.png"  // 资源文件路径
    width: 32
    height: 40
    anchors.left: parent.left        // 左对齐
    anchors.verticalCenter: parent.verticalCenter  // 垂直居中
}

• 图片固定在输入框左侧居中
• qrc:/ 表示从 Qt 资源系统加载图片（必须提前添加资源）

4.4 文字变化信号

onTextChanged:{
    console.log("Text Change")
}

• 信号：用户输入/删除文字时自动触发
• console.log()：在Qt Creator控制台打印调试信息

---

5. 底部注释代码

//  ListView{ ... }
//  ListModel{ ... }
//  Component{ ... }

• 全部被 // 注释，不会运行、不显示、不影响界面
• 是学习列表组件时的测试代码，可保留作为学习参考

---

三、核心知识点总结（笔记重点）

1. Qt Quick 布局核心：锚布局（anchors）

• anchors.fill:parent：填满父控件
• anchors.centerIn:parent：在父控件中居中
• anchors.left / verticalCenter：对齐方式
• 是QML最常用、最简单的布局方式

2. TextField 自定义样式

1. 修改文字颜色/大小：color / font
2. 调整文字边距：padding 系列属性
3. 自定义背景：background 属性
4. 内嵌图标：在TextField内部直接写Image组件

3. 信号与调试

• onTextChanged：输入框内置信号
• console.log()：快速调试，查看事件是否触发

4. 代码规范建议

1. 删除重复/无用的 import
2. 保持缩进整齐，层级清晰
3. 注释废弃代码，方便后续复用
4. 图片资源必须在qrc中正确添加

---

四、运行效果说明

1. 打开一个 1000x700 的应用窗口，标题为 Application Demo
2. 窗口全屏橙色背景
3. 窗口正中央显示一个：
   • 黄色圆角背景
   • 红色大号文字
   • 左侧带图片图标
   • 文字不会遮挡图片
4. 输入任意内容，Qt Creator控制台会打印 Text Change

---

五、可直接发布的精简笔记版

Qt Quick QML 自定义输入框 学习笔记

1. 功能概述

本案例使用 QML 实现一个带左侧图标、黄色圆角背景、红色文字的自定义输入框，包含布局、样式定制、信号调试等核心知识点。

2. 核心组件

• ApplicationWindow：应用主窗口
• Rectangle：橙色全屏背景
• TextField：自定义输入框（核心）
• Image：输入框内嵌图标

3. 关键技术

1. 锚布局 ：anchors.fill / centerIn 实现居中与全屏
2. 输入框样式定制：背景、颜色、内边距、字号
3. 组件嵌套：图片嵌入输入框内部
4. 信号监听 ：onTextChanged 监听输入变化

4. 代码规范

• 删除重复导入的模块
• 保持层级缩进清晰
• 废弃代码使用注释标注
• 图片使用 Qt 资源系统加载（qrc）

5. 学习目标

掌握 Qt Quick 基础布局、标准控件自定义样式、组件嵌套、信号处理的基础用法。

---