HarmonyOS开发第五天

再熟悉了应用的生命周期和页面周期后，我们接下来要做的事情就是创建一个简单的页面   页面中间是应用log 两边分别是两个选择器。具体呈现鲜果：

首先还是需要三方完成，hml绘，css设置属性，js里面赋值

首先hml里面绘制：为了更好的理解   我们把这个布局分为两个模块两个选择器和图片是一条横的布局块，按钮是一个模块。这样就好理解了，好下手。这两块又在一条垂直的布局里面。

我们先创建一个垂直容器：

<div class="divCol">
    
</div>

取的值名字为divCol，它的具体属性一会我们在css里面设置。之后里面再包含一个横向布局里面包含选择器和图片。

<div class="divCol">
     <div class="divRow">

     </div>
</div>

那么选择器的控件是什么呢？ picker-view 这个去完成选择器的布局 给它一个指向class   选择器的值用range来设置，具体代码：

<picker-view class="pvDuration" range="{{ druationRange }}"/>

class指向pvDuration一会需要再css里面取设置具体属性。具体的取值为druationRange，这个值就要在js里面去赋值了。

选择器有了选择器右边还有个单位  这个单位是文字，就用text生成，具体代码：

<text class="txt">分</text>

因为单位是死值所以只需要写死就好了，如果是动态的就js里面赋值，这里取函数就好。左右各一个中间的图片呢，就用image生成。具体代码：

 <image class="img" src="../../common/images/img_share_whatsapp.png"/>

img需要在css里面设置它的具体的属性，大小这些。指向的话和安卓一样src附上图片所在的地址指向就可以了。

两个选择器和图片就有了，因为按钮在之前就已经生成过了。完整的hml代码：

hml写之后，我们就需要去css里面定义这些属性了。

首先是两个容器：

.divCol {
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.divRow {
    width: 100%;
    height: 150px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

主要设置容器的宽，高，已及排布方式  之前恶补了这些属性值了就不过多解释了。

接下来就是两个选择器：

.pvDuration {
    width: 50px;
    height: 130px;
    font-size: 10px;
}

.pvRhythm {
    width: 80px;
    height: 130px;
    font-size: 10px;
    selected-font-size: 15px;
    text-align: center;

}

大同小异，这个大小已及具体的排布就靠自己去微调了，达到你的预期效果。这里面的属性值还是比较多的，如果不知道哪个具体的意思，就继续去恶补一下哈哈。因为css属性实在是超级多不是短时间就可以完全知道的，是个长期的积累过程。

之后就是单位和图片了：

 

.txt {
    width: 20px;
    height: 36px;
    text-align: center;
    font-size: 15px;
    right: 10px;
}

.img {
    width: 70px;
    height: 70px;
    left: 4px;
}

 按钮之前已经完成了。css的完成代码：

好了所有的布局属性完成之后，只需要差最后一步那就是赋值了，在js里面：

 这些值需要写在data里面：

我们刚才起的名字druationRange赋值需要用[] 类似数组赋值，因为选择器是多个值么.具体代码：

大功告成，这样运行就完全可以达到上面的效果了。今天先这，明天我们继续下一步的功能，一点点的来~~~