Qml 模型-视图-代理（贰）之 代理（Delegate） 学习

最新推荐文章于 2025-03-17 08:00:00 发布
最新推荐文章于 2025-03-17 08:00:00 发布
阅读量1k 收藏 10
点赞数 13
分类专栏： C++ Qt QML 文章标签： Qt Qml c++

使用模型与视图来定义用户界面时，代理在创建显示时扮演了大量的角色，在模型中的每个元素通过代理来实现可视化。 

代理

使用键盘移动 高亮 效果 

代码： 

视图绑定的属性是 ListView.isCurrentItem: 这个属性是一个布尔值，标识这个元素是否是 视图的当前元素，也就是否当前元素获取到 焦点。

每个代理的width（宽度）属性与视图的width（宽度）属性绑定，每个代理的背景颜色color 依赖绑定的属性ListView.isCurrentItem 属性。

动画添加与移除元素（Animating Added and Removed Items）

动画添加与移除效果

QML 视图为每个代理绑定了两个信号，onAdd和onRemove 。使用动画连接它们。使⽤动画连接它们，可以⽅便创建识别哪些内容被添加或删除 的动画。

动态填充一个链表模型（ListModel）

调用模型的 append 方法来添加一个新的元素，点击添加操作会 触发视图创建⼀个新的代理，并发送 GridView.onAdd信号。SequentialAnimation队列动画与这个信号连接绑定， 使⽤代理的scale属性来放⼤视图元素。

当视图中的⼀个代理点击时，将会调⽤模型的remove⽅法将⼀个元素从模型
中移除。
import QtQuick 2.15

Rectangle{
    width: 200
    height: 300

    color: "white"

    // ListView{
    //     anchors.fill: parent
    //     anchors.margins: 20
    //     model: 100

    //     clip: true
    //     delegate: numberDelegateTest

    //     spacing: 5
    //     focus: true

    // }
    // Component{
    //     id: numberDelegateTest

    //     Rectangle{
    //         width: ListView.view.width
    //         height: 40

    //         color: ListView.isCurrentItem ? "gray" : "lightGreen"

    //         Text {
    //             anchors.centerIn: parent
    //             font.pixelSize: 20
    //             text: index
    //         }

    //     }

    // }








    ListModel{
        id: theListModel
        ListElement{
            number:0
        }
        ListElement{
            number:1
        }
        ListElement{
            number:2
        }
        ListElement{
            number:3
        }
        ListElement{
            number:4
        }
        ListElement{
            number:5
        }
        ListElement{
            number:6
        }
        ListElement{
            number:7
        }
        ListElement{
            number:8
        }
    }

    Rectangle{
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.margins: 20

        height: 40

        color: "darkGreen"

        Text {
            anchors.centerIn: parent
            text: "add Item!"
        }
        MouseArea{
            //parent是当前对外象外的 也就是当前花括号外面的对象
            anchors.fill: parent
            onClicked: {
                theListModel.append({"number": ++parent.count})
            }
        }
        property int count: 9
    }


    GridView{
        anchors.fill: parent
        anchors.margins: 20
        anchors.bottomMargin: 80

        clip: true

        model: theListModel

        cellWidth: 45
        cellHeight: 45

        delegate: numberDelegateTest2


    }

    Component{
        id: numberDelegateTest2
        Rectangle{
            id:wrapperTest
            width: 40
            height: 40
            color: "lightGreen"
            Text{
                anchors.centerIn: parent
                font.pixelSize: 10
                text: number

            }

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    if(!wrapperTest.GridView.delayRemove)
                        theListModel.remove(index)
                }
            }

            GridView.onRemove: SequentialAnimation {
                PropertyAction { target: wrapperTest; property: "GridView.delayRemove"; value: true }
                NumberAnimation { target: wrapperTest; property: "scale"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
                PropertyAction { target: wrapperTest; property: "GridView.delayRemove"; value: false }

            }
            GridView.onAdd: SequentialAnimation {
                NumberAnimation { target: wrapperTest; property: "scale"; from: 0; to: 1; duration: 250; easing.type: Easing.InOutQuad }

            }
        }
    }
}

形变的代理

通常使用链表时会使用当前项激活时展开的机制，这个操作可以被用于动态的 将当前项目填充到整个屏幕 来 添加一个新的用户界面， 或者为链表中的当前项提供更多的信息。
点击链表时，链表项会展开填充整个链表视图（ListView）。额外的区域用于添加更多的信息，这种机制使用一个状态来控制，当一个链表项展开时，代理项都能输入 expanded 展开状态，在这种状态下一些属性被改变。

包装器（wrapper）的高度（height）被设置为链表视图（ListView）的高度。标签图片被放大并且下移，使图片 从小图片的位置 向 大图片的位置移动。 两个隐藏项， 实际视图（factsView）与 关闭按键（closeButton）切换它的 透明度（opacity 属性） 显示出来。

设置链表视图（ListView）包含了设置内容Y坐标（constemtsY）这是视图顶部可见的部分代理的 Y轴坐标。 另一个变化是设置视图的交互（interactive）为false。 这个操作阻止了视图的移动，用户不能动条切换当前项。

效果图：

左侧文本标题

文本取Model 中的子项 ListElement 中属性 名称（name）

右侧图片

图片源为  ListElement 中属性 名称（imageSource）

说明文本视图

文本内容也是ListElement 中属性 facts

关闭按钮

点击事件

状态

动画

完整代码

import QtQuick 2.15

Rectangle{
    width: 1600
    height: 600

    color: "white"

    // ListView{
    //     anchors.fill: parent
    //     anchors.margins: 20
    //     model: 100

    //     clip: true
    //     delegate: numberDelegateTest

    //     spacing: 5
    //     focus: true

    // }
    // Component{
    //     id: numberDelegateTest

    //     Rectangle{
    //         width: ListView.view.width
    //         height: 40

    //         color: ListView.isCurrentItem ? "gray" : "lightGray"

    //         Text {
    //             anchors.centerIn: parent
    //             font.pixelSize: 20
    //             text: index
    //         }

    //     }

    // }








    // ListModel{
    //     id: theListModel
    //     ListElement{
    //         number:0
    //     }
    //     ListElement{
    //         number:1
    //     }
    //     ListElement{
    //         number:2
    //     }
    //     ListElement{
    //         number:3
    //     }
    //     ListElement{
    //         number:4
    //     }
    //     ListElement{
    //         number:5
    //     }
    //     ListElement{
    //         number:6
    //     }
    //     ListElement{
    //         number:7
    //     }
    //     ListElement{
    //         number:8
    //     }
    // }

    // Rectangle{
    //     anchors.left: parent.left
    //     anchors.right: parent.right
    //     anchors.bottom: parent.bottom
    //     anchors.margins: 20

    //     height: 40

    //     color: "darkGreen"

    //     Text {
    //         anchors.centerIn: parent
    //         text: "add Item!"
    //     }
    //     MouseArea{
    //         //parent是当前对外象外的 也就是当前花括号外面的对象
    //         anchors.fill: parent
    //         onClicked: {
    //             theListModel.append({"number": ++parent.count})
    //         }
    //     }
    //     property int count: 9
    // }


    // GridView{
    //     anchors.fill: parent
    //     anchors.margins: 20
    //     anchors.bottomMargin: 80

    //     clip: true

    //     model: theListModel

    //     cellWidth: 45
    //     cellHeight: 45

    //     delegate: numberDelegateTest2


    // }

    // Component{
    //     id: numberDelegateTest2
    //     Rectangle{
    //         id:wrapperTest
    //         width: 40
    //         height: 40
    //         color: "lightGreen"
    //         Text{
    //             anchors.centerIn: parent
    //             font.pixelSize: 10
    //             text: number

    //         }

    //         MouseArea{
    //             anchors.fill: parent
    //             onClicked: {
    //                 if(!wrapperTest.GridView.delayRemove)
    //                     theListModel.remove(index)
    //             }
    //         }

    //         GridView.onRemove: SequentialAnimation {
    //             PropertyAction { target: wrapperTest; property: "GridView.delayRemove"; value: true }
    //             NumberAnimation { target: wrapperTest; property: "scale"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
    //             PropertyAction { target: wrapperTest; property: "GridView.delayRemove"; value: false }

    //         }
    //         GridView.onAdd: SequentialAnimation {
    //             NumberAnimation { target: wrapperTest; property: "scale"; from: 0; to: 1; duration: 250; easing.type: Easing.InOutQuad }

    //         }
    //     }
    // }






    ListView{
        id: listViewTest
        anchors.fill: parent
        delegate: detailsDelegate
        model: planets

    }


    ListModel
    {
        id: planets
        ListElement { name: "Mercury"; imageSource: "ufo.jpg"; facts: "Mercury is the smallest planet in the Solar System. It is the closest planet to the sun. It makes one trip around the Sun once every 87.969 days." }
        ListElement { name: "Venus"; imageSource: "SiC.jpeg"; facts: "Venus is the second planet from the Sun. It is a terrestrial planet because it has a solid, rocky surface. The other terrestrial planets are Mercury, Earth and Mars. Astronomers have known Venus for thousands of years." }
        ListElement { name: "Earth"; imageSource: "football1.jpeg"; facts: "The Earth is the third planet from the Sun. It is one of the four terrestrial planets in our Solar System. This means most of its mass is solid. The other three are Mercury, Venus and Mars. The Earth is also called the Blue Planet, 'Planet Earth', and 'Terra'." }
        ListElement { name: "Mars"; imageSource: "football.jpg"; facts: "Mars is the fourth planet from the Sun in the Solar System. Mars is dry, rocky and cold. It is home to the largest volcano in the Solar System. Mars is named after the mythological Roman god of war because it is a red planet, which signifies the colour of blood." }
    }

    Component{
        id: detailsDelegate
        Item {
            id: wrapper
            width: listViewTest.width
            height: 30
            Rectangle{
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: parent.top

                height: 30

                color: "#ffaa00"

                Text {
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    font.pixelSize: parent.height-4
                    text: name
                }
            }

            Rectangle{
                id: imageTest
                color: "black"
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.rightMargin: 2
                anchors.topMargin: 2
                width: 26
                height: 26
                Image {
                    anchors.fill: parent
                    fillMode: Image.PreserveAspectFit
                    source: imageSource
                }
            }

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    parent.state = "expanded"
                    console.log(name + "被点击")
                }
            }

            Item {
                id: factsView
                anchors.top: imageTest.bottom
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom

                opacity: 0

                Rectangle{
                    anchors.fill: parent
                    color: "#cccccc"

                    Text {
                        anchors.fill: parent
                        anchors.margins: 5
                        clip: true
                        wrapMode: Text.WordWrap
                        font.pixelSize: 12
                        text: facts
                    }
                }
            }

            Rectangle
            {
                id: closeButton
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.rightMargin: 2
                anchors.topMargin: 2
                width: 26

                height: 26
                color: "red"
                opacity: 0
                MouseArea {
                        anchors.fill: parent
                        onClicked: wrapper.state = ""
                }
                Text{
                    anchors.fill: parent
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    font.pixelSize: 26
                    text: "X"
                }
            }

            states:
                [
                State {
                    name: "expanded"
                    PropertyChanges { target: wrapper; height: listViewTest.height }
                    PropertyChanges { target: imageTest; width: listViewTest.width; height: listViewTest.height -200; anchors.rightMargin: 0; anchors.topMargin: 30 }
                    PropertyChanges { target: factsView; opacity: 1 }
                    PropertyChanges { target: closeButton; opacity: 1 }
                    PropertyChanges { target: wrapper.ListView.view; contentY: wrapper.y; interactive: false }
                }
            ]

            transitions: [
                Transition {
                    NumberAnimation {
                        duration: 200;
                        properties: "height,width,anchors.rightMargin,anchors.topMargin,opacity,contentY"

                    }

                }
            ]
        }
    }

}

遇到的问题

  • 点击没反应 expanded 状态拼写错误 导致状态切换不了
  • 图片设置高度不对 导致文本不显示

  • 包装状态切换被注释导致 显示有问题  导致切换条目显示不到图片下面 

 

第23篇 QML模型视图 之 代理（Delegate）
Fanjufei的博客
02-10 955
模型中每个元素通过代理来实现可视化。 视图绑定属性是ListView.isCurrentItem和ListView.view。 第一个是一个布尔值，标识这个元素是否是视图当前元素。 每个代理的背景颜色color依赖于绑定属性ListView.isCurrentItem。 例1： import QtQuick 2.9 import QtQuick.Window 2.2 Window { visible: true width: 800 height: 600 L
QML Model-View-Delegate视图框架
yang1fei2的博客
05-07 456
MVC(Model-View-Controller)模式将视图系统拆分为模型、视图、控制器三部分，每个部分都相对独立职责单一。模型(model)负责管理视图的数据并对外提供服务。视图(view)负责内容的呈现以及与用户的交互，控制器负责从模型拉取数据并通知视图更新显示。
QML代理（Delegate）
让每一个想学习编程的人，都能学会，都能看懂，看了都有收获!
05-04 1273
当使用模型与视图来自定义用户界面时，代理在创建显示时扮演了大量的角色。在模型中的每个元素通过代理来实现可视化，用户真实可见的是这些代理元素。 每个代理访问到索引号或者绑定的属性，一些是来自数据模型，一些来自视图。来自模型的数据将会通过属性传递到代理。来自视图的数据将会通过属性传递视图中与代理相关的状态信息。
QmlBook in chinese 编程之十一 ----（代理（Delegate））
比卡丘不皮的博客
10-29 961
代理（Delegate） 每个代理访问到索引号或者绑定的属性，一些是来自数据模型，一些来自视图。来自模型的数据将会通过属性传递到代理。来自视图的数据将会通过属性传递视图中与代理相关的状态信息。 通常使用的视图绑定属性是ListView.isCurrentItem和ListView.view。第一个是一个布尔值，标识这个元素是否是视图当前元素，这个值是只读的，引用自当前视图。通过访问视图，可以创建可复用的代理，这些代理在被包含时会自动匹配视图的大小。在下面这个例子中，每个代理的wid...
（5）qml--模型视图代理--（Model-View-Delegate）
weixin_52243202的博客
06-13 1627
⾸先，包装器（wrapper）的⾼度（height）被设置为链表视图（ListView）的⾼度。额外的间隔区域被⽤于添加更多的信息，这种机制使⽤⼀个状态来控制，当⼀个链表项展开时，代理项都能输⼊expanded（展开）状态，在这种状态下⼀些属性被改变。真正不同的地⽅是网格视图（GridView）使⽤了⼀个⼆维数组来存放元素，⽽链表视图（ListView）是使⽤的线性链表来存放元素。这个操作可以被⽤于动态的将当前项目填充到整个屏幕来添加⼀个新的⽤户界⾯，或者为链表中的当前项提供更多的信息。
qml中TreeView自定义数据类型，使在代理（Delegate）中能传递到更多的数据
10-10
qml中TreeView自定义数据类型，使在代理（Delegate）中能传递到更多的数据 具体可以访问博客https://www.jianshu.com/p/dc24d010e5e4
Qt/QML学习-模型视图代理
QT、QML
06-27 520
Qt/QML学习-模型视图代理
QML基础(三)-(模型-视图-代理)
yang1fei2的博客
04-14 3105
对于开发用户界面，最重要的就是保持数据与UI分离。数据通常被称为为model，可视化处理称作view。在QML中，model与view都通过delegate连接起来。功能划分如下，model提供数据，对于每个数据项，可能有很多个值。显示在view(视图)中的每项数据，都是通过delegate(代理)来实现可视化的。view(视图)的任务是排列这些delegate(代理),每个delegate(代理)将model item(模型项)的值呈现给用户。 一个模型可以是一个整数，提供给代理使用的索引值(i
QML 模型视图
青春不老，奋斗不止！
01-09 1165
对于 GUI 应用程序来说，我们通常需要格式化数据并进行显示，而 QML 提供了一种很便利的显示方式 - Model-View-Delegate（简称：MVD）。该模式是 Model-View-Controller（简称：MVC）的一种变体，常被用于分层开发，其优点在于可以很好地将数据模型和用户界面分离，使得数据的改变能够自动反映在界面上。
QML 委托控件：ItemDelegate、CheckDelegate、RadioDelegate、SwitchDelegate
最新发布
u011186532的专栏
03-17 1233
在QML的QtQuick.Controls模块中，委托（Delegate）控件是构建动态列表和交互式UI的关键组件。本文将深入解析四种常用委托控件：ItemDelegate、CheckDelegate、RadioDelegate和SwitchDelegate，帮助开发者快速掌握其特性与使用场景。
代理的基本使用（delegate）
weixin_34226182的博客
01-03 138
1.基本使用（1）定义一个协议 protocol TryShowDelegate { func returnString() func returnShowString(str:String) } （2）定义一个代理属性，遵守协议 class ViewController:UIViewController,TryShowDel...
QML控件类型：ItemDelegate、CheckDelegate、RadioDelegate、SwitchDelegate、SwipeDelegate
友善啊，朋友的博客
01-08 5028
ItemDelegate 一、描述 ItemDelegate 继承自 AbstractButton，是标准视图项。可以用作各种视图和控件中的委托，例如 ListView 和 ComboBox。 import QtQuick 2.14 import QtQuick.Window 2.14 import QtQuick.Controls Window { width: 640 height: 480 visible: true title: qsTr("Hello Wo
QML类型说明-DelegateModel
杞櫹椅桐的专栏
09-04 3804
DelegateModel ImportStatement:   import QtQml.Models 2.0   Properties count : int delegate :Component filterOnGroup: string groups :list items :DelegateModelGroup model :model parts :object
qml暴露delegate给外部使用
hu626626的博客
07-04 318
qml暴露Delegate给外部自定义
delegate代理
包子大叔的笔记
12-06 224
C#中的代理有点类似JAVA的接口 public delegate void GetSelect(DataTable dr);//定义代理, 相当于定义接口 //-------------------定义类--------------------- public GetSelect MyGetSelect ; //声明代理, 相当于声明接口 private vo...
11、QML的模型、视图和委托（Model, View, Delegate）
Master Cui的博客
12-31 4743
一、前言 Model-View-Controller (MVC) 是源自SmallTalk的一个设计模式，在构建用户界面时经常用到。把功能相近的部分归结在一起，不相近的部分进行隔离。MVC 将系统分解为模型、视图、控制器三部分，每一部分相对独立，职责单一，在实现过程中可以专注于MVC各自的核心逻辑。MVC的最基本的作用就是解耦。 模型（Model）代表数据。视图（View）代表界面的布局。控制器（Controller ）界面的具体显示样式，和用户进行具体的交互。 QML对Controller部分做了改
Delegate--代理
小白的秘密空间
08-23 228
Class ‘classa’ has no initializers 定义一个类的时候，有时候只想定义，不想初始化，可以加一个！，执行闭包语法。 第一步 //定义一个代理 protocol sayhelloDelegate { func sayHello(name: String) } 第二步 class classa { var delegate : sayhelloDeleg...
QML：使用Model/View框架时根据不同的数据项使用不同的delegate
imred的专栏
12-16 1928
Qt自带的QML使用Model/View框架的example中，展示数据使用的delegate（似乎）都是唯一的，不能根据不同的Model数据项使用不同的Item来展示。如果有这样一个需求：Model的数据项中有一个字段为itemType，展示数据时希望能够根据这个字段使用不同的Item来展示数据，能否实现呢？自然是可以的：我们可以将View的delegate字段设为一个Loader，然后让这个L...
QML delegate中使用Repeater
zjgo007的专栏
01-12 1150
在QML界面设计例如ListView中，通过设计delegate来显示代理model中的数据，在delegate中使用属性绑定的方式将model中对象的值显示出来，但如果delegate中使用了Repeater，此时delegate中的model为Repeater的model，显示数据就会出现错误，因此用个小方法： 在delegete中添加属性myModel，将delegate的model赋值于myModel
Qt6 QML模型视图示例源码分享
资源摘要信息:"本资源是一份关于Qt6 QML的模型视图示例源码，文件格式为7z压缩包。资源名为'model_view_example_src.7z'，适用于对Qt6和QML感兴趣的开发者或爱好者。请注意，CSDN作为资源的审核平台可能在审核过程中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值