开发一个成功的移动应用程序并不简单。有许多因素需要考虑，包括规划、设计、编码、测试和维护。
在本教程中，我们将查看 Figma 上现有应用程序项目的一页，并学习如何将设计复制并粘贴到SCADE上的项目中。Figma 是一个著名的基于 Web 的矢量图形编辑器和原型制作工具，可让设计师和软件开发人员为网站和移动应用程序构建用户界面和线框。
在开发应用程序时，并不总是建议立即启动 SCADE。在编写任何代码之前，您需要处理应用程序的外观。原因之一是设计对于获得用户友好的应用程序起着至关重要的作用。这就是使使用该应用程序为用户提供无缝体验的原因。此外，通过在开始编码之前执行此操作，它将使您能够准确地确定您的应用程序将执行什么。完成设计后，您可以在 SCADE 上匹配设计。
在本教程结束时，您应该具备执行以下操作的扎实知识：
- 在 SCADE 上使用 Figma 设计。
- 使用 GridLayout 构建响应式移动 UI。
- 能够通过将 SVG 内容从 Figma 复制并粘贴到按钮小部件来创建移动应用程序，并且 SVG 设计在这样做时会保留其原始大小。
入门
对于本教程中的配置文件和设置页面，我们将使用 GridLayout，它使我们能够灵活地拥有高度响应的复杂布局，而不必担心使用约束：
下面的Profile & Settings 页面是我们将在本教程中在 SCADE 上复制的 Figma 设计：
设置基本结构
打开您的项目并单击main.page 文件以设置我们基本结构的基本结构，然后再输入页面的详细信息。
接下来，在主页右侧的LAYOUT下将Grid的Row值更改为 4 。此外，将从 Figma 设计中复制的Profile & Settings 页面背景颜色的十六进制代码粘贴到主页背景的 Fills Hex 字段中：
- 创建自定义导航栏
查看我们的Profile & Settings 设计，我们需要在顶部创建自定义导航栏。这可以通过在划分的主Grid的第一行添加一个水平容器并将其名称更新为NavBar来实现。不仅如此，我们还需要将NavBar分成2 列，并使用它的Alignment 和 Fill 属性来确保它只占据屏幕顶部的有限空间：
接下来，让我们将名为profileLabel的标签添加到 NavBar 的第一列。我们还需要给它一个名为“Profile”的标签文本。此外，此处需要Alignment 和 Fill 属性将profileLabel配置到屏幕的左上角，并确保在其顶部和左侧 有20 个填充：
在NavBar 的第二列中，我们在profileLabel旁边添加了一个按钮小部件，并将其命名为“settingsIcon”。就像profileLabel一样，我们需要Alignment 和 Fill 属性将settingsIcon 设置为屏幕的右上角。然而， settingsIcon不需要文本标题、背景图像或填充颜色。此处按钮小部件需要的是选择并右键单击“配置文件和设置”页面上的settingsIcon我们的 Figma 设计，然后转到 Copy as - Copy as SVG。完成后，您可以将 SVG 图标粘贴到SCADE 上我们项目的 settingsIcon 按钮上，方法是使用键盘快捷键命令 + V或位于 SCADE左上角的SCADE 菜单栏上的“编辑”下拉菜单中的“粘贴”选项屏幕：
2.添加一个上部
完成导航栏后，让我们添加一个垂直容器，并将其命名为“UpperSection”到划分的主 Grid的第二行。值得注意的是，我们还在Uppersection创建了三行来容纳三个项目：第二个 SVG 图标和两个标签。我们正在使用UpperSection Fill 属性将其配置为尽可能多地占用空间。不仅如此，我们还将它的Vertical Indent 属性设置为负值，以便它可以堆叠在前面的导航栏的空间上：
我们返回到Profile & Settings 页面设计，选择并右键单击圆形星形图标，然后转到 Copy as - Copy as SVG。完成后，我们在UpperSection 的第一行添加一个按钮小部件，将其命名为“starIcon”，没有文本标题、背景图像或填充颜色，然后通过按快捷键命令 + V 或选择“将SVG 图标粘贴到其中”从屏幕左上角的 SCADE 菜单栏的编辑下拉菜单中粘贴”。此外，我们使用它的Fill 参数来确保它占据所有可用空间：
我们在UpperSection的第二行添加一个名为“reviewsAndRatingLabel”的标签，该标签输出有关有权访问评论和评分的文本。我们给它一个fontsize，font-type并使用它的Text Alignment 属性使它居中。由于其Fill 属性，我们确保reviewAndRatingLabel占据了其控制范围内的所有可用空间：
UpperSection的最后一行采用另一个名为“keeptrackLabel”的标签，该标签返回一个文本，强调跟踪要观看的节目和电影。除了我们将其文本设为多行并将其字体大小减小到 14 之外，我们对其进行与上面的reviewsAndRatingLabel相同的处理：
- 添加登录按钮
我们在划分的主 Grid的第三行添加了一个名为“SigninActionView”且顶部填充为 60的 Vertical 容器，以容纳另一个按钮小部件。需要注意的是，SigninActionView也被设置为占用尽可能多的空间：
在 SigninActionView中，我们添加了一个按钮小部件并将其命名为“signinButton”。我们需要 signinButton 的 Alignment 和 Fill 属性将其设置为SigninActionView 的顶部中心区域。像往常一样，与本教程中使用的其他按钮小部件一样，signinButton不需要文本标题、背景图像或填充颜色。我们需要做的就是在我们的 Figma 设计的Profile & Settings 页面上选择并右键单击signinButton ，然后转到 Copy as - Copy as SVG. 完成后，我们将 SVG 图标粘贴到 SCADE 上的项目 signinButton 上，方法是使用键盘快捷键命令 + V或屏幕左上角 SCADE 菜单栏上的“编辑”下拉菜单中的“粘贴”选项：
- 使用标签栏
我们将一个名为TabBar的 ToolBar分为4 列，以容纳主页、搜索、收藏和配置文件图标。TabBar 的 Fill 属性用于将其配置为位于划分的主 Grid的最后一行的底部。TabBar的四项是怎么添加的？就像我们对迄今为止使用的所有图标所做的那样，我们在每个tabBarItem中添加一个按钮小部件，只需从 Profile & Settings 设计页面的标签栏中选择四个图标，然后右键单击它们，然后转到复制为 - 复制为 SVG. 完成后，我们将复制的 SVG 图标粘贴到各自的按钮小部件中，方法是使用快捷命令 + V 或单击屏幕左上角 SCADE 菜单栏上的“编辑”下拉菜单中的“粘贴”：
iOS 上的输出：
Android上的输出：
结论
本教程教我们如何将 Figma 设计带入 SCADE。我们还学习了如何查看设计并弄清楚它有哪些组件。然后，我们将设计的所有组件添加到页面中（例如 main.page 为例）并更新它们以匹配 Figma 设计。我们还学习了如何使用 GridLayout 以使设计在任何设备上看起来都不错。最后，我们还学习了如何将 Figma 中的设计复制/粘贴到按钮小部件中，并观察这些 SVG 设计保持与 Figma 上相同的大小。本教程的源代码可在GitHub上找到。
请注意，本教程基于SCADE 2.0.54，仅支持将设计和图标复制和粘贴到按钮小部件中；SCADE 的未来版本将支持所有小部件。
网友评论