weex常用属性梳理

  之前发了一篇weex集成和开发的博客,主要是讲了weex开发环境的搭建和文件的编译、部署,还有就是一些个人对weex的理解,最近将原生的项目改造成weex的项目,也持续了有两个多月的时间了,后面我会发一些有关weex技术的博客,可能有些人看到了会感觉没什么很高的技术含量,主要是为了记录自己学习到的东西以及开发过程中遇到的一些困难。

  首先,第一篇记录开发中会非常经常用到的一些属性:

  对于元素的margin、padding、border这些属性就不做说明了,和Android原生没什么大区别

flex-direction:定义父容器中子元素的排列方向,可选值为 row | column,默认值为 column
column:从上到下排列
row:从左到右排
justify-content:定义父容器中子元素在水平方向上的排列方式,可选值为 flex-start | flex-end | center | space-between,默认值为 flex-start。
flex-start:是默认值,所有的 flex 成员项都排列在容器的前部;
flex-end:则意味着成员项排列在容器的后部;
center:即中间对齐,成员项排列在容器中间、两边留白;
space-between:表示两端对齐,空白均匀地填充到 flex 成员项之间。
这其中最常用到的是center、space-between,center就没有什么好说的了,就是水平居中,至于space-between,我们可以配合margin-left和margin-right去实现一些效果。

这块试一下如果有多个元素space-between会是什么样的效果:

<div style="width: 500px;height: 300px;flex-direction: row;justify-content: space-between;background-color: brown;align-items: center">
        <text style="font-size: 40px;color: #0088fb">111</text>
        <text style="font-size: 40px;color: #0088fb">222</text>
        <text style="font-size: 40px;color: #0088fb">333</text>
        <text style="font-size: 40px;color: #0088fb">444</text>
    </div>

空白部分同样也是均匀的填充到各个元素之间,这块有个小问题,红色部分的div我是设置了固定的宽、高,如果我想让div水平充满屏幕,在Android中可以设置match_parent,在weex中是没有类似的属性的,只能给宽度设置固定的750px,看到这可能会想到,这样写固定的值,不会产生不同分辨率手机的适配问题吗?实际上是不会的,我也不是很理解其中的原理,大概的理解是:750px是weex定义的一个基础,我们在代码中设置的任何宽度最后都会去除这个基础,最后再乘实际手机的宽度,举个例子:一个手机的宽是1080,我们在代码中设置div的宽度为375px,375/750*100% = 50%,1080*50% = 540,正好是手机宽度的一半,以此类推,在其他手机上得到的结果仍然是手机宽度的一半,如此就完成了不同分辨率手机的适配。

align-items:定义父容器中子元素在垂直方向上的排列方式,可选值为 stretch | flex-start | center | flex-end,默认值为 stretch。
stretch 是默认值,即拉伸高度至 flex 容器的大小;
flex-start 则是上对齐,所有的成员项排列在容器顶部;
flex-end 是下对齐,所有的成员项排列在容器底部;
center 是中间对齐,所有成员项都垂直地居中显示。

这个没什么好说的,最常用的就是center,垂直居中。

flex:定义了父容器中子元素可以占用容器中剩余空间的大小。
如果所有的成员项设置相同的值 flex: 1,它们将平均分配剩余空间。
如果一个成员项设置的值为 flex: 2,其它的成员项设置的值为 flex: 1,那么这个成员项所占用的剩余空间是其它成员项的2倍。
这就类似于Android里面的权重layout_weight
    <div style="flex-direction: row;background-color: brown">
        <div style="flex-direction: row;background-color: burlywood;flex: 1"></div>
        <div style="flex-direction: row;background-color: aqua;flex: 2"></div>
        <div style="flex-direction: row;background-color: blueviolet;flex: 1"></div>
    </div>

posted @ 2018-06-12 16:54 CurtisWgh 阅读(...) 评论(...) 编辑 收藏