• 界面布局组件
  • 绝对布局
    • 属性
    • 事件
    • 方法
  • 水平布局
    • 属性
    • 事件
    • 方法
  • 水平滚动条布局
    • 属性
    • 事件
    • 方法
  • 滚动控制
    • 快速上手
    • 常见问题
    • 属性
    • 事件
    • 方法
  • 滑动分页
    • 快速上手：首页标签页
    • 新手引导页
    • 常见问题
    • 属性
    • 事件
    • 方法
  • 表格布局
    • 属性
    • 事件
    • 方法
  • 垂直布局
    • 属性
    • 事件
    • 方法
  • 垂直滚动条布局
    • 属性
    • 事件
    • 方法
    • 案例：实现底部导航栏固定的效果
    • 案例：布局方法几则
    • QA：能把一个图片放到另一个图片上层吗？

« 返回首页

界面布局组件

目录：

1. 绝对布局
2. 水平布局
3. 水平滚动条布局
4. 滚动控制 指导
5. 滑动分页 指导
6. 表格布局
7. 垂直布局
8. 垂直滚动条布局

拓展案例：

1. 案例：实现底部导航栏固定不随屏幕滑动的效果
2. 案例：布局方法几则
3. QA：能把一个图片放到另一个图片上层吗？

绝对布局

在绝对布局中的组件可以实现任意坐标显示。放入的组件会自动增加 ”Top“ 和 “Left” 属性，控制其显示的坐标位置。（v2.75版本新增组件）

属性

背景颜色

设置绝对布局的背景颜色，使用ARGB数值表示，如果设置了图像属性，则不能显示背景颜色直到删除图像属性为止。

高度

设置绝对布局的垂直高度，以像素px为单位。

高度百分比

设置绝对布局的垂直高度相对于整个屏幕高度的百分比。

图像

设置绝对布局背景图片路径。

可见性

设置绝对布局是否显示在屏幕上，值是真则绝对布局显示，假则隐藏。

宽度

设置绝对布局的水平宽度，以像素px为单位。

宽度百分比

设置绝对布局的水平宽度相对于屏幕宽度的百分比。

Left

指定该组件左边缘相对于绝对布局的位置。

Top

指定该组件顶部边缘相对于绝对布局的位置。

事件

无

方法

无

水平布局

使用水平布局组件来展示一组从左到右排列的组件，你可以在其中从左到右放置应该显示的组件。如果你想让组件显示在另一个上面，使用 垂直布局 代替。

在水平布局中，组件沿水平轴排列，垂直居中对齐。

• 如果水平布局的 高度 属性设置为自动，则实际布局的高度由布局中 未设置高度 属性为填充父级的最高的组件决定。

• 如果水平布局的 高度 属性设置为 自动，并且它仅包含 高度属性设置为填充父级 的组件，布局的实际高度是使用组件的自动高度计算的。

• 如果水平布局的 高度 属性设置为自动且其中没有任何组件，则 高度 将是 100%。

• 如果水平布局的 宽度 属性设置为自动，则实际布局的宽度由组件的宽度之和确定。

• 如果一个 水平布局 的 宽度 属性设置为 自动，任何组件宽度 属性设置为填充父级的，就类似它们自己的宽度设为自动。

• 如果水平布局的 宽度 属性设置为填充父级，将占用其他组件未占用的宽度。

属性

水平对齐

一个数字，用于表示水平布局的内容如何水平对齐。选择分别是：

1 （左对齐）

2 （右对齐）

3 （水平居中）

如果水平布局的宽度是自动，则对齐方式无效。

垂直对齐

一个数字，用于表示水平布局的内容如何垂直对齐。 选择分别是：

1 （顶部对齐）

2 （垂直居中）

3 （底部对齐）

如果水平布局的高度是自动，则对齐方式无效。

背景颜色

设置水平布局的背景颜色，使用ARGB数值表示，如果设置了图像属性，则不能显示背景颜色直到删除图像属性为止。

高度

设置水平布局的垂直高度，以像素px为单位。

高度百分比

设置水平布局的垂直高度相对于整个屏幕高度的百分比。

图像

设置水平布局背景图片路径。

可见性

设置水平布局是否显示在屏幕上，值是真则水平布局显示，假则隐藏。

宽度

设置水平布局的水平宽度，以像素px为单位。

宽度百分比

设置水平布局的水平宽度相对于屏幕宽度的百分比。

事件

无

方法

无

水平滚动条布局

一个格式化元素、用于放置应从左到右显示的组件。

如果你希望组件一个一个地显示，请使用 垂直滚动条布局。

这个版本是可滚动的。

属性

水平对齐

一个数字，用于表示水平滚动条布局的内容如何水平对齐。选择分别是：

1 （左对齐）

2 （右对齐）

3 （水平居中）

如果水平滚动条布局的宽度是自动，则对齐方式无效。

垂直对齐

一个数字，用于表示水平滚动条布局的内容如何垂直对齐。 选择分别是：

1 （顶部对齐）

2 （垂直居中）

3 （底部对齐）

如果水平滚动条布局的高度是自动，则对齐方式无效。

背景颜色

设置水平滚动条布局的背景颜色，使用ARGB数值表示，如果设置了图像属性，则不能显示背景颜色直到删除图像属性为止。

高度

设置水平滚动条布局的垂直高度，以像素px为单位。

高度百分比

设置水平滚动条布局的垂直高度相对于整个屏幕高度的百分比。

图像

设置水平滚动条布局背景图片路径。

可见性

设置水平滚动条布局是否显示在屏幕上，值是真则水平滚动条布局显示，假则隐藏。

宽度

设置水平滚动条布局的水平宽度，以像素px为单位。

宽度百分比

设置水平滚动条布局的水平宽度相对于屏幕宽度的百分比。

事件

无

方法

无

滚动控制

不可见组件：读取和控制「垂直滚动条布局」「水平滚动条布局」的滚动位置——比如聊天记录加一条后自动滚到底部、 回到顶部按钮；注册布局后，滚动、到达开头或末尾时触发事件（可做「滚到底加载更多」）。

功能参照 ColinTree 的 ScrollArrangementHandlers 拓展：原版把水平、垂直拆成两个组件，每个组件只能绑定一个布局； 内置版合并为一个组件，方法直接以布局为参数，可同时管理多个布局。 位置与距离的单位和组件宽高一致；垂直布局是纵向位置，水平布局是横向位置，0 为开头。

使用指导滚动控制：读取和控制垂直/水平滚动条布局的滚动位置，如聊天记录加一条后自动滚到底部；注册布局后，滚动、到达开头或末尾时触发事件查看 →

快速上手

1. 拖一个垂直滚动条布局（高度设为 300 像素），在里面放一个标签 标签_记录（勾选「HTML格式」）；
2. 布局下方放一个文本输入框、两个按钮（按钮_发送、按钮_回顶部）和一个滚动控制；
3. 搭下面的代码块：每发一条消息追加到记录末尾并自动滚到底；滚到顶时给个提示。

when Screen1.Initialize() {
  滚动控制1.Register(垂直滚动条布局1)
}

when 按钮_发送.Click() {
  标签_记录.Text = join(标签_记录.Text, "<br>我：", 文本输入框1.Text)
  文本输入框1.Text = ""
  滚动控制1.ScrollToEnd(垂直滚动条布局1)
}

when 按钮_回顶部.Click() {
  滚动控制1.ScrollToStart(垂直滚动条布局1)
}

when 滚动控制1.ReachedStart(布局) {
  按钮_回顶部.Text = "已在顶部"
}

发几条消息，记录超过布局高度后，每次发送都会自动滚到最新一条；点「回顶部」平滑滚回开头，按钮文字变成「已在顶部」。

常见问题

属性

无

事件

到达末尾时(布局)

已注册的滚动布局滚动到末尾（最下/最右）时触发，常用于「滚到底加载更多」。

到达开头时(布局)

已注册的滚动布局滚动到开头（最上/最左）时触发。

滚动时(布局,位置)

已注册的滚动布局滚动时触发。位置：垂直布局为纵向位置，水平布局为横向位置。

方法

取滚动位置(布局)

返回当前滚动位置，0 为开头。

注册(布局)

注册一个垂直/水平滚动条布局，之后它滚动时触发本组件的事件。可注册多个布局；只调用滚动方法（不需要事件）时无需注册。

滚动到(布局,位置)

平滑滚动到指定位置，0 为开头。

滚到末尾(布局)

滚动到末尾（最下/最右）。刚往布局里加了内容也能滚到新内容（等界面排版完成后再滚）。

滚到开头(布局)

滚动到开头（最上/最左）。

滑动分页

可见组件：把几个布局当作页面，左右滑动切换。常见用法：首页「推荐 / 关注 / 热门」标签页、新手引导页、电商左侧分类页。 标签样式四种：顶部标签栏（默认，可加角标）、左侧分类栏、底部圆点（引导页）、不显示标签。 默认宽度为「充满」，高度为 180 像素；宽度也可以改为「自动」，按页面内容调整。 设计器里的「示意页面」只用于展示样式，不是实际页面；AI 伴侣和安装后的应用都需要调用「添加页面」。

用法同滑动菜单：设计器里搭好几个布局当页面（通常取消勾选「可见」）， 屏幕初始化时依次添加页面——布局会从屏幕上挪进分页里，不再占原来的位置，并自动变为可见。 页面序号从 1 开始。屏幕底部的导航栏请用导航条。

使用指导标签页、角标、引导页、分类页与导航条联动的完整案例查看 →

快速上手：首页标签页

1. 拖一个滑动分页（默认顶部标签、宽度充满、高度 180 像素）；
2. 拖三个垂直布局（改名 垂直布局_推荐、垂直布局_关注、垂直布局_热门，取消勾选「可见」），每个里面放一个标签写上页面内容；
3. 搭下面的代码块：

when Screen1.Initialize() {
  滑动分页1.AddPage(垂直布局_推荐, "推荐")
  滑动分页1.AddPage(垂直布局_关注, "关注")
  滑动分页1.AddPage(垂直布局_热门, "热门")
  滑动分页1.SetBadge(2, "3")
}

when 滑动分页1.PageChanged(索引, 标题) {
  if 索引 == 2 {
    滑动分页1.SetBadge(2, "")
  }
}

运行后左右滑动或点标签切换页面；「关注」标签带一个红色角标「3」，切到这一页后角标消失。

新手引导页

标签样式选 dots，页面下方显示圆点；最后一页放一个「开始使用」按钮：

when Screen1.Initialize() {
  滑动分页1.AddPage(垂直布局_第一页, "")
  滑动分页1.AddPage(垂直布局_第二页, "")
  滑动分页1.AddPage(垂直布局_第三页, "")
}

when 按钮_下一页.Click {
  滑动分页1.CurrentPage = 滑动分页1.CurrentPage + 1
}

when 按钮_开始使用.Click {
  openAnotherScreen("Screen2")
}

分类页用 left：左边一列分类、右边是内容，点分类切换（这种样式不能左右滑，免得和内容里的横向滑动打架）。

常见问题

属性

当前页

当前页序号，从 1 开始；还没有页面时为 0。设置它会切换页面（带滑动动画），并触发切换时； 设成当前页本身或超出范围时不做任何事。

字体大小

标签文字的字号，默认 15。顶部标签按文字宽度排列，放不下时标签栏可以左右滑动。

高度

设置滑动分页的垂直高度，以像素px为单位。在可滚动屏幕中使用自动高度时，内容区按已添加页面的高度测量，最少保留 136 像素（另加标签栏或圆点高度）。

高度百分比

设置滑动分页的垂直高度相对于整个屏幕高度的百分比。

左侧位置（Left）

指定该组件左边缘相对于绝对布局的位置。

页面数量

已添加的页面数量。可用来判断是不是最后一页（当前页 = 页面数量）。

选中颜色

选中标签、指示线和圆点的颜色，默认蓝色。

可滑动

能否左右滑动切换页面，默认真；为假时只能点标签或设置当前页切换。左侧分类样式总是不能滑动。

标签栏背景颜色

标签栏的底色，默认白色。

标签样式

top 顶部标签栏（默认）、left 左侧分类栏（点选切换，不能左右滑）、dots 底部圆点（引导页）、none 不显示标签。

顶部位置（Top）

指定该组件顶部边缘相对于绝对布局的位置。

未选中颜色

未选中标签的文字颜色，默认灰色。

可见性

设置滑动分页是否显示在屏幕上，值是真则滑动分页显示，假则隐藏。

宽度

设置滑动分页的水平宽度，以像素px为单位。

宽度百分比

设置滑动分页的水平宽度相对于屏幕宽度的百分比。

事件

切换时(索引,标题)

切换到另一页时触发（滑动、点标签或设置当前页都会触发），索引从 1 开始，标题是页面标题。 添加第一页时该页直接显示，不触发本事件，首页的初始化写在添加页面之后。

方法

添加页面(布局,标题)

把一个布局加为新的一页，标题显示在标签上。布局会从屏幕上挪进分页里，不再占原来的位置，并自动变为可见； 同一个布局不会重复添加。页面填满标签栏以外的区域，内容较长时用垂直滚动条布局当页面。所有页面常驻，切走再回来内容不变。

设置角标(索引,文本)

给第几页的标签加红色角标（如未读数「3」「99+」或「新」）；传空文本清除角标。序号超出页面数量时忽略。

设置页面标题(索引,标题)

修改第几页的标题，如在标题里带上数量「消息(5)」。序号超出页面数量时忽略。

表格布局

使用表格排列组件，以表格方式显示一组组件。

• 该组件是一个格式化元素，你可以以表格形式在其中放置需要显示的组件。

• 在表格布局中，组件排列在行和列的网格中，每个单元格中可见的组件不超过一个。如果多个组件占据同一个单元格，则只有最后一个可见。

• 在每一行中，组件垂直居中对齐。

• 列的宽度由该列中最宽的组件确定。 计算列宽时，自动宽度用于 宽度 属性设置为 填充父级 的组件。但是，每个组件将始终填充其占据的列的整个宽度。

• 行的高度由该行中高度 属性未设置为 填充父级的最高的组件决定。如果行仅包含 高度 属性设置为 填充父级 的组件，则使用组件的自动高度计算行的高度。

属性

列数

确定表中的列数。

高度

设置表格布局的垂直高度，以像素px为单位。

高度百分比

设置表格布局的垂直高度相对于整个屏幕高度的百分比。

行数

确定表中的行数。

可见性

设置表格布局是否显示在屏幕上，值是真则表格布局显示，假则隐藏。

宽度

设置表格布局的水平宽度，以像素px为单位。

宽度百分比

设置表格布局的水平宽度相对于屏幕宽度的百分比。

事件

无

方法

无

垂直布局

使用垂直布局组件来显示一组从上到下、左对齐的组件。该组件是一种格式设置元素，你可以在其中放置应逐个显示的组件。 第一个子组件存储在顶部，第二个子组件存储在其下面，依此类推。 如果你希望组件彼此相邻显示，请使用 水平布局。

在垂直布局中，组件沿垂直轴左对齐排列。

• 如果垂直布局的 宽度 属性设置为自动，则实际布局的宽度由布局中 未设置宽度 属性为填充父级的最宽的组件决定。

• 如果垂直布局的 宽度 属性设置为 自动，并且它仅包含 宽度属性设置为填充父级 的组件，布局的实际宽度是使用组件的自动宽度计算的。

• 如果垂直布局的 宽度 属性设置为自动且其中没有任何组件，则 宽度 将是 100%。

• 如果垂直布局的 高度 属性设置为自动，则实际布局的高度由组件的高度之和确定。

• 如果一个 垂直布局 的 高度 属性设置为 自动，任何组件高度 属性设置为填充父级的，就类似它们自己的高度设为自动。

• 如果垂直布局的 高度 属性设置为填充父级，将占用其他组件未占用的高度。

属性

水平对齐

一个数字，用于表示垂直布局的内容如何水平对齐。选择分别是：

1 （左对齐）

2 （右对齐）

3 （水平居中）

如果垂直布局的宽度是自动，则对齐方式无效。

垂直对齐

一个数字，用于表示垂直布局的内容如何垂直对齐。 选择分别是：

1 （顶部对齐）

2 （垂直居中）

3 （底部对齐）

如果垂直布局的高度是自动，则对齐方式无效。

背景颜色

设置垂直布局的背景颜色，使用ARGB数值表示，如果设置了图像属性，则不能显示背景颜色直到删除图像属性为止。

高度

设置垂直布局的垂直高度，以像素px为单位。

高度百分比

设置垂直布局的垂直高度相对于整个屏幕高度的百分比。

图像

设置垂直布局背景图片路径。

可见性

设置垂直布局是否显示在屏幕上，值是真则垂直布局显示，假则隐藏。

宽度

设置垂直布局的水平宽度，以像素px为单位。

宽度百分比

设置垂直布局的水平宽度相对于屏幕宽度的百分比。

事件

无

方法

无

垂直滚动条布局

一种格式元素，用于放置应逐个显示的组件。（第一个子组件在顶部，第二个子组件在其下面，依此类推）

如果希望相邻显示的组件，请改用 水平滚动条布局。

这个组件是可滚动的。

属性

水平对齐

一个数字，用于表示垂直滚动条布局的内容如何水平对齐。选择分别是：

1 （左对齐）

2 （右对齐）

3 （水平居中）

如果垂直滚动条布局的宽度是自动，则对齐方式无效。

垂直对齐

一个数字，用于表示垂直滚动条布局的内容如何垂直对齐。 选择分别是：

1 （顶部对齐）

2 （垂直居中）

3 （底部对齐）

如果垂直滚动条布局的高度是自动，则对齐方式无效。

背景颜色

设置垂直滚动条布局的背景颜色，使用ARGB数值表示，如果设置了图像属性，则不能显示背景颜色直到删除图像属性为止。

高度

设置垂直滚动条布局的垂直高度，以像素px为单位。

高度百分比

设置垂直滚动条布局的垂直高度相对于整个屏幕高度的百分比。

图像

设置垂直滚动条布局背景图片路径。

可见性

设置垂直滚动条布局是否显示在屏幕上，值是真则垂直滚动条布局显示，假则隐藏。

宽度

设置垂直滚动条布局的水平宽度，以像素px为单位。

宽度百分比

设置垂直滚动条布局的水平宽度相对于屏幕宽度的百分比。

事件

无

方法

无

案例：实现底部导航栏固定的效果

使用垂直滚动条布局组件实现，也是该组件的典型使用场景，界面的详细布局如下：

参考效果如下：

• demo程序下载：

  footer_fixed.aia

案例：布局方法几则

看图即可：

QA：能把一个图片放到另一个图片上层吗？

可以的，可参考如下场景：

1. 图像放布局中，布局设背景图片。

2. 图像精灵放画布，画布设背景。

3. 屏幕设背景图片，图像组件放上面。