Qt Quick系列(7)—Model-View

这篇具有很好参考价值的文章主要介绍了Qt Quick系列(7)—Model-View。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🚀作者:CAccept
🎂专栏:Qt Quick
Qt Quick系列(7)—Model-View,Qt Quick,Qt,qt,数据库,开发语言

前言

在QML中,model和view由delegate连接,他们的关系如下👇
1、delegate 属性:delegate知道model的内容以及如何可视化它-怎么显示
2、view知道delegate的概念以及如何布置它们-怎么摆放
3、model属性:model只知道它所表示的数据-要显示的内容集合
4、onItem 属性:当创建每个重复项时,可以访问该项的属性和方法。使用 onItem 属性,您可以处理每个重复项的信号、属性或方法。

本博客中工程使用的环境为:qt6 + Qt Creator10.0.1

内置视图View

Qt Quick提供了一组内置视图有:Repeat、ListView、GridView、TableView
Qt Quick系列(7)—Model-View,Qt Quick,Qt,qt,数据库,开发语言


Repeater

Repeater 元素提供了一种简单的方式来重复创建并显示其他元素的多个实例。您可以指定重复的次数或基于数据模型进行重复。
看代码示例吧👇
BlueBox.qml

import QtQuick

Rectangle {
    color:"blue"
    property alias text: label.text
    Text {
        id: label
        color:'white'
        anchors.centerIn: parent
        text: qsTr("text")
    }
}

main.qml

import QtQuick
Column{
    height: 160
    spacing:2
    Repeater{
        model: ListModel {
            ListElement { name: "Mercury"; surfaceColor: "gray" }
            ListElement { name: "Venus"; surfaceColor: "yellow" }
            ListElement { name: "Earth"; surfaceColor: "green" }
            ListElement { name: "Mars"; surfaceColor: "orange" }
            ListElement { name: "Jupiter"; surfaceColor: "orange" }
            ListElement { name: "Saturn"; surfaceColor: "yellow" }
            ListElement { name: "Uranus"; surfaceColor: "lightBlue" }
            ListElement { name: "Neptune"; surfaceColor: "darkBlue" }
        }
        //这样model中的每个元素都会用一个BlueBox进行表示
        delegate: BlueBox{
            required property string name
            required property color surfaceColor

            width:160;height:30
            text:name
            radius: 3

            Rectangle{
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: 4
                width: 16;height:16;radius: 8
                color:parent.surfaceColor
            }
        }
    }
}

运行效果:
Qt Quick系列(7)—Model-View,Qt Quick,Qt,qt,数据库,开发语言


ListView

ListView 是 Qt Quick 中的一个内置视图组件,用于显示垂直或水平滚动的项目列表。它提供了一种方便的方式来展示和交互大量的项目,比较重要的属性有clip、orientation、highlight、header、footer、cacheBuffer。
GreenBox.qml

import QtQuick 2.0
Rectangle {
    color:"lightgreen"
    property alias text: label.text
    Text
    {
        id:label
        color:"white"
        anchors.centerIn: parent
    }
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 80
    height: 300
    ListView
    {
        id:lv
        anchors.fill:parent
        anchors.margins: 20
        //会让创建更加的柔顺,加载的时候就不会很突兀
        clip:true

        model:10
        spacing:5
        //缓存大小追加80像素(相对于高度来说)
        cacheBuffer:80

        //横向ListView
        //orientation:ListView.Horizontal
        highlight:hightComponent
        header:headerComponent
        footer:footerComponent
        focus:true
        delegate: Item
        {
            id:wrapper
            //required property int index
            width:lv.width
            height:40
            //每个代理在model上面的索引
            Text
            {
                anchors.centerIn: parent
                text:index
            }
            scale:(lv.currentIndex==index)?2:1
            Component.onCompleted:{console.log(index+" added!")}
            Component.onDestruction:{console.log(index+" deleted!")}
            //当点击当前这个项的时候,那么焦点就会变成当前的index
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    lv.currentIndex = index
                }
            }
        }

    }

    Component
    {
        id:hightComponent
        GreenBox
        {
            id:gb
            width:lv.width
            y:lv.currentItem.y
            //当y发生改变时
            Behavior on y
            {
           		//颜色慢慢消失再慢慢出现
                SequentialAnimation
                {
                    PropertyAnimation
                    {
                        target: gb
                        property: "opacity"
                        to:0
                        duration: 200
                    }

                    NumberAnimation{duration:200}
                    PropertyAnimation
                    {
                        target: gb
                        property: "opacity"
                        to:1
                        duration: 200
                    }
                }
            }
        }
    }

    Component
    {
        id:headerComponent
        BlueBox
        {
            width: lv.width
            height: 30
            text:"Header"
        }

    }
    Component
    {
        id:footerComponent
        BlueBox
        {
            width: lv.width
            height: 30
            text:"footer"
        }

    }
}

运行效果:
Qt Quick系列(7)—Model-View,Qt Quick,Qt,qt,数据库,开发语言


GridView

GridView 是 Qt Quick 中的一个内置视图组件,用于以网格形式展示项目列表。它适用于需要将项目以行和列的形式排列的情况。

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    GridView
    {
        id:gv
        anchors.fill:parent
        anchors.margins: 20
        clip:true
        model:100
        //每个单元格的宽度和高度
        cellWidth:45
        cellHeight:45
        flow:GridView.TopToBottom
        //delegate中的width和height优先级更高,如果cellWidth和cellHeight也设置的话,以delegate为优先
        delegate: GreenBox
        {
            width:40
            height:40
            text:index
        }
    }
}

运行效果:
Qt Quick系列(7)—Model-View,Qt Quick,Qt,qt,数据库,开发语言



代理delegate

每个代理都可以访问许多附加的属性,其中一些来自数据模型,另一些来自视图。

  • 从模型中:属性将每个项目的数据传递给delegate。
  • 从视图中:属性将状态信息传递与给delegate。

从视图附加的最常用属性是ListView.isCurrentItem和ListView.view。第一个是布尔值,指示项是否为当前项,而后面的是对实际视图的只读引用。
看一个代码示例吧👇
main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Rectangle {
    width: 120;height: 300

    gradient: Gradient {
        GradientStop { position: 0.0; color: "#f6f6f6" }
        GradientStop { position: 1.0; color: "#d7d7d7" }
     }

    ListView {
        id:lv
        anchors.fill: parent
        anchors.margins: 20
        focus: true
        model: 100
        //可以在外部定义进行使用
        delegate: numberDelegate
        spacing: 5
        //柔顺地进行消失和生成
        clip: true
    }

    Component {
        id: numberDelegate
        Rectangle {
            id: wrapper
            //拿到引用了这个delegate的ListView,用来更新数值
            width: ListView.view.width;height: 40
            color: ListView.isCurrentItem ? "#157efb" : "#53d769"
            //后面参数越大,颜色越浅
            border.color: Qt.lighter(color, 1.1)

            Text {
                anchors.centerIn: parent
                font.pixelSize: 10
                text: index
            }
            //点击信号更新currentIndex
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    lv.currentIndex=index
                }
            }

        }
    }
}

运行效果:
Qt Quick系列(7)—Model-View,Qt Quick,Qt,qt,数据库,开发语言


总结

本篇博客对Model-View的整个关系进行了简单的梳理,并且提供了一些可供参考的代码示例,后期还会对此内容进行相应的补充,对本博客进行持续的更新,后面会对视图的一些信号进行讲解,希望本篇文章对您有所帮助,谢谢!!
Qt Quick系列(7)—Model-View,Qt Quick,Qt,qt,数据库,开发语言
文章来源地址https://www.toymoban.com/news/detail-517040.html

到了这里,关于Qt Quick系列(7)—Model-View的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • QT Model/View 设计模式中 selection 模型

    Qt的selection模型用于管理TableView中的选择操作。它允许用户选择和操作特定的数据。 当使用Qt的TableView时,可以使用selection模型来实现以下用途: 数据操作 :通过选择模型,可以方便地对所选的单元格或行执行数据操作,例如复制、剪切、粘贴、删除等。 数据筛选 :可以使

    2024年01月20日
    浏览(37)
  • Qt Quick系列(6)—多风格UI页面

    🚀作者:CAccept 🎂专栏:Qt Quick Qt Quick控件用于创建由标准化组件(如按钮、标签、滑块等)构建的用户界面。 QtQuick.Controls:基本控件。 QtQuick.Templates:为控件提供行为化的、非可化视的基本类型。 QtQuick.Controls.Imagine:为Imagine主题风格提供支持。 QtQuick.Controls.Material:为

    2024年02月09日
    浏览(40)
  • Qt关于Model/View大数据量刷新的处理经验

    前段时间有同学咨询关于大数据量的Model刷新时卡顿的优化方案,通过评论留言的方式回答了一部分,但感觉不够全面。因为这个是之前项目重点解决的问题,处理的过程中收获颇多,这里就基于之前的项目经验进行完整的总结,希望对大家在处理类似问题的过程中能有所启

    2024年02月08日
    浏览(40)
  • Qt 中model/View 架构 详解,以及案例实现相薄功能

    ​ 我们的系统需要显示大量数据,比如从数据库中读取数据,以自己的方式显示在自己的应用程序的界面中。早期的 Qt 要实现这个功能,需要定义一个组件,在这个组件中保存一个数据对象,比如一个列表。我们对这个列表进行查找、插入等的操作,或者把修改的地方写回

    2024年02月06日
    浏览(42)
  • 如何避免 QT 的 View/Model 模式产生消息激活的死循环?

    当收到QTableWidget的itemChanged信号时,关联的槽函数一般用于响应单元格数据的修改。它可以执行以下一些常见的工作: 更新数据:槽函数可以获取修改后的数据,并根据需要更新相关的数据结构或变量。 数据验证:槽函数可以对修改后的数据进行验证,检查其是否满足特定条

    2024年01月21日
    浏览(47)
  • 一文带你了解QT Model/View框架的设计思想和实现机制

    目录 1、QT Model/View框架简介 1.1、QT Model/View是什么? 1.2、QT Model/View框架核心思想 1.3、Model/View框架工作机制 1.4、Model/View框架的类 2、Model 2.1模型简介 2.2、模型索引 2.3、数据角色 2.4、QStringListModel 2.5、QFileSystemModel 2.6、QSortFilterProxyModel 3、View 4、Delegate 5、项选择模型 5.1、QIt

    2024年02月05日
    浏览(105)
  • 05-1_Qt 5.9 C++开发指南_Model/View结构基础(基本原理;数据模型;试图组件;代理)

    Model/View(模型/视图) 结构是 Qt 中用界面组件显示与编辑数据的一种结构,视图 (View)是显示和编辑数据的界面组件,模型 (Model) 是视图与原始数据之间的接口。 Model/View 结构的典型应用是在数据库应用程序中,例如数据库中的一个数据表可以在一个 OTableView 组件中显示和编辑。

    2024年02月17日
    浏览(51)
  • Qt Quick 项目(第二集Qt Quick Application创建)

    上集回顾 Qt Quick 项目(第一集Qt Quick UI 项目项目创建)     如果将程序的用户界面称为前端,将程序中的数据存储和业务逻辑称为后端,那么传统Qt应用程序的前端和后端都是使用C++来完成的。对于现代软件开发而言,这里有一个存在已久的冲突:前端的演化速度要远快于后

    2024年01月25日
    浏览(40)
  • Qt Quick程序的发布|Qt5中QML和Qt Quick 的更改

    # Quick程序的发布旧版做法 # Qt5中QML和Qt Quick 的更改 1.QML语言的更改(Qt4-Qt5)     在QML语言中,只有少量更改会影响QML代码的迁移:无法直接导入单独的文件(例如:import\\\"MyType.qml”),需要导人该文件所在的目录;     JavaScript文件中的相对路径被解析为相对于该JavaScrip

    2024年01月25日
    浏览(50)
  • QT Quick之quick与C++混合编程

            Qt quick能够生成非常绚丽界面,但有其局限性的,对于一些业务逻辑和复杂算法,比如低阶的网络编程如 QTcpSocket ,多线程,又如 XML 文档处理类库 QXmlStreamReader / QXmlStreamWriter 等等,在 QML 中要么不可用,要么用起来不方便,所以就有了quick和C++混合编程的需求。

    2024年02月12日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包