为Ubuntu Touch [QML]创建应用-[第1部分]

简介

这是一系列的帖子（就像我做过的一样 瓦拉），但这次有一个 Ubuntu Touch，则应用程序最初与 来自的帖子 瓦拉，即一种游戏，我们有一个问题和4个测试形式的答案，然后我们有50个按钮，一个按钮消除了两个可能的答案（XNUMX％），另一个按钮冻结了时间，最后一个冻结了从问题出发。

要了解如何开始创建项目，您可以访问此 发表 （文档，创建项目...），因为我们将从已创建的项目开始。

基础知识

要创建应用，我们将使用以下组件 Ubuntu尽管我们可以创建自己的组件，但在这种情况下我们不会。

Ubuntu组件是我们将用于应用程序的组件：

要相同地使用它们，我们必须导入模块：

导入Ubuntu.Components 0.1

我们可以在组件中找到不同的元素，例如按钮，进度条等。 我们可以下载一个项目，其中它们向我们展示了大多数这些组件：

bzr分支 lp：ubuntu-ui-toolkit 

设计应用

我们从创建应用程序的图像开始 GTK，在这种情况下，我们将使用 质量管理语言，实际上我们将使用 Qt快速 (质量管理语言 + JavaScript的).

该应用程序与图像一样，将包含一个问题，时间，答案，选项和要点。 唯一的区别（除“样式”之外）是上面的标签。

为此，我们将使用button，label和progressBar元素。 对于结构，我们将使用Element 柱 y 行。

设计主屏幕的布局：

我们从MainView开始，在其中可以找到不同的选项卡，在这种情况下，我们将处理应用程序初始屏幕的布局。

MainView {objectName：“ mainView” // ...}

尺寸（适用于Ubuntu Touch):

宽度：units.gu（50）高度：units.gu（75）

我们定义应用程序的长度和宽度，其中宽度将为50（单位），长度为75，现在我们将为其赋予颜色：

headerColor：“＃57365E” backgroundColor：“＃A55263” footerColor：“＃D75669”

我们具有页眉，正文和页脚的颜色：

如前所述，该应用程序将由Tabs构成：

    标签{id：标签集{objectName：“ jocTab”} / *添加{objectName：“ addQuestions”} * /}

如我们所见，我们有两个选项卡，一个已注释（尚未创建），另一个正在播放（现在将创建）。 要创建所述Tab，我们将创建一个新的qml文件（添加新的-> Qt-> QML文件->…），该文件的名称为 Game.qml.

好吧，让我们以以下方式修改Game.qml，将其变成一个Tab，其中里面有一个页面（Page）：

导入QtQuick 2.0导入Ubuntu.Components 0.1 Tab {title：i18n.tr（“游戏”）页面{}}

在页面中，我们将开始构建设计中提到的元素。 一列将包含所有内部元素的列（它将垂直放置），然后我们将这些元素按顺序放置：Label，ProgressBar，4个按钮； 并放置选项，我们将使用Row元素将其水平放置。

列{anchors.top：Gamepage.top anchors.topMargin：50间距：15宽度：parent.width高度：parent.height-50标签{id：问题anchors.topMargin：500文字：“问题？” anchors.horizo​​ntalCenter：parent.horizo​​ntalCenter fontSize：“ large” font.bold：true} ProgressBar {id：时间anchors.horizo​​ntalCenter：parent.horizo​​ntalCenter}按钮{id：resp1文本：“响应1” anchors.horizo​​ntalCenter：parent.horizo​​ntalCenter}按钮{id：resp2文本：“响应2” anchors.horizo​​ntalCenter：parent.horizo​​ntalCenter}按钮{id：resp3文本：“响应3” anchors.horizo​​ntalCenter：parent.horizo​​ntalCenter}按钮{id：resp4文本：“响应4” anchors .horizo​​ntalCenter：parent.horizo​​ntalCenter}行{spacing：15 anchors.horizo​​ntalCenter：parent.horizo​​ntalCenter按钮{id：b50文本：“ 50％”}按钮{id：bCon文本：“冻结”}按钮{id：b下一个文本：“下一页“}}行{间距：15 anchors.horizo​​ntalCenter：parent.horizo​​ntalCenter标签{id：失败文本：”失败：0“颜色：”红色“}标签{id：命中文本：”命中：0“}标签{id ：点文字：“点：0” fontSize：“ medium”}}

让我们看看用{}分隔的每个元素如何具有不同的属性，对于标签和按钮，我们可以看到“ text”属性是它显示的文本，一个重要的非可视属性是标识符“ id»”，这将在我们实现应用程序逻辑时为我们提供帮助。

最后，我们可以看到结果：