利用Ubuntu Component Store来增加我们的QML Components

Elastic 中国社区官方博客

于 2015-09-28 10:54:50 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/ubuntutouch/article/details/48781753

移动开发同时被 2 个专栏收录

268 篇文章

订阅专栏

QML

185 篇文章

订阅专栏

本文介绍如何通过Ubuntu Component Store 安装并使用预先做好的QMLComponents，简化应用设计过程，提高开发效率。通过安装、创建项目及引入组件，展示了一款名为CircleImage的QML组件的使用方法，并提供了实际代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们可以在地址https://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，我们也希望大家能够分享出来供更多的人使用．分享知识是一种快乐！

整个项目的源码在： https://github.com/liu-xiao-guo/circleimage