构建卡应用框架鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本项目实现了卡应用的基本框架，包括： 1、登录/首页 2、二维码 3、商城 4、我的/设置 等常见tab页的一级页面，方便同类型应用快速启动开发。

构建卡类应用框架源码链接

效果预览

使用说明

进入应用，查看卡应用中的应用框架，方便后续进行同类型应用快速启动开发。

实现思路

1. 使用Navigation导航实现页面跳转，使用Tabs实现首页布局。

Navigation(this.pageStack) {
  Column() {
    Tabs({
      index: this.currentTabIndex,
      controller: this.controller
    }) {...}
    .clip(false)
    .layoutWeight(1)
    .barHeight(0)
    .scrollable(false)
    .onChange((index: number) => {
      this.currentTabIndex = index;
    })
    CustomTabBar({ currentTabIndex: $currentTabIndex })
  }
}
.hideTitleBar(true)
.hideToolBar(true)
.navDestination(this.quickStartRouter)
.titleMode(NavigationTitleMode.Full)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) // 图片组件的绘制区域扩展至状态栏
.clip(false)
.onAppear(() => {
  AppStorage.setOrCreate('pathStack', this.pageStack)
})

2. 点击图标实现选择服务区域。

@Builder
itemBuilder2(area:string,index:number) {
  Column() {
    Text(area)
      .margin(10)
  }
  .width(160)
  .height(110)
  .borderRadius(10)
  .alignItems(HorizontalAlign.Start)
  .backgroundImage($r(this.backgroundImg[index]))
  .backgroundImageSize(ImageSize.FILL)
  .onClick(() => {
    this.currentArea = area
    this.currentIndex = index
    this.pageStack.pop()
  })
}

3. 点击文字实现密码登录和验证码登录的切换。

Text(this.flag ? '密码登录' : "验证码登录").fontColor('#ff6d6d6d')
  .onClick(() => {
    this.flag = !this.flag
  })