HarmonyOS之构建用户界面

• 添加容器

       要将页面的基本元素组装在一起，需要使用容器组件。在页面布局中常用到三种容器组件，分别是div、list和tabs。

       1.div组件：页面结构相对较简单时，由于div作为单纯的布局容器，可以直接多种子组件，所以可以直接用div作为容器使用。

        2.list组件：当页面结构较为复杂时，可以利用list组件实现更流畅的操作。注意的是，list仅支持list-item作为子组件，使用实例：

<!-- xxx.hml -->
<list class="list">
    <list-item type="listItem" for="{{textList}}">
        <text class="desc-text">{{$item.value}}</text>
    </list-item>
</list>

// xxx.js
export default {
    data: {
        textList:  [{value: '划水'},{value:'摸鱼'}],
    },
}

/* xxx.css */
.desc-text {
    width:689px;
    height:80px;
    font-size:35px;
    background-color:green;
}

         3.tabs组件：当页面需要动态加载时推荐使用tabs组件。tabs组件仅支持一个tab-bar和一个tab-content，使用示例如下：

<!-- xxx.hml -->
<tabs>
    <tab-bar>
        <text>Hzw</text>
        <text>Potter</text>
        <text>Jay</text>
    </tab-bar>
    <tab-content>
        <image src="{{hzwImage}}"></image>
        <image src="{{potterImage}}"></image>
        <image src="{{jayImage}}"></image>
    </tab-content>
</tabs>

// xxx.js
export default {
    data: {
        hzwImage:'common/hzw.png',
        potterImage:'common/potter.png',
        jayImage:'common/jay.png'
    }
}

•  添加交互

        运用div、text、image组件关联click事件构建点赞按钮

        1.image组件用于显示未点赞和点赞的效果

        2.text组件用于显示点赞数

        实现实例如下：

<!--添加交互-->
<div>
    <div class="like" onclick="lickClick">
        <image class="like-img" src="{{likeImage}}" focusable="true"></image>
        <text class="like-num" focusable="true"></text>
    </div>
</div>

/* xxx.css */
.like {
    width: 104px;
    height: 54px;
    border: 2px solid #bcbcbc;
    justify-content: space-between;
    align-items: center;
    margin-left: 72px;
    border-radius: 8px;


}
.like-img {
    width: 33px;
    height: 33px;
    margin-left: 14px;

}
.like-num {
    color: #bcbcbc;
    font-size: 20px;
    margin-right: 17px;
}

// xxx.js
export default {
    data: {
        likeImage:'/common/unLike.png',
        isPressed:false,    //初始值为false
        total:20,
    },
    lickClick() {
        var temp;
        if(!this.isPressed) {   //点赞
            temp=this.total+1;
            this.likeImage = '/common/like.png';
        } else {            //取消点赞
            temp = this.total-1;
            this.likeImage='/common/unLike.png';
        }
        this.total=temp;
        this.isPressed=!this.isPressed;
    },
}

•  页面跳转

        很多应用由多个页面组成，开发者需要通过页面路由将这些页面串联起来，按需实现跳转。

页面路由router根据页面的uri找到目标页面，从而实现跳转。

        基础的两个页面之间的跳转的实现步骤：

        1. 在“Project“窗口，打开entry > src > mainjsdefault，右键点击pages文件夹，选择NewJS Page，创建一个详情页。

        2.调用router.push()路由到详情页

        3.调用router.back()回到首页

        

<!--index的hml-->
<div class="container">
    <button class="btn" value="To Page2" onclick="toPage2"></button>
    <button class="btn" value="To Page2 with Params" onclick="toPage2WithParams"></button>
</div>

/*index的css*/
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 40px;
    text-align: center;
    width: 100%;
    height: 40%;
    margin: 10px;
}

.btn{
    font-size: 20px;
    width: 300px;
    height: 50px;
    color: #000000;
    opacity: 0.9;
    background-color: cadetblue;
    margin:  10px;
}

//index的js
import router from "@system.router";    //导入router模块
export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    },

    toPage2(){
    router.push({
        uri:'pages/page2/page2',//调用router.push()接口将uri指定的页面添加到路由栈中
        });                     // 即跳转到uri指定的页面。
    },

    toPage2WithParams(){
        router.push({
            uri:'pages/page2/page2',
            params:{
                title:'Huawei',     //尝试跳转到此页面时对page2的title值进行修改
            }
        });

    }

}


}

<!--page2的hml-->
<div class="container">
    <text class="title">
        Hello {{title}}
    </text>
    <button class="btn" value="Go Back" onclick="goBack"></button>
</div>

/*page2.css*/
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 38px;
    text-align: center;
    width: 100%;
    margin: 10px;
}
.btn{
    font-size: 20px;
    width: 300px;
    height: 50px;
    color: #000000;
    opacity: 0.9;
    background-color: cadetblue;
    margin:  10px;
}

//page2.js
import router from "@system.router";
export default {
    data: {
        title: ""
    },

    goBack(){
        router.back();

    }
}

实现效果：

   

选项一：

 选项二：