好！

首先看下面，一个计算器的界面，也就是我们本次要实现的最终目标！

计算器本器.png

在lu代码之前，我们先来看一下界面大概的组件布局：

（不愧是入门级的计算器项目，真的是特别简单的只有view组件的布局!）

首先当然是一个最大的container包裹，然后界面分为上下两部分，分别是显示部分screen和按钮群btns。按钮群中因为要考虑 “=” 等于号的跨行，于是我将btns设置为水平方向的弹性布局。代码如下：

<view class="container">

  <!--screen是上面整个显示屏，cal-view用来显示式子，result-view用来显示结果-->
  <view class="screen">
    <view class='cal-view'>100+23</view>
    <view class="result-view">123</view>
  </view>
  

  <view class='btns'>
 <!--将按钮分成四列，看着上面的图片差不多就可以想象出来啦-->
    <view class='btnGroup'>
      <view class="btnItem btnColor acbtn">AC</view>
      <view class="btnItem btnColor">7</view>
      <view class="btnItem btnColor">4</view>
      <view class="btnItem btnColor">1</view>
      <view class="btnItem btnColor">.</view>
    </view>

    <view class="btnGroup">
      <view class="btnItem btnColor">%</view>
      <view class="btnItem btnColor">8</view>
      <view class="btnItem btnColor">5</view>
      <view class="btnItem btnColor">2</view>
      <view class="btnItem btnColor">0</view>
    </view>

    <view class="btnGroup">
      <view class="btnItem btnColor">÷</view>
      <view class="btnItem btnColor">9</view>
      <view class="btnItem btnColor">6</view>
      <view class="btnItem btnColor">3</view>
      <view class="btnItem btnColor">DEL</view>
    </view>

    <view class="btnGroup">
      <view class="btnItem btnColor">×</view>
      <view class="btnItem btnColor">-</view>
      <view class="btnItem btnColor">+</view>
      <view class="btnItem btnColor equal">=</view>
    </view>
  </view>
</view>

当然啦~现在的界面就是一个字 “很丑”= =
hhhhhhh

没有css美化的界面.png

但是没关系啊，我们来一步步给组件添加样式进行布局和美化：


.container{
  width: 100%;
  height:100%;
  /*垂直的弹性布局*/
  display: flex;
  flex-direction: column;

  align-items: center;
  box-sizing: border-box;
  background:white;
  background-repeat: repeat;
  padding: 30rpx;
}
/*显示屏的样式*/
.screen{
  width:680rpx;
  height:480rpx;
  line-height: 145rpx;
  padding-right: 30rpx;
  margin-bottom: 30rpx;
  background-color: #fbc32e;
  border-radius: 3px;
  text-align: right;
}
/*显示屏里的第一部分，计划用来放计算的式子*/
.cal-view{
   height:140rpx;
   color:grey;
   /*border:1px white solid;*/
   margin-top:60px;
}
/*显示屏的第二部分，用来放输入的按键*/
.result-view{
    font-size:50px;
    color:white;
}
/*下面的按钮用一个btns的view包裹，设置成水平方向的弹性布局，
*将按钮分成四列，也就是四个btnGroup
*/
.btns{
  display: flex;
  flex-direction: row;
}
/*每一列按钮又重新布局*/
.btnGroup{
  display:flex;
  flex-direction: column;
}
/*按钮的样式*/
.btnItem{
  width:160rpx;
  height:100rpx;
  margin:10rpx;
  border-radius:5px;
  text-align: center;
  line-height: 100rpx;
}
.btnColor{
  color:#838383;
  border:solid 1px #dbdbdb;
  background:#efefef;
}
/*等于号和清屏按钮的特殊样式*/
.equal{
  line-height: 230rpx;
  height:225rpx;
}
.acbtn,.equal{
  color:#fbc32e;
}

把这些写完，开头的计算器界面就实现啦！

PS：虽然我的水平不是很高，但是希望也能帮助到你= =。我希望能坚持在简书记录我的成长，一起加油吧！

最后编辑于：2019.03.21 23:57:39