利用gallery在Ubuntu Scope中顯示多張圖片

在這篇文章中，我們將介紹如何使用gallery PreviewWidget在Scope Preview中顯示多幅圖片。更多關於PreviewWidget類型可以參閱API。

首先，我們來下載我們上一節課裡講到的scopetemplate常式：

https://github.com/liu-xiao-guo/scopetemplates_video

為了能夠顯示多幅圖片，我們對我們的程式做了如下的修改：

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:
     

整個項目的源碼在：https://github.com/liu-xiao-guo/scopetemplates_gallery