qml----Model/View入门(七)GridView

本文介绍了一个使用GridView展示数据的示例,通过将XMLListModel中的数据以图标形式显示在GridView中,展示了如何设置数据源、角色映射及视图委托。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  gridview和listview相似,只不过是呈现的方式不同,可以把grideview理解成 IconMode的呈现方式,下面是个使用gridview的例子,作为Model,仍然使用xmlListModel中的数据

  

import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.XmlListModel 2.0

Rectangle {
    width: 400
    height: 400

    Component{
        id: videoModel
        XmlListModel{
            id: xmlModel
            source: "videos.xml"
            query: "/videos/video"
            XmlRole{name: "name"; query: "@name/string()"}
            XmlRole{name: "img"; query: "poster/@img/string()"}
            XmlRole{name: "rating"; query: "attr[3]/number()"}
        }
    }//video model is end

    Component{
        id: videoDelegate
        Item{
            id: wrapper
            width: videoView.cellWidth
            height: videoView.cellHeight
            MouseArea{
                anchors.fill: parent
                onClicked: wrapper.GridView.view.currentIndex = index
            }

            Image {
                id: poster
                width: 100
                height: 150
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                anchors.topMargin: 3
                fillMode: Image.PreserveAspectFit
                source: img
            }

            Text{
                anchors.top: poster.bottom
                anchors.topMargin: 4
                width: parent.width

                text: name
                color: wrapper.GridView.isCurrentItem ? "blue" : "black"
                font.pixelSize: 18
                horizontalAlignment: Text.AlignHCenter
                elide: Text.ElideMiddle
            }

        }
    }//video model is end

    GridView{
        id: videoView
        anchors.fill: parent
        cellWidth: 120
        cellHeight: 190

        delegate: videoDelegate
        model: videoModel.createObject(videoView)
        focus: true
        highlight: Rectangle{
            color: "lightblue"
        }
    }
}

 

  效果如如下:

  

 

转载于:https://www.cnblogs.com/SaveDictator/p/8244513.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值