We can use the reviews PreviewWidget to display and evaluate our results. For example, for reviews, if the rating is 5 stars, we can show that 5 stars indicate the highest customer recognition of the product.

\

Looking at our API connection, we can see the following code:

\

{
    PreviewWidget w1("summary"."reviews");
    w1.add_attribute_value("rating-icon-empty".Variant("file:///tmp/star-empty.svg"));
    w1.add_attribute_value("rating-icon-full".Variant("file:///tmp/star-full.svg"));
    VariantBuilder builder;
    builder.add_tuple({{"author".Variant("John Doe")},
        {"rating".Variant(3)}}); builder.add_tuple({{"author".Variant("Mr. Smith")},
        {"rating".Variant(5)}}); w1.add_attribute_value("reviews", builder.end()); . }Copy the code

Although the self-defined images “rating-icon-empty” and “rating-icon-full” are used here, I think it is generally not recommended to use them, although customization can be achieved. The reason is that we have to design our images in strict accordance with the Ubuntu standard icon, so that the display can be correct!

\

Combined with the above code, we use the following code in our own code:

\

    PreviewWidget review("reviews"."reviews");
    VariantBuilder builder;
    builder.add_tuple({{"author".Variant("John Doe")},
                          {"review".Variant("very good")},
                          {"rating".Variant(3.5)}}); builder.add_tuple({{"author".Variant("Mr. Smith")},
                          {"review".Variant("very poor")},
                          {"rating".Variant(5)}}); review.add_attribute_value("reviews", builder.end());
    widgets.emplace_back(review);
Copy the code

Here we have added an item “review” to indicate a textual review of the product. We are not using any custom images here, it is the system’s own image by default.

\

Run our Scope and it will look like this:

\

  \

\

The entire project source at: github.com/liu-xiao-gu…