RidgeUI开发入门教程(三)布局容器

33 阅读3分钟

布局容器

本章节,我们将学习使用容器进行页面布局。

在之前章节,组件都是放置到页面的绝对位置,它的坐标是固定的,这样带来2个问题

  1. 当浏览器可视面积变化或在不同显示器打开时,组件位置可能就不对了
  2. 当组件很多时,一个个定位会特别繁琐

Ridge提供了容器概念:可以将组件放到一个父组件中,父组件对子组件进行布局的控制和统一的操作。

弹性容器

首先,在容器组件包中拖拽弹性容器到页面中。

接下来请注意,我们拖拽一个组件直接到弹性容器的所在位置。这样,他就被包含到弹性容器中了。 如果我们连续将3个组件都这样拖拽放置,会发现他们三个都并排放在弹性容器之中。

我们可以修改容器的排列方向、排列对齐、交叉对其来控制这些组件的位置。

form-vertical.png

我们可以使用 (ctrl+c/ctrl+v)复制整个容器和它的子节点。容器移动时,子节点也随之移动

通过设置其中一个或者几个的弹性属性为数字,就可以让他占据所有剩余空间,这也是“弹性”的含义。 当弹性容器大小变化时,弹性的节点会根据实际情况动态调整其大小。

form-vertical.png

另外,容器是可以被多层嵌套的,即弹性容器的子节点也是弹性容器或其他容器

示例:进行框架化页面布局

放置弹性容器到页面后,选择"填满",这样弹性容器的大小就随页面的具体大小而变化。

然后我们纵向放置三个弹性容器作为子组件,分别作为头部、正文、页脚。 在正文选择横向2个容器,作为导航和详细内容。 设置正文为弹性、详细内容为弹性。 这样,当运行页面时,随着页面变化,正文的范围也随之变化。 导航保持宽度不变、高度按内容调整。 头部、页脚保持高度不变,宽度按窗口宽度调整。

flex-body.png

这样我们就完成了一个自适应的布局

示例:进行表单布局

我们制作一个个人收货地址的表单,这个表单我们大家都接触过,收货地址至少包含收货人、手机号码、地区、详细地址等内容。 因为表单是个整体,并且相关内容需要对齐,我们用弹性容器来布局整个表单

首先拖拽放入一个弹性容器,作为整个表单整体。 然后放置多个弹性容器,作为多个表单项入口。 分别加入收货人、地区、详细地址、标签项内容。 然后各自放入文本。 每个容器我们指定交叉正中的对齐方式。

地区部分比较特殊,我们放入3个下拉选择输入,供用户选择省/市/县

最后我们选择布局方式: 1、选择纵向:则成为竖向布局的表单 2、选择横向,并勾选上换行选项,则成为横向布局的表单。 3、各项的宽度和次序也可以进行快速修改

form-horizontal.png

这样,通过布局调整,我们的表单就可以应用到多种显示场合

回顾

  • 本章节我们学会使用容器进行嵌套式布局,并制作了框架布局、表单布局的页面
  • 布局在页面制作中是个重要内容,弹性布局又是最基础和常用的方式,后续我们还将继续了解其他布局方式
  • 后面章节,我们会学习如何结合第二章节数据连接配置实现表单的输入验证和提交