QML ListView

最新推荐文章于 2025-04-11 08:00:00 发布
最新推荐文章于 2025-04-11 08:00:00 发布
阅读量619 收藏 4
点赞数 2
分类专栏： # QT
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_41388533/article/details/117382962
版权

QML ListView

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5
import QtQuick.Controls 1.4 as Ctr_1_4
import QtQuick.Layouts 1.15
import "./common.js"  as FunJs

Window {
    id: window
    width: 600
    height: 480
    visible: true
    title: "QML Demo"

    Item {
        id: rootItem
        anchors.fill: parent
        property var colorBuilder: FunJs.getColorBudider(Qt.rgba)

        ListView{
            id:rootView
            anchors.fill:parent
            model:["data1","data2","data3","data4","data5","data6"]
            delegate: ItemDelegate{
                width: rootItem.width
                text: modelData

                background: Rectangle{
                     color: rootItem.colorBuilder()
                }

                onClicked: {
                    console.log(modelData)
                }
            }

            //滚动条指示器 不可拖动
            //ScrollIndicator.vertical: ScrollIndicator{}

            //滚动条 可拖动
            ScrollBar.vertical: ScrollBar{}

        }
    }
}
  • common.js
function getColorRangeRandom(max){
    return Math.floor(Math.random() * max)
}


function  getColorRandom(){
    let red = getColorRangeRandom(256)
    let green = getColorRangeRandom(256)
    let blue = getColorRangeRandom(256)
    return {red: red / 255, green: green / 255, blue: blue / 255}
}


function getColorBudider(rgbFunction){
    return function(){
        let color = getColorRandom()
        return rgbFunction(color.red, color.green, color.blue)
    }
}
  • 显示：

示例2

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5
import QtQuick.Controls 1.4 as Ctr_1_4
import QtQuick.Layouts 1.15
import "./common.js"  as FunJs

Window {
    id: window
    width: 600
    height: 480
    visible: true
    title: "QML Demo"

    Item {
        id: rootItem
        anchors.fill: parent
        property var colorBuilder: FunJs.getColorBudider(Qt.rgba)

        ListView{
            id:rootView
            anchors.fill:parent
            model:[
                {name: "Lucy", age: "12"},
                {name: "Peter", age: "9"},
                {name: "Ben", age: "16"}
            ]
            delegate: ItemDelegate{
                width: rootItem.width
                text: "name:" +  modelData.name + "age:" +  modelData.age + (rootView.currentIndex === index ? '√' : "")

                background: Rectangle{
                    color: rootItem.colorBuilder()
                }

                onClicked: {
                    console.log(modelData)
                    rootView.currentIndex = index
                }
            }

            //滚动条指示器 不可拖动
            //ScrollIndicator.vertical: ScrollIndicator{}

            //滚动条 可拖动
            ScrollBar.vertical: ScrollBar{}
        }
    }
}
  • 输出：

ListMdel

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5
import QtQuick.Controls 1.4 as Ctr_1_4
import QtQuick.Layouts 1.15
import "./common.js"  as FunJs

Window {
    id: window
    width: 600
    height: 480
    visible: true
    title: "QML Demo"

    Item {
        id: rootItem
        anchors.fill: parent
        property var colorBuilder: FunJs.getColorBudider(Qt.rgba)

        ListView{
            id:rootView
            anchors.fill:parent
            model:ListModel{
                id: listModel
                ListElement {
                    name: "Lucy"
                    age: "12"
                }
                ListElement {
                    name: "Peter"
                    age: "9"
                }
                ListElement {
                    name: "Ben"
                    age: "16"
                }
            }

            delegate: Rectangle{
                width: rootView.width
                height: rootView.height * 0.1
                color: rootItem.colorBuilder()
                Text{
                    //如果要文字居中设置，则Text的父对象必须显示设置宽高，不要使用锚点设置
                    anchors.fill: parent
                    text: "name：" + name + "  age :" + age + (parent.isCurrentIndex() ? "√" : "")
                    font.pointSize: 15
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                }

                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        let data = listModel.get(index)
                        console.log(JSON.stringify(data))
                        setCurrentIndex()
                    }
                }

                function isCurrentIndex(){
                    return rootView.currentIndex === index
                }

                function setCurrentIndex(){
                    rootView.currentIndex = index
                }

            }

            Component.onCompleted: {
                listModel.append({ name: "Ben",age: "16"})
            }


            //滚动条 可拖动
            ScrollBar.vertical: ScrollBar{}

        }
    }
}
  • 显示：

Section

  • 使用分组，模型必须是ListModel
  • 示例
import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5
import QtQuick.Controls 1.4 as Ctr_1_4
import QtQuick.Layouts 1.15
import "./common.js"  as FunJs

Window {
    id: window
    width: 600
    height: 480
    visible: true
    title: "QML Demo"

    Item {
        id: rootItem
        anchors.fill: parent
        property var colorBuilder: FunJs.getColorBudider(Qt.rgba)

        ListView{
            id:rootView
            anchors.fill: parent

            model:ListModel{
                ListElement{
                    name:"Alice"
                    group: "student"
                }
                ListElement{
                    name:"Ben"
                    group: "student"
                }
                ListElement{
                    name:"Cudy"
                    group: "student"
                }

                ListElement{
                    name:"Deni"
                    group: "student"
                }
                ListElement{
                    name:"Ella"
                    group: "teacher"
                }
                ListElement{
                    name:"Fily"
                    group: "teacher"
                }

            }


            delegate: Rectangle{
                width: parent.width
                height: 20
                color: rootItem.colorBuilder()
                required property string name

                Text{
                    anchors.centerIn: parent
                    text: name
                }
            }

            section.property: "group"
            section.delegate: Rectangle{
                width: parent.width
                height: 20
                color: rootItem.colorBuilder()
                required property string section

                Text {
                   anchors.centerIn: parent
                   text: section
                   font.bold: true
                   font.pointSize: 16
                }
            }
        }
    }
}
  • 输出：

附加属性和信号

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5
import QtQuick.Controls 1.4 as Ctr_1_4
import QtQuick.Layouts 1.15
import "./common.js"  as FunJs

Window {
    id: window
    width: 600
    height: 480
    visible: true
    title: "QML Demo"

    Item {
        id: rootItem
        anchors.fill: parent
        property var colorBuilder: FunJs.getColorBudider(Qt.rgba)

        ListView{
            id:rootView
            anchors.fill: parent

            model:ListModel{
                ListElement{
                    name:"Alice"
                    group: "student"
                }
                ListElement{
                    name:"Ben"
                    group: "student"
                }
                ListElement{
                    name:"Cudy"
                    group: "student"
                }

                ListElement{
                    name:"Deni"
                    group: "student"
                }
                ListElement{
                    name:"Ella"
                    group: "teacher"
                }
                ListElement{
                    name:"Fily"
                    group: "teacher"
                }

            }


            delegate: Rectangle{
                width: ListView.view.width
                height: 20
                color: ListView.isCurrentItem ? rootItem.colorBuilder() : "gray"
                required property string name

                Text{
                    anchors.centerIn: parent
                    text: name
                    font.italic: parent.ListView.isCurrentItem
                }


            }

            section.property: "group"
            section.delegate: Rectangle{
                width: parent.width
                height: 20
                color: rootItem.colorBuilder()
                required property string section

                Text {
                   anchors.centerIn: parent
                   text: section
                   font.bold: true
                   font.pointSize: 16
                }
            }

            footer: Button{
                text: "append item"
                onClicked: {
                    rootView.model.append({name:"Zem", group: "teacher"})
                }
            }


        }
    }
}
  • 输出：

 

 

QML类型——ListView
fengyanyu68的博客
07-27 7981
正文 为列表模型(ListModel)的所有元素提供列表视图。 详细说明 ListView显示内置QML类型（例如ListModel和XmlListModel）创建的模型数据，或者使用C++定义的自定义模型类（继承QAbstractItemModel或QAbstractListModel）创建的数据。 ListView有一个Model（定义要显示的数据）和一个Delegate（定义如何显示数据）。ListView中的元素可以水平或垂直放置。列表视图本质上是可以拖动的，因为ListView继承Flickabl
QML之ListView
qq_33271629的博客
03-21 662
最近在写一个网络测试小工具，需要用到ListView来显示收到和发送的网络消息，需要能显示消息收到的时间，消息的发送方，还有消息内容，为了防止占用内存过多，要能设置界面上最多显示的消息数量，超过后自动删除最早的消息。感觉主要难点还是这么多窗口的颜色配置，颜色不合适界面就很丑。
QML中ListView加载大数据
最新发布
Zy100Papa的博客
04-11 401
这时候应该使用C++模型或者自定义的抽象模型，只在需要时加载数据，比如QAbstractItemModel的子类，这样可以在后端动态获取数据，而不是一次性加载所有数据。这也是实际开发中非常常用的实现方式。这个方案通过QML的虚拟化列表特性，结合动态加载策略，实现了在保持60FPS流畅滚动的同时，内存占用恒定（与列表长度无关）。但是本篇为了演示方便，暂不用c++模型的方式，而是自定义一个代理模型，只在需要时生成数据，比如根据索引动态生成项的内容，而不是预先存储所有数据，而是按需生成。
QML类型：ListView
热门推荐
友善啊，朋友的博客
10-14 1万+
一、描述 ListView 继承自 Flickable，用作显示来自内置 QML 类型（如 ListModel 和 XmlListModel）或从 QAbstractItemModel 或 QAbstractListModel 继承的 C++ 中定义的自定义模型类创建的模型中的数据。 二、使用示例 import QtQuick 2.12 import QtQuick.Window 2.0 Window { id:root; visible: true; width: 20.
QML视图（ListView）
qq_45303986的博客
03-12 3825
如果模型不是按部分排序的，则创建的部分可能不是唯一的;不同部分之间的每个边界都将导致创建部分标题，即使该部分存在于其他地方也是如此。保存过渡以应用于视图中由于视图模型中的移动操作而移动的项。保存转换以应用于视图中因删除视图中的其他项而替换的项。保存转换以应用于视图中因添加视图中的其他项而替换的项。保存过渡以应用于视图模型中的移动操作所取代的项。当前的部分：保存当前位于视图开头的部分。保存从突出显示组件创建的突出显示项。保存要应用于从视图中删除的项的过渡。保存要应用于从视图中添加的项的过渡。
qml 实现一个listview
foxgod的专栏
07-18 1134
通过qml实现listview的主要功能，菜单，滚动条，拖动改变内容等
SelectListView.qml (QML ListView 多选)
10-16
Qml 中的listview 默认不提供多选 Ctrl + A 全选， Shift +点击 范围选择， Ctrl+ 点击 多选 ，这个资源中实现了这几种选择，除了框选。
Qt Qml ListView上拉加载数据 Demo源码
09-03
在本文中，我们将深入探讨Qt Qml中的ListView组件以及如何实现上拉加载更多数据的机制。这个Demo源码提供了一个完整的工程示例，用于展示如何在ListView中添加上拉加载功能，同时显示列表页脚的加载状态。 首先，Qt...
QML ListView实现树形二级列表（类似 android ExpandableListView控件）
08-11
QML 中没有直接提供类似 android 的ExpandableListView二级列表控件，treeView，但是用 treeView 实在是有些不方便，并且达不到想要的效果，所以干脆用 ListView 来扩展一个。
QmlListView控件位置定位的几个方法
12-28
笔者在开发产品过程中，ListView算是用的最多的控件之一了。ListView控件有两大要素比较重要，一是model数据，二是delegate实例。用得好这两个基本上对这一控件没什么问题了，一开始笔者也是这样想的，可是学习不同...
qml ListView和TableView共用自定义滚动条
09-17
使用QML实现自定义滚动条，并作用于listView和tableView中，代码可直接通过cmd命令运行
Qt qml中listview 列表视图控件（下拉刷新、上拉分页、滚动轴）
01-04
Qt qml listview下拉刷新和上拉分页主要根据contentY来判断。但要加上顶部下拉指示器、滚动条，并封装成可简单调用的组件，着实花了我不少精力：） 先给大家展示下效果图： 【功能】 下拉刷新和上拉分页逻辑 /下拉刷新 /上拉更多 /滚动栏 /工具栏半拉显隐 Author: surfsky.cnblogs.com Lisence: MIT 请保留此文档声明 History: init. surfsky.cnblogs.com, 2015-01 add initPosition property. 2015-01 【调用】 控件使用非常简单，只要实现 onLoad 和 onL
qml学习:ListView
bird_big_dream的博客
09-02 976
15. **flickableDirection**: 允许滚动的方向，可以是 `Flickable.AutoFlickDirection`, `Flickable.HorizontalFlick`, `Flickable.VerticalFlick`, 或 `Flickable.HorizontalAndVerticalFlick`.3. **orientation**: 列表的方向，可以是 `Qt.Vertical` 或 `Qt.Horizontal`。滚动是自由的，用户可以停在任意位置。
QML -- ＞ ListView(列表视图)
QtCompany的博客
06-07 895
1、对于用户，ListView是一个滚动区域，支持惯性滚动。(代理项delegates)Component只能包含一个顶层Item，而且在这个Item之外不能定义任何数据，除了id。在顶层Item之内，则可以包含更多的子元素来协同工作，最终形成一个具有特定功能的组件。
qml-ListView
LIJIWEI0611的博客
02-10 968
ListView 显示来自内置 QML 类型（如 ListModel 和 XmlListModel）创建的模型的数据，或在 C++ 中定义的从 QAbstractItemModel 或 QAbstractListModel 继承的自定义模型类。 ListView 有一个模型，它定义了要显示的数据，还有一个委托，它定义了数据应该如何显示。 ListView 中的项目水平或垂直布局。 列表视图本质上是可滑动的，因为 ListView 继承自 Flickable。 ...
QML ListView简介
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
03-09 2249
ListView有一个模型，它定义了要显示的数据，还有一个委托，它定义了数据应该如何显示。ListView中的项是水平或垂直布局的。ListView 继承自 Flickable。count : int：有多少子项model : model：此属性保存为列表提供数据的模型。delegate : Component：定义了数据应该如何显示orientation : enumeration：设置列表的方向是水平还是垂直currentIndex : int：当前项的索引。
QML ListView 列表视图
青春不老，奋斗不止！
02-02 1304
虽然 Repeater 在重复创建多个相似项的时候很方便，但是通常只适用于有限的简单元素，并且它还无法滚动浏览。而基于 Flickable 的视图组件（如 GridView、ListView、TableView、TreeView 等）则弥补了这些缺点，它们不但能够显示大量数据，而且还支持滚动浏览，尤其是针对复杂的布局和交互场景，可以通过分页显示、懒加载、动态更新等手段来提高性能。
qml listview
03-28
### QML 中 ListView 的基本用法 `ListView` 是 QML 提供的一个强大组件，用于展示列表形式的数据。它可以绑定到多种类型的模型（如 `ListModel` 或者 C++ 定义的模型），并通过委托 (`delegate`) 来定义每一项的具体表现形式。 以下是关于如何使用 `ListView` 的详细说明以及示例代码： #### 基本结构 一个完整的 `ListView` 需要以下几个部分： 1. **model**: 数据源，可以是一个简单的数组、`ListModel` 实例或者更复杂的 C++ 模型。 2. **delegate**: 定义了每一条数据在视图中的具体呈现方式。 3. **orientation**: 可选参数，默认为垂直方向 (vertical)，也可以设置为水平方向 (horizontal)[^1]。 下面提供了一个具体的例子来演示这些概念的实际应用。 ```qml import QtQuick 2.15 import QtQuick.Controls 2.15 ApplicationWindow { visible: true width: 400 height: 600 title: "QML ListView Example" ListModel { // 创建一个 ListModel 作为数据源 id: fruitModel ListElement { name: "Apple"; color: "red" } ListElement { name: "Banana"; color: "yellow" } ListElement { name: "Cherry"; color: "darkRed" } } Component { // 定义 delegate 组件 id: fruitDelegate Rectangle { width: parent.width; height: 40 color: index % 2 ? "#f8f8f8" : "#eaeaea" Text { anchors.centerIn: parent text: model.name + " (" + model.color + ")" font.pixelSize: 18 } } } ListView { // 主体 ListView 控件 anchors.fill: parent model: fruitModel delegate: fruitDelegate spacing: 2 ScrollBar.vertical: ScrollBar {} // 添加竖直滚动条 } } ``` 此段代码展示了如何利用 `ListModel` 和自定义 `Component` 构建一个基础的 `ListView`[^2]。其中包含了颜色交替的效果以增强视觉体验，并加入了滚动条以便于处理大量数据的情况。 #### 属性解释 - `anchors.fill`: 让 `ListView` 占满整个窗口区域。 - `spacing`: 设置相邻两项之间的间距大小。 - `ScrollBar.vertical`: 显式声明启用垂直滚动条功能。 ### 进阶特性 除了上述的基础操作外，还可以进一步扩展其能力，比如动态更新模型内容、响应用户交互事件等高级技巧。这里仅列举几个常用方法： - 修改现有项目的属性值； - 向模型中追加新项目； - 删除指定索引处的项目； 例如，在按钮点击时向模型添加新的水果名称： ```qml Button { text: "Add Fruit" onClicked: { var newItem = {"name": "Orange", "color": "orange"}; fruitModel.append(newItem); } } ``` 以上就是有关 QML 中 `ListView` 的一些基础知识及其简单实现案例介绍。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值