HarmonyOS Next 办公应用:消息气泡组件的实现(二)

3. 消息内容显示

MessageContent 方法根据消息类型(小程序消息、文档消息或普通文本消息)显示不同的内容。

typescript 复制代码
@Builder
MessageContent() {
  if (this.isAppletMsg) {
    Column() {
      // 小程序消息内容布局
      Row() {
        Image($r('app.media.ic_tea'))
          .height('16vp')
          .width('16vp')
          .margin({ right: '10vp' })
        Text('奶茶')
          .fontSize('12fp')
          .fontColor('#182431')
          .textAlign(TextAlign.Start)
          .fontWeight(400)
      }
      .margin({ bottom: '7vp' })

      Text(this.content)
        .fontSize('12fp')
        .fontColor('#182431')
        .textAlign(TextAlign.Start)
        .fontWeight(400)
        .margin({ bottom: '8vp' })
        .copyOption(CopyOptions.LocalDevice)
      Flex() {
      }
      .height('138vp')
      .width('186vp')
      .backgroundImage($r('app.media.picture_applet_link'))
      .backgroundImageSize({ width: '186vp', height: '138vp' })
      .constraintSize({ maxWidth: '100%' })
      .margin({ bottom: '6vp' })

      Text('应用')
        .fontSize('10fp')
        .fontColor('#8A9097')
        .textAlign(TextAlign.Start)
        .fontWeight(400)
    }
    .alignItems(HorizontalAlign.Start)
  } else if (this.isDocumentMsg) {
    Column() {
      // 文档消息内容布局
      Row() {
        NormalText({ data: this.content })
          .margin({ right: '10vp' })
          .width('132vp')
        Image($r('app.media.ic_PDF'))
          .height('36vp')
          .width('36vp')
          .margin({ right: '11vp' })
      }
      .margin({ bottom: '4vp' })

      IntroduceText({ data: '24KB' })
        .margin({ bottom: '10vp' })
      Divider()
        .color('#E6E6E6')
        .strokeWidth(1).margin({ bottom: '1vp' })
      Row() {
        Image($r('app.media.ic_file'))
          .width('12vp')
          .height('12vp')
          .margin({ right: '6vp' })
        IntroduceText({
          data: '文档'
        })
          .margin({ top: '-2vp' })
      }
    }
    .alignItems(HorizontalAlign.Start)
    .width('180vp')
    .margin({ bottom: '-7vp' })
  } else {
    Text(this.content)
      .fontSize(12)
      .fontWeight(400)
      .lineHeight('21vp')
      .fontColor('#182431')
      .copyOption(CopyOptions.LocalDevice)
  }
}
  • 根据 isAppletMsgisDocumentMsg 的值,分别构建小程序消息、文档消息和普通文本消息的布局。

总结

通过上述核心代码,我们在 HarmonyOS Next 中成功构建了一个支持多种消息类型的消息气泡组件。该组件通过状态和属性控制消息气泡的显示样式和内容,根据消息方向和类型展示不同的布局。开发者可以根据实际需求进一步扩展该组件,如添加更多的消息类型、优化布局样式等,以满足更多办公场景的消息展示需求。

相关推荐
ilmari5 小时前
HarmonyOS 基于Network Kit封装的网络请求工具
android·flutter·harmonyos
大雷神6 小时前
HarmonyOS中调用C/C++代码(NDK)
harmonyos
simple_lau6 小时前
鸿蒙资源加载深度解析:$r与$rawfile的性能差异与最佳实践
harmonyos·arkts·arkui
zkmall8 小时前
移动商城平台适配:ZKmall开源商城鸿蒙 / 小程序端开发要点
小程序·开源·harmonyos
前端菜鸟日常14 小时前
鸿蒙组件装饰器深度解析:@Component vs @ComponentV2
华为·harmonyos
AlbertZein16 小时前
HarmonyOS5 源码分析 —— ‘状态管理’如何管理的(1)?
架构·harmonyos
鹿鸣天涯18 小时前
鸿蒙OS 系统安全
华为·系统安全·harmonyos
kymjs张涛1 天前
HarmonyOS Next 全兼容,三端统一的路由跳转方案
harmonyos
前端世界1 天前
鸿蒙系统下的动态负载均衡实战:让分布式任务调度更智能
分布式·负载均衡·harmonyos
HarmonyOS小助手1 天前
餐饮服务与软件创新的融合:解析海底捞 APP 的 Flutter 鸿蒙开发之路
harmonyos·鸿蒙·鸿蒙生态