在这篇文章中，我们将介绍如何使用gallery PreviewWidget在Scope Preview中显示多幅图片。更多关于PreviewWidget类型可以参阅API。
\
首先，我们来下载我们上一节课里讲到的scopetemplate例程：
\
\
为了能够显示多幅图片，我们对我们的程序做了如下的修改：
\
query.cpp
\
// add an array to show the gallary of it
sc::VariantArray arr;
for(const auto &datum : icons_) {
arr.push_back(Variant(datum.toStdString()));
}
r["array"] = sc::Variant(arr);
在这里，我们把我们本地的图片压入到一个VariantArray中，并写入到“array”字段里。
\
\
preview.cpp
\
Result result = PreviewQueryBase::result();
PreviewWidget listen("tracks", "audio");
{
VariantBuilder builder;
builder.add_tuple({
{"title", Variant("This is the song title")},
{"source", Variant(result["musicSource"].get_string().c_str())}
});
listen.add_attribute_value("tracks", builder.end());
}
PreviewWidget video("videos", "video");
video.add_attribute_value("source", Variant(result["videoSource"].get_string().c_str()));
video.add_attribute_value("screenshot", Variant(result["screenshot"].get_string().c_str()));
sc::PreviewWidget header_gal("gallery_header", "header");
header_gal.add_attribute_value("title", Variant("Gallery files are:"));
PreviewWidget gallery("gallerys", "gallery");
gallery.add_attribute_value("sources", Variant(result["array"]));
PreviewWidgetList widgets({ image, header, description });
if ( result["musicSource"].get_string().length() != 0 ) {
widgets.emplace_back(listen);
}
if( result["videoSource"].get_string().length() != 0 ) {
widgets.emplace_back(video);
}
if( result["array"].get_array().size() != 0 ) {
widgets.emplace_back(header_gal);
widgets.emplace_back(gallery);
}
reply->push( widgets );
\
在这里，我们创建了一个新的header叫做header_gal。它用来向我们提示一个header,同时，我们直接使用：
\
PreviewWidget gallery("gallerys", "gallery");
gallery.add_attribute_value("sources", Variant(result["array"]));
或
\
PreviewWidget gallery("gallerys", "gallery");
gallery.add_attribute_mapping("sources", "array");
把array字段的内容映射到sources里，这样就可以让gallery得到正确的显示：
\
运行我们的Scope:
\
\
\
整个项目的源码在：github.com/liu-xiao-gu…
\
