自学小程序之路(四)，利用flex布局来让组件填满剩余空间

本来说写网络连接和小程序的宿主环境的相关API的。但是感觉好像页面上的很多基础知识还没写完。

然后就想写列表。本来设计时这样的

但我发现我不知道怎么样设置让红色的列表填充剩余页面。

被卡住后，问了问前端的同学，给我提供了利用flex属性来解决的方法。

所以这篇是围绕这个flex来数一下。

小程序中布局的思维

前一篇说小程序的wxml布局是从上至下，行内是从左到右排列。

在Android开发中，看到设计图的构思xml布局的时候，

都是会先把内容分块，每一块锁定在一个layout里，然后再去向这个layout里面放置UI元素。

其实在小程序也是秉承了这种思维。官方称其为Flex布局。

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=00080e799303986b0086e605f5680a

大体意思就是说如果一个组件的display属性定义为了flex,那么就代表这个组件可以作为容器使用。

里面的子元素可以自己设置一些参数来确定自己的对齐方式和占比大小。

类似于Android 开发中，如果一个布局定位为relativelayout那么他的子元素就可以用above,below等属性。

Flex布局

容器组件将display设置为flex后会增加很多属性。

flex-direction   决定容器中子元素的排列方式(即确定主轴方向)。垂直排列column还是水平排列row

flex-wrap          排列的空间放不下时，可以换行wrap还是不可以换行nowrap。默认不换行。

justify-content 子元素相对于父布局的对齐方式，是在父容器左边，右边，还是两端对齐父布局。

align-items       子元素相互之间的对齐方式，是顶部对齐，底部对齐还是中间对齐还是填充对齐

align-content    针对多行布局的属性，设定行对于父布局的对齐方式。

而对应的子元素，如果处于父容器是flex布局的情况下，也有很多属性可以决定自己的位置和大小。

order 决定沿主轴方向上的排列顺序，数值越小，排列越靠前。属性值为整数。

flex-shrink 当子元素在主轴方向溢出时，单个子元素在压缩是的压缩因子，默认为1，因子越大被压缩的越厉害。

flex-grow 当子元素在主轴方向不满时，单个子元素在压缩是的扩张因子，默认为0，因子越大夸张越厉害。

Flex-bias 确定主轴方向的长度。优先级高于width和height。属性为auto时优先级失效。默认auto

Flex flex-grow,flex-shrink,flex-bias的简写,平常使用中最频繁的一个属性。默认为0，1，auto。后两个属性可选。

而我上面的需求中，是用到了flex-grow的属性，即让我的列表组件扩张至占满剩余的空间。

然后我写了一个小demo.虽然组件不是用的列表组件，但是原理是一样的。

<!--flex/flextest.wxml-->
<view class="container">
<!--
  假设页面高度为pHeight
  按钮button默认高度为bHdefault
  文本text默认高度为tHdefault 
  剩余高度为 balanceHeight = pHeight-bHdefault-tHdefault
  每个单位的flex的分配为balnceHeight/(0+1)=perBalance
  分配时 
  button 的属性是flexgrow :0 ,flexshrink: 1,flex-basis: auto
  最终高度
  bHdefault+perBanlance*0 = bHdefault
  text的的属性是flexgrow :1 ,flexshrink: 1,flex-basis: auto
  最终高度
  tHdefault+perBanlance*1 也就是页面剩余高度加上自身高度，所以充满了页面。
-->
  <button style="flex:0 1 auto;width:100%" type="primary">top</button>
  <text style="flex:1 1 auto;width:100%;background-color:red">content</text>
</view>

样式文件

/* flex/flextest.wxss */


/* 这是是必须要设置的，这样才能确定页面的高度为屏幕高度 */
page{
  height: 100%;
}
.container{
  display: flex;
  flex-direction: column;
  height: 100%;
}

看注释！！看注释！！看注释！！

重要的事情说三遍。我的解释都在代码的注释里面了。

最终效果就是我刚开始想实现的

 这个flex和Android中的weight非常相像。

结论：利用flex可以划分flex布局中组件相互的大小占比。

利用flex=0或者1可以满足对项目中要求某个空间填满页面剩余控件的需求