介绍Qt Design Studio 1.5中的画面流模式-第1篇

本文翻译自Introducing Flow Mode in Qt Design Studio 1.5 - Part 1
原文作者：* Cronin
校审：Mark Wang

在Qt Design Studio 1.5发布后，您可以尝试一个全新的模式：Page Flow。在这一系列博文的第一篇，我们将介绍Page Flow模式的基本用法以及入门，最后我们将介绍在Qt Design Studio的下一个版本中计划推出的高级特性。

什么是Flow Mode（画面流模式）?

画面流可以描述为应用程序中画面的示意视图，有点类似于用于可视化编程的节点图，尽管它是专门为创建UI画面流的任务而实现的。画面流图本身用于显示每个画面以及它是如何连接到其他画面，以及通过应用程序连接到用户的可能路径。传统上，设计师将创建这些画面流模板作为模拟设计，用于表示应用程序流程的概念。随着Sketch等工具的出现，设计师可以将创建的画面流图作为一种交互式原型来运行，通过点击可以模拟应用程序的用户体验。但是画面流的实际逻辑仍然需要开发人员从头开始重新实现。

Design Studio中的画面流为这一问题提供了更完整的端到端的解决方案。他们允许设计师在熟悉的节点式视觉编程风格上建模画面流，从而快速构建出一个完整的应用程序原型。QML代码是在后台创建的，这允许设计人员扩展其画面流的功能，超出传统设计工具固有的限制。最终的结果是一个高保真的原型和功能代码，开发人员可以将其用作应用程序生产版本的基础。

在Qt Design Studio中创建一个画面流–基础教学。

创建您的第一个画面流

您可以在现有项目或新项目中创建画面流，要开始使用画面流模式，您需要在项目中通过“file menu/ new file or project”向导添加以下条目。

创建Flow View

您需要的第一个文件是一个名为Flow View的新的QML类型的文件，这是将把UI的所有画面连接在一起的画布。创建项目后，可以通过向导转到add new file来添加该文件，在Qt Quick Files部分中可以找到流中使用的新QML类型。

创建Flow Items

接下来，您需要一个可以由画面流模式使用的新类型的画面，即Flow Item。您也可以通过向导创建这些文件，这些文件是一种可以插入Flow View的UI.QML文件。

创建画面内容

向Flow Items添加内容与在Qt Design Studio中设计任何普通画面的工作原理相同，因为这些Flow Item文件只是一种UI.QML文件，这意味着您可以以与普通UI文件完全相同的方式使用它们。它们可以包含子组件、quick控件、动画和可以添加到普通UI文件中的所有其他内容。唯一真正的区别是这些文件可以通过Flow View展示，所以当您查看QML库时，这些特殊组件是在My QML Components面板中唯一可见的项。

向画面流视图中添加文件

从组件库里拖动Flow Item到Flow View就有了第一个画面，当然你需要至少两个画面才能使画面流正常工作，在你有了第二个画面之后就可以开始正常使用Flow View了。

添加操作区域

操作区域可以以两种方式工作，第一种是作为一个简单的可点击区域，它启动过渡，这是使用画面流编辑器进行原型化开发的最简单方法，因此这是我们在这里要重点讨论的内容。操作区域的另一个用途是，你可以在流画面或任何子组件里连接任何信号，例如在你的画面上有一个onPressed信号的按钮。在本博客的第一部分中，我们将查看简单的用例，然后在第二部分中，我们将查看更高级的用例。

连接画面

一旦你有了一个操作区域你可以用它来连接到另一个画面上，可以通过双击操作区域，然后拖行连接线到另一个画面并释放，也可以通过使用Flow View的上下文菜单找到所有相关的控件。将画面连接在一起之后，您就有了第一个画面流，现在可以运行实时预览，并单击操作区域隐藏的按钮(在实时预览中不可见)，以查看第一个过渡的可用预览。

添加效果

一旦过渡就绪，就可以为其添加效果。您可以直接选择转换，回到上下文菜单并为该过渡选择一个效果。一旦效果被应用，你可以通过属性面板编辑效果，对于许多效果有一个过渡方向，它定义了新画面将从哪个方向出现。您可以设置效果的持续时间，并且可以启动曲线设计器来对该效果应用自定义的缓和曲线。

编辑效果

要返回并编辑之前应用的效果，可以选择过渡，转到上下文菜单并选择效果，这会将效果控件带回到属性面板中。

返回

Qt Design Studio的画面流的一个特别之处就是增加了一个后退按钮，在很多情况下你的画面流画面间会有许许多多的连接，通常您必须为每一个潜在的连接画面显式的创建连接线路，这会导致一个令人迷惑的混乱图表。在Qt Design Studio中，你可以简单地设置一个动作为“Go Back”，它总是会让你回到上一个画面。

在Live Preview中预览

与Qt Design Studio中的所有界面一样，您可以通过Live Preview实时预览你的更改，只需运行预览并继续在画面流上开发，您的更改将实时更新，您可以在Live Preview窗口中直接测试它们。

外观

Flow View属性允许您调整画面流中的所有项目包括连接线、操作区域和高级节点(如决策和通配符)的外观。您可以为所有项目更改全局设置，你也可以选择一个单独的行，节点或行动区域并仅更改当前项的外观,包括颜色、厚度、虚线或实线甚至连接的曲线，从而允许您为流程图本身的设计添加额外的语义。

决策

任何复杂的UI都有部分是条件逻辑用于向用户呈现其状态或收集和处理各种数据源、来自多种输入（如物理按钮和控件、来自一系列设备的传感器读数或来自后端或服务端的通用数值。有了Decision Nodes，您可以通过向用户提供选项列表来模拟这些条件中的任何一种，从而使您能够在获得生产所需的物理控制、后端或传感器数据之前对复杂的交互进行原型化开发。将来，您将能够将这些决策与实际后端支持的值或事件列表联系起来，将您的原型工作向实际生产代码的早期状态转移。

第二篇预告

在这一系列博客的第二篇，我们将介绍如何使用在画面流编辑器的下一次迭代计划加入的高级特性。

通配符

我们注意到，现实UI的另一个常见功能在传统的画面流设计工具中没有得到很好的处理，那就是基于条件事件，画面可以在任何时间、任何地点出现。以智能手机上的推送通知或您汽车的HMI来电画面为例。使用通配符，您可以在画面流中建模这种类型的画面，使用真实的或模拟的信号和条件，允许您将画面流概念，超越传统的障碍。我们在这里计划的另一个用例是包含这些通配符事件的白清单和黑清单。为了继续我们的示例，我们汽车上的来电画面，我们假设画面流中的某处有一个引擎警告画面，它也使用通配符，如果收到信号，它可以在任何时间进入任何画面。现在我们将把这个引擎警告画面添加到我们的来电画面的黑名单中。这意味着现在我们的来电画面可以出现在引擎警告画面之外的任何画面上。

有了这些工具，你就可以开始模拟一个真正复杂的UI，将远远超出简单的点击虚拟模型和低保真原型。

连接来自组件的信号。

简单的可点击区域对于原型设计非常合适，但是当我们想使用来自UI画面的真实信号来控制应用程序流时，该怎么办呢?在这篇博客文章的下一部分中，我们将研究如何使用画面流操作区域来监听来自画面流画面组件的信号，并将其连接到画面流设计中。

整合状态

我们在设计时必须考虑的另一个问题是Qt design Studio中状态的存在，它是工作流中现有的一个强大的部分，允许您创建UI画面的状态并跟踪它们之间的变化。通过我们的画面流，您不仅可以从一个画面的任何状态转换到另一个画面的任何状态，还可以使用画面流实现在单个画面的不同状态之间转换，将QML现有特性的强大功能融合到了新的流模式中。