QML 列表，图片展示（一）

文章目录

1.QML 列表，图片展示效果图
2.项目基本说明
3.项目详解
- 3.1界面显示部分
- 3.2 网络部分
4.源代码
5.flickr图片查询链接，后面我们将调整代码，获取更多图片

1.QML 列表，图片展示效果图

在这里插入图片描述

2.项目基本说明

该项目来自Qt示例程序 PhotoViewer
QML照片查看器，使用XmlListModel和XmlRole下载Flickr提要，使用Package在不同视图中显示照片。
使用自定义类型创建屏幕和屏幕控件。
从https://www.flickr.com/拉去网络图片

3.项目详解

3.1界面显示部分

指定初始加载哪些图片标题

    ListModel {
        id: photosModel
        ListElement { tag: "Flowers" }
        ListElement { tag: "Wildlife" }
        ListElement { tag: "Prague" }
        ListElement { tag: "狗" }
    }

使用GridView以网格形式布局相册

    GridView {
        id: albumView; width: parent.width; height: parent.height; cellWidth: 210; cellHeight: 220
        model: albumVisualModel.parts.album; visible: albumsShade.opacity != 1.0
    }

随机旋转照片显示的角度

    Item {
        width: 160; height: 153

        Item {
            id: photoWrapper

            property double randomAngle: Math.random() * (2 * 6 + 1) - 6
            property double randomAngle2: Math.random() * (2 * 6 + 1) - 6

            x: 0; y: 0; width: 140; height: 133
            z: stackItem.PathView.z; rotation: photoWrapper.randomAngle

照片边框

 BorderImage {
                anchors {
                    fill: originalImage.status == Image.Ready ? border : placeHolder
                    leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8
                }
                source: 'images/box-shadow.png'
                border.left: 10; border.top: 10; border.right: 10; border.bottom: 10
            }

在 main.qml 中，我们使用ProgressBar自定义类型来指示全屏打开照片的高质量版本时的进度：

ProgressBar {
        progress: mainWindow.downloadProgress; width: parent.width; height: 4
        anchors.bottom: parent.bottom; opacity: mainWindow.imageLoading; visible: opacity != 0.0
    }

3.2 网络部分

RssModel.qml ，使用XmlListModel类型作为数据源Package从选定的源下载照片的对象，tags自定义属性来指定要下载哪些照片。encodeTags自定义函数使用encodeURIComponentJavaScript 方法确保对服务器的请求格式正确。

import QtQuick.XmlListModel 2.0

XmlListModel {
    property string tags : ""

    function encodeTags(x) { return encodeURIComponent(x.replace(' ',',')); }

XmlRole，每个模型项都：title、content、hq

    XmlRole { name: "title"; query: "title/string()" }
    XmlRole { name: "content"; query: "content/string()" }
    XmlRole { name: "hq"; query: "link[@rel='enclosure']/@href/string()" }

4.源代码

demos/photoviewer/PhotoViewerCore/AlbumDelegate.qml
demos/photoviewer/PhotoViewerCore/BusyIndicator.qml
demos/photoviewer/PhotoViewerCore/Button.qml
demos/photoviewer/PhotoViewerCore/EditableButton.qml
demos/photoviewer/PhotoViewerCore/PhotoDelegate.qml
demos/photoviewer/PhotoViewerCore/ProgressBar.qml
demos/photoviewer/PhotoViewerCore/RssModel.qml
demos/photoviewer/PhotoViewerCore/Tag.qml
demos/photoviewer/main.cpp
demos/photoviewer/main.qml
demos/photoviewer/photoviewer.pro

5.flickr图片查询链接，后面我们将调整代码，获取更多图片

https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=你的APIKey&extras=title,content,hq&tags=%E7%BE%8E%E5%A5%B3
这里使用的API KEY需要自行申请！
返回结果
获取具体一张图片
https://www.flickr.com/photos/34028270@N07/53804519285

<rsp stat="ok">
<photos page="1" pages="3098" perpage="100" total="309720">
<photo id="53804519285" owner="34028270@N07" secret="1092a0d0f5" server="65535" farm="66" title="人像外拍" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53798000815" owner="99002729@N07" secret="b107acf768" server="65535" farm="66" title="DSC_9954" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53797814740" owner="189973723@N07" secret="ec3f77429a" server="65535" farm="66" title="DSC05774 1" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53797795485" owner="189973723@N07" secret="46d22311f4" server="65535" farm="66" title="DSC05795" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53797110211" owner="99002729@N07" secret="99d7b0a4b6" server="65535" farm="66" title="DSC_9943" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53797164390" owner="99002729@N07" secret="cb876a1ec7" server="65535" farm="66" title="DSC_9935" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53796612576" owner="189973723@N07" secret="3634806e6e" server="65535" farm="66" title="DSC05419" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53795661962" owner="189973723@N07" secret="cd376d4211" server="65535" farm="66" title="DSC05460" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53796816598" owner="189973723@N07" secret="30ae1b24bb" server="65535" farm="66" title="DSC05645" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53796794718" owner="189973723@N07" secret="de38d87864" server="65535" farm="66" title="DSC05808" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53796570316" owner="189973723@N07" secret="9a3205b13b" server="65535" farm="66" title="DSC05797" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53796834995" owner="99002729@N07" secret="c172bcd2da" server="65535" farm="66" title="DSC_9930" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53796320114" owner="99002729@N07" secret="fc57b75174" server="65535" farm="66" title="DSC_9914" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53795563689" owner="99002729@N07" secret="3ca2bee176" server="65535" farm="66" title="DSC_9896" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53794896534" owner="99002729@N07" secret="af5940c1e7" server="65535" farm="66" title="DSC_9868" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53794467579" owner="99002729@N07" secret="cb32f339e8" server="65535" farm="66" title="DSC_9861" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53794115953" owner="99002729@N07" secret="5c45513b20" server="65535" farm="66" title="DSC_9857" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53792064147" owner="99002729@N07" secret="9d1bba8620" server="65535" farm="66" title="DSC_9848" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53792847058" owner="99002729@N07" secret="7c52c724f2" server="65535" farm="66" title="DSC_9841" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53792349221" owner="99002729@N07" secret="cf87117a07" server="65535" farm="66" title="DSC_9802" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53792091891" owner="34028270@N07" secret="17a11cfbd4" server="65535" farm="66" title="人像棚拍" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53792400974" owner="34028270@N07" secret="65dfd4ef23" server="65535" farm="66" title="人像棚拍" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53792305858" owner="34028270@N07" secret="fc60d59713" server="65535" farm="66" title="人像棚拍" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53792400999" owner="34028270@N07" secret="4f909f73d3" server="65535" farm="66" title="人像棚拍" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53792305853" owner="34028270@N07" secret="36c6199a4d" server="65535" farm="66" title="人像棚拍" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53792302463" owner="99002729@N07" secret="64365d7dc7" server="65535" farm="66" title="DSC_9791" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53790773447" owner="99002729@N07" secret="be7f6c4d27" server="65535" farm="66" title="DSC_9781" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53791358699" owner="99002729@N07" secret="4434a8f876" server="65535" farm="66" title="DSC_9772" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53790611726" owner="99002729@N07" secret="e80021ba3a" server="65535" farm="66" title="DSC_9759" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53790970540" owner="189973723@N07" secret="2745dbac35" server="65535" farm="66" title="DSC05093" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53790862024" owner="189973723@N07" secret="40b8816fc7" server="65535" farm="66" title="DSC05181" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53790970520" owner="189973723@N07" secret="47e812a44c" server="65535" farm="66" title="DSC05533" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53790766068" owner="189973723@N07" secret="67f670eafe" server="65535" farm="66" title="DSC05326" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53790766033" owner="189973723@N07" secret="f04c30267c" server="65535" farm="66" title="DSC05571" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53790688814" owner="99002729@N07" secret="5ab9c23f9c" server="65535" farm="66" title="DSC_9749" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53790220323" owner="99002729@N07" secret="febe74fa68" server="65535" farm="66" title="DSC_9739" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53790118265" owner="99002729@N07" secret="1bafcdcefd" server="65535" farm="66" title="DSC_9734" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53789236879" owner="99002729@N07" secret="2fbcc97d67" server="65535" farm="66" title="DSC_9719" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53788419296" owner="34028270@N07" secret="8bc7a2bf07" server="65535" farm="66" title="Computex SG" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53788708329" owner="99002729@N07" secret="c1e1a6e078" server="65535" farm="66" title="DSC_9652" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53788301913" owner="99002729@N07" secret="12ebaef048" server="65535" farm="66" title="DSC_9640" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53788167878" owner="189973723@N07" secret="fd8afcdc02" server="65535" farm="66" title="DSC05000" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53788167858" owner="189973723@N07" secret="5cc279a794" server="65535" farm="66" title="DSC05030" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53787954356" owner="189973723@N07" secret="796e8f10dc" server="65535" farm="66" title="DSC05043" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53787954331" owner="189973723@N07" secret="d1065703c0" server="65535" farm="66" title="DSC05037" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53788371390" owner="189973723@N07" secret="91217eab15" server="65535" farm="66" title="DSC05242" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53788268804" owner="189973723@N07" secret="0a15a53ba2" server="65535" farm="66" title="DSC05066" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53787011862" owner="189973723@N07" secret="30ea5f68c8" server="65535" farm="66" title="DSC05103" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53787011807" owner="189973723@N07" secret="ff52d3c48c" server="65535" farm="66" title="DSC05051" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53788081228" owner="99002729@N07" secret="c70a8350ba" server="65535" farm="66" title="DSC_9635" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53787739963" owner="99002729@N07" secret="4de9503d52" server="65535" farm="66" title="DSC_9627" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53784755004" owner="34028270@N07" secret="4011391a08" server="65535" farm="66" title="人像棚拍" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53783485802" owner="34028270@N07" secret="00486abcb6" server="65535" farm="66" title="人像棚拍" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53784848660" owner="34028270@N07" secret="f3afd86db7" server="65535" farm="66" title="人像棚拍" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53781299239" owner="135177936@N03" secret="993a654667" server="65535" farm="66" title="1O0A5429L" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53781401280" owner="135177936@N03" secret="c89b8e3dea" server="65535" farm="66" title="1O0A5414L" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53780045717" owner="135177936@N03" secret="3a04eeae23" server="65535" farm="66" title="1O0A5419L" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53781299194" owner="135177936@N03" secret="c945b90d01" server="65535" farm="66" title="1O0A5413L" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53781299204" owner="135177936@N03" secret="36a1a06025" server="65535" farm="66" title="1O0A5430L" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53781360575" owner="135177936@N03" secret="377d17cb61" server="65535" farm="66" title="1O0A5224L" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53780937361" owner="135177936@N03" secret="4c21f744e0" server="65535" farm="66" title="1O0A5306L" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53780004737" owner="135177936@N03" secret="ea9c2d1a77" server="65535" farm="66" title="1O0A5225L" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53781259124" owner="135177936@N03" secret="9895916582" server="65535" farm="66" title="1O0A5226L" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53781360510" owner="135177936@N03" secret="cd537e30c9" server="65535" farm="66" title="1O0A5231L" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53780004707" owner="135177936@N03" secret="d7c8beea1b" server="65535" farm="66" title="1O0A5235L" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53780004617" owner="135177936@N03" secret="e8fc924522" server="65535" farm="66" title="1O0A5287L" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53781258949" owner="135177936@N03" secret="65d3e733bd" server="65535" farm="66" title="1O0A5304L" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53781360420" owner="135177936@N03" secret="8e12d6ee7c" server="65535" farm="66" title="1O0A5284L" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53780937166" owner="135177936@N03" secret="d99ebd1f9e" server="65535" farm="66" title="1O0A5303L" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53779521258" owner="118906861@N02" secret="d6cd4f1f8c" server="65535" farm="66" title="DSC_3280 拷貝" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53779728620" owner="118906861@N02" secret="88c0bc8743" server="65535" farm="66" title="DSC_3255 拷貝" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53779521243" owner="118906861@N02" secret="c325943ec2" server="65535" farm="66" title="DSC_3261 拷貝" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53779521188" owner="118906861@N02" secret="a24aac187f" server="65535" farm="66" title="DSC_3256 拷貝" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53779521178" owner="118906861@N02" secret="497828314e" server="65535" farm="66" title="DSC_3252 拷貝" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53778380607" owner="118906861@N02" secret="ced022436f" server="65535" farm="66" title="DSC_3182 拷貝" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53778380567" owner="118906861@N02" secret="d6a7ea69bb" server="65535" farm="66" title="DSC_3130 拷貝" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53779521148" owner="118906861@N02" secret="4f4281feaf" server="65535" farm="66" title="DSC_3145 拷貝" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53779631189" owner="118906861@N02" secret="5f4544136c" server="65535" farm="66" title="DSC_3197 拷貝" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53779576919" owner="34028270@N07" secret="62faa661d3" server="65535" farm="66" title="_DSC4643-14" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53779466168" owner="34028270@N07" secret="84cebc5ef0" server="65535" farm="66" title="_DSC4866-1" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53779254471" owner="34028270@N07" secret="0f8dd12e68" server="65535" farm="66" title="_DSC4666-1" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53779466148" owner="34028270@N07" secret="ca3bc39411" server="65535" farm="66" title="_DSC4741-23" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53779466153" owner="34028270@N07" secret="6454e8fc09" server="65535" farm="66" title="_DSC4658-17" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53778346686" owner="128904682@N05" secret="84b957cecf" server="65535" farm="66" title="" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53768637233" owner="99002729@N07" secret="374f27eb18" server="65535" farm="66" title="DSC_8363" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53768513835" owner="99002729@N07" secret="01973afcd3" server="65535" farm="66" title="DSC_8359" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53767885253" owner="99002729@N07" secret="d5158cd90a" server="65535" farm="66" title="DSC_8346" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53767207894" owner="99002729@N07" secret="6ce5c7b186" server="65535" farm="66" title="DSC_8334" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53766321835" owner="128904682@N05" secret="155d15aff1" server="65535" farm="66" title="" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53765908681" owner="128904682@N05" secret="b850c3b830" server="65535" farm="66" title="" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53766100243" owner="128904682@N05" secret="7ea47ac9bb" server="65535" farm="66" title="" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53765908706" owner="128904682@N05" secret="4548bb2251" server="65535" farm="66" title="" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53766321775" owner="128904682@N05" secret="cd4394f3d9" server="65535" farm="66" title="" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53764998487" owner="128904682@N05" secret="7c67463fe1" server="65535" farm="66" title="" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53766228745" owner="99002729@N07" secret="6ab9d56bf1" server="65535" farm="66" title="DSC_8315" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53764425678" owner="99002729@N07" secret="58fb364b61" server="65535" farm="66" title="DSC_8255" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53763929398" owner="99002729@N07" secret="75e1a23c4e" server="65535" farm="66" title="DSC_8251" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53763707284" owner="99002729@N07" secret="bc19843768" server="65535" farm="66" title="DSC_8188" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53763313123" owner="99002729@N07" secret="1040d17b3a" server="65535" farm="66" title="DSC_8179" ispublic="1" isfriend="0" isfamily="0"/>
<photo id="53763110243" owner="34028270@N07" secret="7b8187c37e" server="65535" farm="66" title="人像棚拍" ispublic="1" isfriend="0" isfamily="0"/>
</photos>
</rsp>