HarmonyOS Next 办公应用:信息展示页面的开发实现(二)

3. 主要业务功能区域构建

buildMainBusiness 方法构建主要业务功能区域,使用 ForEach 动态渲染多个业务功能项。点击不同的业务功能项会触发不同的操作,如点击第二个功能项会调用 call.makeCall 进行拨打电话。

typescript 复制代码
@Builder
buildMainBusiness() {
  Row() {
    ForEach( HomeViewModel.getMainBusinessBuild(), (item: BusinessInfo,index: number) => {
      Column() {
        Image(item.icon)
          .width(24)
          .height(24)
          .margin({bottom: 3})
        Text(item.text)
          .fontSize(14)
          .fontColor(Color.White)
      }
      .onClick(()=> {
        if (index===1) {
          call.makeCall((this.phone).toString(), (err: BusinessError) => {});
        } else {
          promptAction.showToast({
            message: '可自行添加模板',
            duration: AppStorage.get('dialogTime')
          });
        }
      })
    }, (item: BusinessInfo, index: number) => index + JSON.stringify(item))
  }
  .justifyContent(FlexAlign.SpaceEvenly)
  .margin({top: 10})
  .padding({top:5, bottom:5})
  .width('100%')
  .backgroundColor($r('app.color.liabilities_title'))
}
4. 样式扩展

通过 @Extend 装饰器扩展 RowColumnText 组件的样式,提高代码的复用性。

typescript 复制代码
@Extend(Row) function rowStyle(){
  .margin({top:5,bottom:5})
  .padding({top: 5, right: 30,bottom: 5, left: 10})
}
@Extend(Column) function columnStyle(){
  .margin({top:5,bottom:5})
}
@Extend(Text) function textStyle(){
  .fontColor($r('app.color.tab_un_image'))
  .fontSize(12)
}

总结

通过上述核心代码,我们在 HarmonyOS Next 中成功构建了一个信息展示页面。该页面利用 @Consume 装饰器实现页面导航,在 onReady 中获取并解析导航参数以初始化用户信息。使用 ForEach 动态渲染业务功能项,支持点击操作进行拨打电话等功能。同时,通过 @Extend 装饰器扩展组件样式,提高了代码的复用性。开发者可以根据实际需求进一步扩展和优化该页面,如增加更多的业务功能项、完善信息展示内容等,以满足更多办公场景的需求。

相关推荐
zhanshuo6 分钟前
鸿蒙系统防黑秘籍:如何彻底防止恶意应用窃取用户数据?
harmonyos
财经三剑客4 小时前
鸿蒙智行6月交付新车52747辆 单日交付量3651辆
华为·harmonyos
睿麒4 小时前
鸿蒙app 开发中的 map 映射方式和用法
华为·harmonyos
zhanshuo6 小时前
鸿蒙 Secure Boot 全流程解析:从 BootROM 到内核签名验证的实战指南
harmonyos
zhanshuo6 小时前
鸿蒙系统安全机制全解:安全启动 + 沙箱 + 动态权限实战落地指南
harmonyos
塞尔维亚大汉6 小时前
鸿蒙内核源码分析(用户态锁篇) | 如何使用快锁Futex(上)
harmonyos·源码阅读
爱笑的眼睛1117 小时前
08-自然壁纸实战教程-视频列表-云
华为·harmonyos
Georgewu1 天前
【HarmonyOS 5】鸿蒙中自定义弹框OpenCustomDialog、CustomDialog与DialogHub的区别详解
harmonyos
塞尔维亚大汉1 天前
鸿蒙内核源码分析(消息封装篇) | 剖析LiteIpc 进程通讯内容
harmonyos·源码阅读
Georgewu1 天前
【HarmonyOS NEXT】鸿蒙跳转华为应用市场目标APP下载页
harmonyos