欢迎回到我们的小组件教程！今天，我们将学习如何创建一个自适应的小组件模板，从我们在之前的课程中制作的背景开始。创建灵活的元素是在使用小组件时至关重要的。这是因为您的小组件将以不同的尺寸和接触点出现在用户的移动屏幕上。
在本课程中，我们将使用符号来创建可以调整大小、对齐方式等的元素。这样，我们的元素将作为构建块，您可以轻松地替换或编辑它们，随着您的小组件的演变。
让我们开始吧！
让我们从一些准备工作开始
对于 iPhone 应用程序小组件，您需要创建三个具有以下尺寸的画板（您可以按A激活画板工具）
- 169x169px
- 360x169px
- 360x376px
接下来，我们将创建一个模板图层，我们将在所有这些小组件版本中重复使用它。
首先，在最小的画板中添加一个 169x169px 的矩形（您可以按R激活矩形工具）。确保矩形覆盖整个画板。现在，取消选中 Inspector 的样式部分下的边框，并将填充更改为与您的星夜背景相同的海军蓝色（我们选择了 #161239）。
您始终可以通过单击填充下的 + 按钮来添加更多颜色或渐变。
接下来，单击 填充旁边的 + 按钮，并添加一个线性渐变。使第一个渐变点为海军蓝色，然后将透明度降低到零。将渐变点几乎滑动到第二个点，并给后者一个更浅的蓝色。这将是我们稍后放置按钮的位置。
随意尝试蓝色阴影和渐变的尺寸。
最后但并非最不重要的是，单击 Inspector 的外观部分下的 + 按钮，并将您的新图层样式命名为“模板”。为剩余的画板创建矩形。然后，从外观下的下拉菜单中选择图层样式，将其应用于每个新矩形。
使用符号创建自适应背景
现在我们有了一个模板，我们可以从那里开始构建我们的小组件。首先，让我们回到我们上次创建的星夜背景，并将其转换为符号。这样，您就可以为我们不同的小组件尺寸重用相同的背景。只需选择画板，然后单击工具栏中的符号图标。
对于此练习，我们将把我们的符号整齐地组织在一个单独的符号页面上，因此请确保在单击创建之前选中“将符号发送到符号页面”复选框。
接下来，按住 Control 键单击我们刚刚创建的任何一个模板矩形，然后选择蒙版。蒙版是一个图层，它将裁剪您插入的任何内容以适合其形状，因此您不必担心裁剪背景。转到 Inspector 的角部分，从下拉菜单中选择平滑，并将其设置为 22。您将看到您的矩形现在具有圆角。
转到工具栏并单击 + 按钮，并通过选择符号 > 此文档 > 背景插入星夜背景。如果需要，重新定位背景，以便您可以看到上次创建的亮星。
由于圆角和星光熠熠的背景，我们的小组件变得生动起来。也就是说，您可能需要根据画板调整背景的大小。
现在，只需为其他两个画板重复相同的过程。
如何创建可重用的文本图层
为了让小组件对我们的用户有用，我们需要向其中添加一些信息。为此，让我们创建一个可以容纳我们稍后将要重复使用的所有文本框的符号。
首先，创建三个具有以下副本的文本框并将它们垂直堆叠起来——最好彼此保持相等的距离
- 类型
- 状态
- 描述
现在不要担心字体或文本样式——我们稍后会介绍。接下来，选择所有三个文本框，然后单击工具栏中的创建符号按钮——您可以将该符号命名为“详细信息”。您将在符号页面中找到您新创建的“详细信息”符号，接下来我们将前往该页面。
不要太担心间距和文本大小。您可以随时调整它们，以更好地适应您不同的小组件尺寸。
在符号页面上，我们需要给“详细信息”符号一个背景。选择符号，选中 Inspector 的 符号源部分下的“添加背景颜色”复选框，并赋予它与星夜背景相同的海军蓝色。这将有助于我们正确地可视化文本，但当我们稍后将其添加到我们的小组件时，背景不会传递过来。
接下来，您需要通过增加或减小字体大小来区分每个文本框。您还可以稍微降低某些文本图层的不透明度以创建不同的白色阴影——但请注意可读性。这里唯一的规则是确保“状态”从其余部分中脱颖而出，因为它将包含您的小组件的主要信息。
文本样式的工作方式与我们之前创建的图层样式相同。
将所有内容与嵌套符号组合在一起
现在是时候发挥一些 Sketch 魔法了。我们现在有一个背景符号和一个文本图层符号。这些将是我们创建小组件的主要构建块。虽然我们将专注于组合这些元素，但请记住，您可以从您可能想要在您的设计中重复使用的任何其他组件（例如图标或按钮）创建符号。
还记得我们一开始创建的三个画板吗？让我们将它们中的每一个都变成一个符号。然后，将您的“详细信息”符号插入到它们中的每一个中。也许您已经想知道——我们现在是否有一个符号嵌套在符号内部？ 确实如此！我们的背景和文本符号现在“嵌套”在每个小组件内部。
嵌套符号在编辑我们的符号时给了我们更大的灵活性。我们可以建立尺寸参数并进行特定调整，而不会影响其他小组件符号。
当然，我们还没有完全完成！ 下次，我们将教您如何编辑详细信息符号，使其无论小组件大小如何都看起来很棒。
在我们下一次也是最后一篇文章中，我们将了解如何编辑我们的小组件中的每个组件。因此，请务必关注下周的更新。 👀
