HarmonyOS之构建用户界面

• 添加容器

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

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

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

     {{$item.value}}    

// xxx.jsexport 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，使用示例如下：

     Hzw Potter Jay               

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

•  添加交互

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

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

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

        实现实例如下：

/* 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.jsexport 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的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的jsimport 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值进行修改     } });    }}}

     Hello {{title}}        

/*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.jsimport router from "@system.router";export default {    data: { title: ""    },    goBack(){ router.back();    }}

实现效果：

选项一：

 选项二：