欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

weex常用属性梳理

程序员文章站 2022-06-26 13:04:51
之前发了一篇weex集成和开发的博客,主要是讲了weex开发环境的搭建和文件的编译、部署,还有就是一些个人对weex的理解,最近将原生的项目改造成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去实现一些效果。

weex常用属性梳理

这块试一下如果有多个元素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>

weex常用属性梳理

空白部分同样也是均匀的填充到各个元素之间,这块有个小问题,红色部分的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>

weex常用属性梳理