HarmonyOS 鸿蒙Next ArkUI eTS应用开发训练营 半成品演示

HarmonyOS 鸿蒙Next ArkUI eTS应用开发训练营 半成品演示 #HarmonyOS-ArkUI应用开发训练营#

非常感谢华为开发者联盟举办的“ArkUI应用开发训练营“活动！并邀请2021年华为开发者联盟年度牛人张旭乾老师来授课。期间共带来3门视频课、2场直播课。张老师主讲内容是零基础入门HarmonyOS应用开发，快速熟悉eTS为主导的应用前后端开发。因为前几次对于我文章开头分享的课程链接一致好评，我这次继续把课程链接分享下方，对ArkUI应用开感兴趣的可以了解了解。啊哈哈哈哈哈（狗头保护.jpg）

视频：

入门篇

前端实战篇

后端实战篇

直播回放

文档：

应用开发导读(JS/eTS)

老师的课程已经结束好几天了，因为这几天家里比较忙，也没来得及跟着老师写代码，周末终于不忙了，就重新跟着老师的课程写代码，看张老师前端实战篇的视频，把这一节的相关代码写了一遍。如果有错误，欢迎各位老师及时指正。

贴一部分代码，这段代码主要是用网格布局，用Grid来指定“项目”所在的单元格做出各种各样的布局。调用router.push()接口将uri指定的页面添加到路由栈中，即跳转到uri指定的页面。

import router from '@ohos.router'
@Componentstruct MyGridContainer{
  @State btnList:number[]=[
    1,2,3,4,5,6
  ]
  build(){
    GridContainer({
      columns:12,
      gutter:5,
      margin:0
    }){
      Column({
        space:5
      }){
        Grid(){
          ForEach(this.btnList,(item,index)=>{
            if(index==0){
              GridItem(){
                Button("开始写贴")
                  .onClick(()=>{
                    router.push({
                      url:"pages/articlepage",
                      params:{
                        article_id:-1
                      }
                    })
                  })
                  .type(ButtonType.Normal)
                  .width("100%")
                  .height("100%")
                  .borderRadius(5)
              }
              .rowStart(0)
              .rowEnd(1)
              .columnStart(0)
              .columnEnd(1)
            }
            if(index==1){
              GridItem(){
                Button("美食分享")
                  .onClick(()=>{
                    router.push({
                      url:"pages/foodsharingpage",
                      params:{
                        article_id:-1
                      }
                    })
                  })
                  .type(ButtonType.Normal)
                  .width("100%")
                  .height("100%")
                  .borderRadius(5)
              }
              .rowStart(0)
              .rowEnd(0)
              .columnStart(2)
              .columnEnd(3)
            }
            if(index==2){
              GridItem(){
                Button("论编程入门到放弃")
                  .type(ButtonType.Normal)
                  .width("100%")
                  .height("100%")
                  .borderRadius(5)
              }
              .rowStart(1)
              .rowEnd(0)
              .columnStart(2)
              .columnEnd(3)
            }
            if(index==3){
              GridItem(){
                Button("运动健身")
                  .type(ButtonType.Normal)
                  .width("100%")
                  .height("100%")
                  .borderRadius(5)
              }
              .rowStart(1)
              .rowEnd(1)
              .columnStart(2)
              .columnEnd(3)
            }
            if(index>3){
              GridItem(){
                Button("恋爱话术大师")
                  .type(ButtonType.Normal)
                  .width("100%")
                  .height("100%")
                  .borderRadius(5)
              }
              .rowStart(2)
              .rowEnd(2)
              .columnStart(2)
              .columnEnd(3)
            }
          })
        }
        .width("100%")
        .height(200)
        .columnsTemplate("1fr 1fr 1fr  1fr") //列
        .border({width:1,color:"#000"})
      }
    }
    .width("100%")
  }
}
export default MyGridContainer

其它代码就不放了，接下来放一个半成品视频

能跟着老师做出第一个小demo，内心还是非常激动的，毕竟是第一次，（狗头保护.jpg）也希望在未来的几天学习，也能够做出自己设计的小demo，加油，张矜持，加油千万鸿蒙人，加油加油加油！！！