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 中成功构建了一个支持多种消息类型的消息气泡组件。该组件通过状态和属性控制消息气泡的显示样式和内容,根据消息方向和类型展示不同的布局。开发者可以根据实际需求进一步扩展该组件,如添加更多的消息类型、优化布局样式等,以满足更多办公场景的消息展示需求。

相关推荐
鸿蒙先行者2 小时前
鸿蒙应用开发问题之Ability生命周期管理问题
harmonyos
小小小小小星2 小时前
鸿蒙FA/PA架构设计方法论与技术探索
架构·harmonyos
在下历飞雨6 小时前
七夕到了,我让AI用Kuikly写了个“孤寡青蛙“App,一码五端真丝滑!
harmonyos
GitCode官方8 小时前
直播预告|鸿蒙原生开发与智能工具实战
华为·harmonyos
Monkey-旭8 小时前
鸿蒙 5.1 深度解析:ArkUI 4.1 升级与分布式开发新范式
分布式·wpf·harmonyos·arkts·openharmony·arkui
北京流年8 小时前
鸿蒙banner页实现
华为·harmonyos
xq952710 小时前
鸿蒙next 游戏授权登录教程王者归来
harmonyos
HarderCoder11 小时前
重学仓颉-8泛型完全指南:从基础到高级应用
harmonyos
被开发耽误的大厨21 小时前
鸿蒙ArkUI 基础篇-06-组件基础语法-Column/Row/Text
华为·harmonyos
HarderCoder1 天前
重学仓颉-7类与接口完全指南:从基础到高级特性
harmonyos