|
|
|
|
移动端

2.1 水平排列

《微信小程序开发入门精要》第2章布局,本章主要介绍了小程序中的主要布局方式,通过这些布局,可以设计出各式各样的UI。本节为大家介绍水平排列。

作者:李宁来源:人民邮电出版社|2017-12-13 15:11

有奖调研 | 1TB硬盘等你拿 AI+区块链的发展趋势及应用调研


第2章 布局

布局是任何支持UI的技术都会涉及到的。小程序的布局采用了和React Native相同的flex(弹性布局)方式,使用方法也类似(只是属性名不同而已)。因此,如果读者已经对React Native的布局比较了解,那么将非常容易掌握小程序布局。即使对React Native的布局不了解,通过对本章的学习,也可以掌握小程序布局的核心技术。

本章要点

水平排列布局

水平折行排列布局

垂直排列布局

垂直折列排列布局

水平排列对齐布局

垂直排列对齐布局

水平等间隔排列布局

带边距的水平等间隔排列布局

2.1 水平排列

小程序的布局和React Native的布局类似,采用了弹性布局的方法,即分为水平和垂直布局。默认是从左向右水平依次放置组件,或从上到下依次放置组件。

wxml文件用于放置参与布局的组件,为了更好地描述小程序是如何布局的,本章使用了带背景色的view组件来演示。view是小程序中所有可视组件的根。

任何可视组件都需要使用样式来设置自身的属性,并完成相应的布局。在小程序中,可以使用两种方式设置样式,一种是class属性,另一种是style属性。前者需要指定在wxss文件中定义的样式,后者允许直接在组件中定义样式属性。例如,如果要水平放置3个view组件,可以在wxml文件中使用下面的代码。

  1. <view class="flex-wrp" style="flex-direction:row"> 
  2. <view class="flex-item bc_green"></view> 
  3. <view class="flex-item bc_red"></view> 
  4. <view class="flex-item bc_blue"></view> 
  5. </view> 

显示的效果如图2-1所示。

在上面的代码中,同时使用了class和style属性。分别指定了样式flex-wrp和样式属性flex-direction:row,其中,后者表示view中的子组件要按水平排列。flex-wrp的定义如下:

  1. .flex-wrp{  
  2. height: 100px;  
  3. display:flex;  
  4. background-color: #FFFFFF;  

其中,display:flex表示弹性布局,flex是Flexible的缩写。

如果class属性需要指定多个样式,样式直接用空格分隔,代码如下:

  1. <view class="flex-item bc_green"></view> 

其中flex-item的代码如下:

  1. .flex-item{  
  2. width: 100px;  
  3. height: 100px;  

前面所有的样式都是在当前页面的index.wxss文件中定义的,而bc_green以及其他几个设置颜色的样式是在app.wxss文件中定义的,所有的页面都可以使用。

  1. .bc_green{  
  2. background-color: #09BB07;  
  3. }  
  4. .bc_red{  
  5. background-color: #F76260;  
  6. }  
  7. .bc_blue{  
  8. background-color: #10AEFF;  
  9. }  
  10. .bc_yellow{  
  11. background-color: #FFBE00;  
  12. }  
  13. .bc_gray{  
  14. background-color: #C9C9C9;  

如果不想使用style属性,可以将flex-direction:row放在样式中。例如,可以在index.wxss文件中添加如下的样式。

  1. .flex-row{  
  2. flex-direction:row;  

然后修改index.wxml文件中的代码如下:

  1. <view class="flex-wrp flex-row" > 
  2. <view class="flex-item bc_green"></view> 
  3. <view class="flex-item bc_red"></view> 
  4. <view class="flex-item bc_blue"></view> 
  5. </view> 

可能很多读者会发现一个问题,本节的例子中只有3个view,如果放置了多个view会怎么样呢?从flex-item样式可知,每个view的尺寸是100*100,单位是像素(px),如果放置过多,可能会发生如下两种情况:

折行。

压缩每一个view的宽度。

那么到底会发生哪种情况呢?我们不妨做一个实验,代码如下:

  1. <view class="flex-wrp flex-row" > 
  2. <view class="flex-item bc_green"></view> 
  3. <view class="flex-item bc_red"></view> 
  4. <view class="flex-item bc_blue"></view> 
  5. <view class="flex-item bc_green"></view> 
  6. <view class="flex-item bc_red"></view> 
  7. <view class="flex-item bc_blue"></view> 
  8. <view class="flex-item bc_green"></view> 
  9. <view class="flex-item bc_red"></view> 
  10. <view class="flex-item bc_blue"></view> 
  11. </view> 

在上述代码中,view中包含了9个子view,保存index.wxml文件后,会显示如图2-2所示的效果。

很明显,每一个view的宽度都被压缩了(因为每一个view的默认尺寸是一个正方形),以适应设备的宽度。不过这种处理方式可能并不符合我们的要求,如果我们的要求是让每一个view的尺寸保持不变,但是一行放不下,怎么能够折到下一行呢?答案就在下一节!


喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码

 

51CTO读书频道活动讨论群:365934973
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

C#和.NET核心技术

本书重点讲解如何用实用的代码来解决具体的实际问题。本书的内容覆盖面很广,从新的C#范型到Web服务,从反射到安全等都有涉及。系统地介绍...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊