横向布局

  • 1、界面设计
  • 2、代码分析目前应用界面效果中大部分都可以通过弹性横向布局实现,我们可以通过UI设计器来构建一个横向布局的弹性盒子来解释其工作原理。

1、界面设计

1.1、创建一个页面,并命名为box-hor

横向布局 - 图1

1.2、在界面中添加一个Page并在Page中添加一个Box

横向布局 - 图2

1.3、修改Box布局属性使其成为一个横向弹性盒子

横向布局 - 图3

调整布局属性为box,并为其设定一个高度80px

1.4、在Box中插入一个Box组件一个文字Text组件和一个图标Icon组件

横向布局 - 图4

1.5、调整新加入的三个元素的属性

横向布局 - 图5

设定box的宽度为80px

横向布局 - 图6

设定Text的比率为1,即其占用父容器盒子总长度的一份,由于Box和Icon都有长度,因此Text会占满剩余区域。设定Text也为一个弹性盒子,并设定其子元素纵向居中对齐,可以发现Text控件中的文字纵向居中显示

横向布局 - 图7

为Icon控件选择箭头图标,这样即完成了一个横向弹性布局范例。

1.6、保存并输出全部

2、代码分析

在IDE中打开box-hor.html文件,可以看到如下代码

横向布局 - 图8

对应于我们在设计器中的配置,容器Box中class属性里ub定义了此Box为弹性容器,默认为横向布局。文字Text控件的class属性里ub-f1定义了此控件在容器Box中占用一份空间。文字Text控件的class属性里的ub ub-ac分别定义此Text控件也是一个弹性盒子,且其子元素需要纵向居中对齐。