qml----Model/View入门（七）GridView

最新推荐文章于 2025-11-03 23:08:36 发布

转载最新推荐文章于 2025-11-03 23:08:36 发布 · 831 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/SaveDictator/p/8244513.html

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

　　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