界面效果

一个简单的计算器界面，上半部分是结果展示区，下半部分是按键区。

计算器

第一步 整体分割

xml代码

两个view，result区放结果，btns放按键。

<view class="result"></view>
<view class="btns">
</view>

xss代码

• page的布局设为flex： display: flex;
• 方向竖向： flex-direction: column;
• 第一个区域占一半： flex: 1;
• 第二个区域也占一半： .btns{ flex: 1;}

page{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.result{
  flex: 1;
  background: #f3f6fe;
}
.btns{
  flex: 1;
}

第二步 按键区域分为5行

A xml代码

增加5个view，内容先留空

<view class="btns">
  <view>
    
  </view>
  <view>
    
  </view>
  <view>
    
  </view>
  <view>
    
  </view>
  <view>
    
  </view>
</view>

B xss代码

新增的这些元素都是btns对应的view下的，这个就像俄罗斯套娃，一层套一层。这一层具体怎么套，基本是由父级定义决定的。

• 如父级定义 display: flex; flex-direction: column; 这些元素就要竖着排；
• 如父级定义 display: flex; flex-direction: row; 这些元素就要横着排；

.btns{
  flex: 1;
  display: flex;
  flex-direction: column;
}

.btns > view{
  flex: 1;
  border: 1rpx solid #ccc;
}

如此定义后，看不到任何效果，我们可以加一个边框 border: 1rpx solid #ccc;
，就会看到他们呢已经按我们想要的方式布局了。

第三步 填充每一行

现在我们来添加行内内容，就是在上一步留空的view下，增加四个具体的按键内容。

A XML代码

<view class="result"></view>
<view class="btns">
  <view>
    <view hover-class="bg">C</view>
    <view hover-class="bg">DEL</view>
    <view hover-class="bg">%</view>
    <view hover-class="bg">/</view>
  </view>
  <view>
    <view hover-class="bg">7</view>
    <view hover-class="bg">8</view>
    <view hover-class="bg">9</view>
    <view hover-class="bg">*</view>
  </view>
  <view>
    
  </view>
  <view>
    
  </view>
  <view>
    
  </view>
</view>

B xss代码

父级代码

先改它的父级，刚才讲过了，子元素的排列父级说的算。它的父级是上一步添加的view。

.btns > view{
  flex: 1;
  display: flex;
}

这里不用加 flex-direction: row; 为什么呢？因为flex默认就是横着的。

单个按键代码

.btns > view > view{
  flex-basis: 25%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

• flex-basis: 25%; 控制每个元素占整行的25%
• box-sizing: border-box; 这个具体大家百度下吧，就是加了这个后，加上边框还是占25%，不然边框就在外面算了。
• display: flex; align-items: center； justify-content: center;这三行能控制元素居中显示。

第四步 其他细节

其他细节部分无伤大雅，本节主要介绍如何父子嵌套，

• 主要用display：flex ，整体先一分二，
• 按键区域再一分五行
• 每一行再一分四列
  具体的参数可参考这篇 flex布局https://www.cnblogs.com/jianxian/p/11124585.html

代码

<view class="result"></view>
<view class="btns">
  <view>
    <view hover-class="bg">C</view>
    <view hover-class="bg">DEL</view>
    <view hover-class="bg">%</view>
    <view hover-class="bg">/</view>
  </view>
  <view>
    <view hover-class="bg">7</view>
    <view hover-class="bg">8</view>
    <view hover-class="bg">9</view>
    <view hover-class="bg">*</view>
  </view>
  <view>
    <view hover-class="bg">4</view>
    <view hover-class="bg">5</view>
    <view hover-class="bg">6</view>
    <view hover-class="bg">-</view>
  </view>
  <view>
    <view hover-class="bg">1</view>
    <view hover-class="bg">2</view>
    <view hover-class="bg">3</view>
    <view hover-class="bg">+</view>
  </view>
  <view>
    <view hover-class="bg">0</view>
    <view hover-class="bg">.</view>
    <view hover-class="bg">=</view>
  </view>
</view>

page{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.result{
  flex: 1;
  background: #f3f6fe;
}
.btns{
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 1rpx solid #ccc;
  border-left: 1rpx solid #ccc;
}

.btns > view{
  flex: 1;
  display: flex;
}

.btns > view:last-child > view:first-child{
  flex-basis: 50%;
}
.btns > view > view{
  flex-basis: 25%;
  border-right: 1rpx solid #ccc;
  border-bottom: 1rpx solid #ccc;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}