使用布局微件可排列其他微件。
固定面板
使用“固定面板”微件可控制其他微件的布局。固定面板中的微件具有布局属性,可用于相对于面板边缘设置其尺寸和位置。
详细了解固定面板的页面布局。
用法
将一个面板微件拖到页面上,然后使用属性编辑器来配置其文本、外观和功能。
常规工作流
- 将面板绑定到数据源。
- 点击
layout
属性以更改面板的类型。
样式
使用操作栏中的主题背景选择器来控制面板的外观。
其他信息
API 提供了有关面板使用的样式、属性、方法和事件的更多信息。
示例
水平面板和
垂直面板
使用面板微件可控制其他微件的布局。垂直和水平面板中的微件具有可控制其尺寸和位置的布局属性,但用于控制位置的选项要比固定面板中的少得多。流动面板属性可分为两列:水平和垂直。每列均控制其各自所在的轴。
详细了解流动面板的页面布局。
用法
将一个面板微件拖到页面上,然后使用属性编辑器来配置其文本、外观和功能。
常规工作流
- 将面板绑定到数据源。
- 点击
layout
属性以更改面板的类型。
样式
使用操作栏中的主题背景选择器来控制面板的外观。
其他信息
API 提供了有关面板使用的样式、属性、方法和事件的更多信息。
示例
列表
使用“列表”微件可将数据源中每一项的数据作为列表中单独的行显示。在编辑器中,列表具有用于定义其尺寸的外部面板,还有用于确定列表中行的布局的内部原型设计行。
用法
将列表拖到页面上,然后使用属性编辑器来配置其外观和功能。
当应用运行时,应用制作工具会为数据源的 item
列表中的每个 items
创建一个特殊的数据源。然后,它会通过引用原型设计行为每个新的数据源创建一个行。
由于列表行使用特殊的数据源,因此某些模型数据源方法并不适用于它们。例如,deleteItem()
、createItem()
、prevItem()
和 nextItem()
均会对列表的数据源抛出错误。如果您要从列表行中删除记录,请在原型设计中创建一个删除按钮,并将其 onClick
事件设置为 widget.datasource.item._delete()
。
常规工作流
列表可将数据源中每个项目的数据作为列表中单独的行显示。在编辑器中,列表具有用于定义其尺寸的外部面板,还有用于确定列表中行的布局的内部原型设计行。
当应用运行时,应用制作工具会为数据源的 item
列表中的每个 items
创建一个特殊的数据源。然后,它会通过引用原型设计行为每个新的数据源创建一个行。
由于列表行使用特殊的数据源,因此某些模型数据源方法并不适用于它们。例如,deleteItem()
、createItem()
、prevItem()
和 nextItem()
均会对列表的数据源抛出错误。如果您要从列表行中删除记录,请在原型设计中创建一个删除按钮,并将其 onClick
事件设置为 widget.datasource.item._delete()
。
样式
使用操作栏中的主题背景选择器来控制列表的外观。
其他信息
API 提供了有关此微件样式、属性、方法和事件的更多信息。
示例
项目列表样本中使用了“列表”微件。
网格
使用“网格”微件可将数据源中每一项的数据作为网格中的单元格显示。在编辑器中,网格具有用于定义其尺寸的外部面板,还有用于确定列表中行的布局的内部原型设计行。
用法
将“网格”微件拖到页面上,然后使用属性编辑器来配置其文本、外观和功能。
常规工作流
网格微件与列表微件几乎完全相同,不同之处在于前者的原型设计为网格中的单元格,而非行。它们有助于显示大量项目的少量细节,例如相册缩略图或者在线购物产品目录。
样式
使用操作栏中的主题背景选择器来控制网格的外观。
其他信息
API 提供了有关此微件样式、属性、方法和事件的更多信息。
示例
公司商店模板中使用了“网格”微件。
手风琴式折叠
手风琴式折叠类似于列表,但它们另有一个细节原型设计,可在用户选择某一行后展开。如果要包含的信息多于可在列表中实际显示的信息,或者如果要为选定项目添加额外的修改面板,它们会非常有用。
用法
将手风琴式折叠拖到页面上,然后使用属性编辑器来配置其文本、外观和功能。
常规工作流
手风琴式折叠是一个带有详细视图的 ListPanel,可在所选行的下方展开。此详细视图与主行视图一样,可作为原型设计进行修改。
在运行时,手风琴式折叠的数据源中的每个项目均显示为一行。该行的数据源是一个特殊的单项数据源,它指向手风琴式折叠的数据源中相应的项。细节行同样也指向这个特殊的数据源。这允许原型设计行访问当前行中具有 '@datasource.item' 语法的项。
样式
使用操作栏中的主题背景选择器来控制手风琴式折叠的外观。
其他信息
API 提供了有关此微件样式、属性、方法和事件的更多信息。
示例
Material Gallery 模板中使用了“手风琴式折叠”微件。
标签页
使用“标签页”微件可进行高级的内容整理。
用法
将标签拖到页面上,然后使用属性编辑器来配置其文本、外观和功能。
常规工作流
标签可控制内容在一致位置的显示。使用“属性编辑器”中的标签属性来添加、修改和删除标签。
样式
使用操作栏中的主题背景选择器来控制标签的外观。
其他信息
API 提供了有关此微件样式、属性、方法和事件的更多信息。
示例
Material Gallery 模板中使用了“标签页”微件。
水平拆分和
垂直拆分
使用“水平拆分和垂直拆分”微件可控制其他微件的布局。它们与其他面板类似,不同之处在于它们具有可移动的分隔器。
拆分面板可以通过嵌套来创建自适应布局,还能根据内容尺寸来填充父级维度和流。
用法
将拆分微件拖到页面上,然后使用属性编辑器来配置其外观和功能。
常规工作流
- 将拆分绑定到数据源。
- 使用
splitPosition
属性来控制拆分面板的位置。
样式
拆分微件没有预先配置的样式选项。