横向布局
1、界面设计
1.1、创建一个页面,并命名为box-hor
1.2、在界面中添加一个Page并在Page中添加一个Box
1.3、修改Box布局属性使其成为一个横向弹性盒子
调整布局属性为box,并为其设定一个高度80px
1.4、在Box中插入一个Box组件一个文字Text组件和一个图标Icon组件
1.5、调整新加入的三个元素的属性
设定box的宽度为80px
设定Text的比率为1,即其占用父容器盒子总长度的一份,由于Box和Icon都有长度,因此Text会占满剩余区域。设定Text也为一个弹性盒子,并设定其子元素纵向居中对齐,可以发现Text控件中的文字纵向居中显示
为Icon控件选择箭头图标,这样即完成了一个横向弹性布局范例。
1.6、保存并输出全部
2、代码分析
在IDE中打开box-hor.html文件,可以看到如下代码
对应于我们在设计器中的配置,容器Box中class属性里ub定义了此Box为弹性容器,默认为横向布局。文字Text控件的class属性里ub-f1定义了此控件在容器Box中占用一份空间。文字Text控件的class属性里的ub ub-ac分别定义此Text控件也是一个弹性盒子,且其子元素需要纵向居中对齐。