相对布局

如果你需要一种布局,在不使用复杂的层次结构的情况下,可以轻松控制子元件与父或兄弟元件的相对位置,那么 Lynx 自研的相对布局(relative layout)是最佳选择。

相对布局允许显示子元件在相对位置,每个元件的位置可以相对于兄弟元件(例如,位于另一个元件的左侧或下方)或相对于父区域来指定(例如,对齐底部、左侧或中心)。有关支持的属性,请参见参考部分。

如何构建一个相对布局?

以下示例展示了“用户名”(user name)和“用户名下面的描述”(user description)之间的位置关系,以及“用户名”与左侧的“头像”(avatar)的关系。此外,还有“关注”(follow)、“用户等级”(lv)和“关闭按钮”(close)之间的位置关系。该图用虚线和箭头表示了它们的相对位置关系。

使用相对布局实现上述效果,步骤如下:

第一步:应用display: relative

要使用相对布局,只需将 display: relative 应用于你想要进行相对布局的父元件。

display: relative;

第二步:为子元件编号

通过使用 relative-id(非 0 的整数)为相对布局中的子元件声明 ID,以便更好地识别每个元件。

// avatar
relative-id: 1;
// user_name
relative-id: 2;
// user_description
relative-id: 3;
// user_lv
relative-id: 4;
// close
relative-id: 5;
// follow
relative-id: 6;

第三步:设置边缘对齐样式

使用以下边缘对齐样式,将当前元件与父或兄弟元件的某个边缘对齐。例如,使用 relative-align-top 可指定当前元件与目标元件的上边缘对齐。

物理属性:

逻辑属性:

第四步:设置相对位置样式

使用以下相对位置样式,指定元件与兄弟元件的相对位置。例如,使用 relative-left-of 指定当前元件的右边缘紧靠着目标兄弟元件的左边缘。

物理属性:

逻辑属性:

第五步:设置居中样式

使用 relative-center 可以指定子元件在容器中的居中方式。通过设置 vertical 实现垂直居中,设置 horizontal 实现水平居中,或者设置 both 同时实现垂直和水平居中。

示例

该示例中,容器的宽度是固定的,高度则会依据内容变化。

根据渲染效果需求,可以为每个元件赋予相应属性。需要设置元件之间的间隙时,可使用 margin

  • 最佳实践

    使用相对布局可以为开发者带来便捷、高效的布局方案。开发时建议遵循以下原则:

    1. 相对于父容器的定位不会影响性能,可以自由使用。

    2. 当在兄弟间进行定位时,建议开启 relative-layout-once 属性(默认开启)。

    3. 非必要时,避免使用 a 依赖 b 的横向与 b 依赖 a 的纵向这种循环依赖,因为对性能影响较大。

    4. 请勿出现不能解决的循环依赖,这会导致布局失败。

    5. 尽量使用逻辑属性,如 relative-align-inline-startrelative-inline-start-of 以支持页面国际化。

参考

目前,相对布局支持以下特有的布局属性:

除非另有说明,本项目采用知识共享署名 4.0 国际许可协议进行许可,代码示例采用 Apache License 2.0 许可协议进行许可。