css重复网格怎么画,了解如何使用重复网格在 Adobe XD 中创建重复元素。

了解如何使用重复网格在 Adobe XD 中创建重复元素。

在针对 Web 或移动应用程序进行设计时，通常需要定义重复元素或内容列表。但是，创建这些元素或在发生设计更改时进行更新可能很耗时。

重复网格功能将一组元素更改为一个重复元素。您只需按任意方向拉元素，网格就会重复。在修改某个元素的任何样式时，将在网格的所有元素中复制此更改。例如，如果更改某个元素中的图像大小，则将自动调整网格中所有图像的大小。

如果网格中有一个文本元素，则仅复制该文本元素的样式，而不复制内容。因此，您可以快速设置文本元素的样式，同时保持网格元素中的内容不同。

可以通过将文本文件拖到重复网格中来替换该网格中的占位符文本。

创建重复网格

重复网格的核心是一种特殊类型的组。可以通过选择一个对象或一组对象并将其转换为重复网格来创建重复网格。

设计要重复的基本元素 — 例如，图像缩略图和文本的组合。

选择要重复的元素。

通过单击“属性检查器”中的按钮或使用键盘快捷键 Cmd + R (Mac) 或 Ctrl + R (Windows)，将所选对象转换为重复网格。

元素边界上将显示较大句柄。

用于重复一个元素或一组元素的句柄

如需重复垂直网格中的元素，请拖动元素底部的句柄。如需重复水平网格中的元素，请拖动元素右侧的句柄。

垂直重复网格

水平重复网格

如需在网格中选择要编辑的元素，请双击网格。

如需取消网格元素的编组并单独处理它们，请选择网格，然后单击“属性检查器”中的“取消网格编组”。

可以通过在组内双击来访问重复网格的组件元素。

完成更改后，按 Esc 退出编辑上下文。

注意:

还可以通过向下钻取至“层”面板中的组件元素或直接选择组件元素来访问该元素。

调整重复网格中两个元素之间的空白区域

如需调整网格中两个元素之间的空白区域，请将鼠标悬停在元素之间的间隙上。当光标变为双箭头时，可拖动来增加或减少空白区域。

具有重复元素的垂直网格

处理重复网格中的文本

可以通过多种方式在重复网格中使用文本。可以更新重复网格中文本对象的各个实例，也可以选择将预先填充的 .txt 文档拖至重复网格中，并让文本文件的内容自动填充重复网格中的文本对象。

更新重复网格中的各个文本元素

Cmd + 单击 (Mac) 或 Ctrl + 单击 (Windows) 重复网格中的文本对象可将其选中。

如需编辑文本元素，请双击它并更改文本。

注意:

对内容的更改不会应用于重复网格中的其他文本对象。但是，应用于文本对象的任何样式都将应用于所有文本对象。

将用回车分隔的文本文件拖至重复网格中的文本对象

可以通过将文本文件拖到重复网格中来替换该网格中的占位符文本。

创建一个扩展名为 .txt 的文本文件。可以使用 Mac 的 TextEdit 或 Windows 的记事本(另存为 .txt)或任何其他文本编辑器来创建此文件。确保编码设置为 UTF-8。用回车将每行数据分隔开。

将文本文件拖动到重复网格上。

将文本文件拖动到重复网格中的对象上 — 待更新

按文本在文本文件中的相同顺序填充重复网格。如果网格数多于文件中的文本行数，则该顺序将重复。

处理重复网格中的图像

对于图像，可以构建重复的对象模式，其中按定义的模式重复对象的图像填充。

可以选择通过将图像逐一拖入对象中来创建图像填充模式，也可以选择多个图像，然后将它们拖至重复网格上的对象。

将图像文件拖动到重复网格中的对象上 — 待更新

替换重复网格中的图像

如需替换网格中的图像，请打开 Finder 或文件资源管理器，然后导航到项目图像的存储位置。选择要在网格中显示的所有图像，并将它们拖放至重复网格中的目标对象上。

旧图像将被替换为自动调整大小的新图像。

从重复网格中创建交互

连接整个重复网格以实施单个交互

在设计模式中，使用“画板”工具 (A) 在文件中创建第二个画板。

通过单击“原型”选项卡或使用 Ctrl + Tab 键盘快捷键来切换到原型模式。

选择第一个画板中的重复网格。对象右侧的中点将出现带箭头的连接器。

将连接器拖至下一个画板。在弹出窗口中选择过渡选项，然后按 Esc 键或在弹出窗口外部单击以忽略它。

通过按应用程序框架右上角的“播放”按钮或通过使用键盘快捷键 Cmd + Enter (Mac) 或 Ctrl + Enter (Windows) 来进行预览。单击重复网格上的任意位置可播放交互。

连接重复网格的单个元素以实施交互

选择重复网格内的对象。

拖动矩形右侧的连接器并将它拖至要链接的画板上。在弹出窗口中选择过渡选项，然后按 Esc 键或在弹出窗口外部单击以忽略它。

通过按应用程序框架右上角的“播放”按钮或通过使用键盘快捷键 Cmd + Enter(在 Mac 上)或 Ctrl + Enter(在 Windows 上)来进行预览。单击对象以验证交互。

在重复网格内创建一组元素，并从该组创建交互

还可以在重复网格内创建一组对象，然后从该组创建交互。

在重复网格中选择一个对象，然后在按住 Shift 键的同时单击其他对象可将它添加到选择中。

选择对象后，右键单击，然后从上下文菜单中选择“编组”。还可以使用键盘快捷键 Cmd + G (Mac) 或 Ctrl + G (Windows) 为对象编组。

切换到原型模式。将连接器从组拖至要链接的画板。

通过按应用程序框架右上角的“播放”按钮或通过使用键盘快捷键 Cmd + Enter(在 Mac 上)或 Ctrl + Enter(在 Windows 上)来进行预览。单击组以验证交互。

使用重复网格导入内容

下面是一个示例视频，用于让您开始使用重复网格。