布局微件

使用布局微件可排列其他微件。

“固定面板”微件 固定面板

使用“固定面板”微件可控制其他微件的布局。固定面板中的微件具有布局属性,可用于相对于面板边缘设置其尺寸和位置。

详细了解固定面板的页面布局

用法

将一个面板微件拖到页面上,然后使用属性编辑器来配置其文本、外观和功能。

常规工作流

  • 将面板绑定到数据源。
  • 点击 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 属性来控制拆分面板的位置。

样式

拆分微件没有预先配置的样式选项。

其他信息

API 提供了有关水平拆分和垂直拆分微件的更多信息。

示例

许多样本模板均使用了拆分。