跳到主要内容

列表容器

GUI界面中,列表无处不在,使用列表容器可以极大的提高设计效率。在设计过程中,如遇到重复的内容的,你便可以考虑使用列表容器来提高设计效率。特别是在封装列表类的组件时,列表容器尤其重要。

什么是列表容器?

列表容器主要解决界面中重复元素的管理和布局问题,下图中列举了常见的一些列表。 列表组件示例

IMG_256

重复的特性不仅仅在于一次性的界面绘制,更重要的是在封装组件时,可以让你封装的组件列表项数量在所有实例上保持独立,这样就可以按需自由增加数量,你不必通过状态对数量情况进行穷举。

创建列表容器

你可以采用以下两种方式创建列表容器:

  • 方式一: 你可以通过顶部工具栏选择列表容器工具,随后在画布中绘制一个空白的列表容器。

  • 方式二: 选中一个组件实例图层,右键创建列表容器。

绑定列表项组件

列表容器只能重复组件实例,你可以在属性面板上,修改列表容器"组件绑定 > 列表项"属性。

列表布局

列表容器上的自动布局属性无法被删除,你可以按需配置列表是横向、纵向布局。了解更多参考自动布局章节。

列表数据

在列表数据属性中,你可以快速管理所有列表项。列表项组件的状态维度和自定义属性可以通过此处进行快速管理。

点击列表数据设置按钮,可以配置列表数据的显示。勾选希望管理的数据,勾选后,对应属性将会显示到列表数据栏目下。如果同时将值的"统一修改"开关打开,则这条属性会显示在最上方,如果未打开此开关,这条属性将会显示到下方的表格中。

如果列表容器在实例中,你无法修改列表数据的设置选项,需要跳转到源组件中进行编辑。

"统一修改"开关打开后,在列表数据属性栏修改属性时会同步到所有列表项,选中列表项,仍可对每一个列表项的属性进行单独设置,且单独设置时,不会影响和同步到其他列表项。

表格最多同时显示两条属性,你可以在表格的标题栏,通过下拉菜单切换需要显示的属性。

在列表数据属性栏中,你可以增加和减少列表项,可以管理所有列表项的属性。

如果某个列表项组件被替换为了其他组件,你将无法通过列表数据管理其属性。你可以在工作区选中此组件后进行修改。

列表单选特性

单选特性可实现选中互斥效果,比如:Tab切换始终只有一个Tab被选中、导航菜单最多有一个选项被选中。

你可以在交互属性面板中开启此选项,设置生效需要一个前提条件:列表项组件具有内置的选中状态,并定义了true/false不同的样式

列表单选特性会在编辑界面和演示界面生效。

列表项组件具有内置的选中状态维度,并定义了true/false不同的样式,单选特性才会生效。

列表容器可通过交互动作模拟全选/全不选/反选的交互效果,如点击全选按钮,则全选列表容器中的所有列表项。

工作区快捷工具

单选列表容器或选中列表项时,将会出现快捷键工具条,可对列表项数量、选中状态、顺序进行快速调整。

除了通过列表数据对列表容器内容进行管理外,你还可以直接选中任意想修改的图层,并通过属性面板对其进行修改。