我们可以在地址ubuntu-component-store.readthedocs.org/en/latest/发现有很多已经做好的QML Components．它们目前还不在我们的标准的QML Components里．在今天的文章了，我们来介绍如何使用这个QML的Components使得我们在有些应用的设计中更加事半功倍！
\
１）UCS安装
\
就像在文章＂ Installation Guide＂中介绍的那样，我们需要首先安装ucs:
\
$ sudo add-apt-repository ppa:ubuntu-touch-community-dev/ppa
$ sudo apt-get update
$ sudo apt-get install ucs
安装完ucs后，我们就可以用如下的命令来寻找我们所关心的Component了，比如：
\
$ ucs search state
Matching curated components:
EmptyState
Matching community components:
(no matches)
$ ucs search podcast
Matching curated components:
(no matches)
Matching community components:
sil/GenericPodcastApp A component which manages a podcast RSS feed, with playback and display of episodes
当然最直接的办法就是打开 链接最直观地看到所有的Components了．
\
\
２）创建我们的QML项目
\
我们使用安装好的SDK来创建一个我们的项目，比如circleimage．等我们创建好我们的项目后，我们在我们的项目的根目录下，打入如下的指令：
\
$ ucs install CircleImage
\
注意，我们一定要先创建好自己的项目，才可以打入上面的命令．
\
\
\
在我们的项目的根目录下，我们发现一个新增加的目录．它的名字叫＂ ubuntu_component_store＂．这里就是我们刚才安装CircleImage时创建的目录．
\
接下来，安装 CirleImage的API介绍，我们可以做如下的代码：
\
Main.qml
\
import QtQuick 2.0
import Ubuntu.Components 1.1
import ubuntu_component_store.Curated.CircleImage 1.0
/*!
\brief MainView with a Label and Button elements.
*/
MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"
// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "circleimage.liu-xiao-guo"
/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true
// Removes the old toolbar and enables new features of the new header.
useDeprecatedToolbar: false
width: units.gu(60)
height: units.gu(85)
Page {
title: i18n.tr("circleimage")
Column {
anchors.centerIn: parent
spacing: units.gu(3)
Image {
width: units.gu(30)
height: width
source: "images/pic.jpg"
}
CircleImage {
width: units.gu(30)
height: width
source: Qt.resolvedUrl("images/pic.jpg")
}
}
}
}
\
首先，我们import的如下的模块：
\
import ubuntu_component_store.Curated.CircleImage 1.0
\
这样我们才可以利用CircleImage来实现我们想要的功能．我们在例程中的最上面使用了原本的图，在下面展示了一个圆形的图．
\
运行我们的代码：
\
\
\
我们可以依照这样的方法，逐一去试一试其它的QML Component．更多的实验交给我们的小伙伴吧！当然如果大家做了一个更好的QML Component，我们也希望大家能够分享出来供更多的人使用．分享知识是一种快乐！
\
整个项目的源码在： github.com/liu-xiao-gu…
\
\
\
\
