第五章 应用设计总结

---

前言

本次是整个项目的具体总结，还有一些关于前文没有提到的技术原理进行介绍。

---

一、渲染组件

1.ForEach循环渲染

类比C等语言，ForEach就是在HarmonyOS下的循环语句，对代码相同的对象进行统一渲染，达到代码简洁的作用。在本次项目中，主页三个页面都使用了ForEach循环渲染。

首页：

      Grid(){
        ForEach(this.navData, (item: ItemType) => {
          GridItem(){
            Column(){
              Image(item.img)
                .width(25)
                .height(25)
              Text(item.title)
                .fontSize(14)
                .margin({top: 4})
            }
          }
        })
      }
      ...
            List({space: 12}){
        ForEach(this.listsData, (item: ItemType) => {
          ListItem(){
            Image(item.img)
              .objectFit(ImageFit.Cover)
              .aspectRatio(1.3)
          }
          .margin({left: 5, right: 5})
        })
      }

精选：

      List({ space: 8 }) {
        ForEach(
          this.items,
          (item: Item) => {
            ListItem() {
              ItemCard(item)
            }
          }
        )
      }

我的：

    List(){
      ForEach(this.listData, (item:ItemType) => {
        ListItem(){
          Row(){
            Row({space: 10}){
              Image(item.img)
                .width(22)
                .height(22)
              Text(item.title)
                .fontSize(16)
            }
            //开关组件
            //isOn 开关的打开或关闭状态 true打开
            Toggle({type:ToggleType.Switch, isOn:false})
              .onChange((isChange:Boolean) => {
                //isChange打开或关闭的状态
                let tip:string = isChange?'系统选项打开':'系统选项关闭'
                promptAction.showToast({
                  message:tip,
                  duration:3000
                })
              })
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
          .padding(12)
        }
        .height(50)
      })
    }

2.if…else条件渲染

if…else条件渲染页也多次运用于App中，有着多种应用形式。

登录页面：

            if(this.user=='' || this.password==''){
              //不能跳转，同时给出弹窗提示
              promptAction.showToast({
                message: '用户名或密码不能为空',
                duration: 3000,  //持续的时间
                bottom: 60
              })
            }else {
              //路由跳转
              router.pushUrl({
                url: 'pages/MainPage'
              }).catch((error: Error) => {
                //错误提示
              })
            }

主页页签切换：

              if(index===0){
                Home()
              }else if (index===1){
                Choice()
              }else {
                Mine()
              }

二、数据类型接口定义

1.在本项目中给数据类型接口定义为ItemType，其中添加了 id 、title 、img三个数据类型。

2.代码

interface ItemType{
  id?: number;
  title?: string | Resource;
  img?: string | Resource;
}

其中问号代表使用该数据类型接口时可以有这些类型，也可以没有。

三、总结

通过本次鸿蒙项目，对HarmonyOS开发有了更新的认识，学习到了更多的鸿蒙开发案例和经验。