HarmonyOS应用开发-仿微信UI实现

发布时间:2023年12月29日

在本篇博客中,介绍一个仿微信的 HarmonyOS 应用,应用包括微信的首页、通讯录、发现、我的页面,以及聊天界面。

一、先上效果图:

二、代码解读

以聊天界面为例,代码如下(解读在代码下面):

import {Title} from '../model/CommonStyle'
import router from '@ohos.router'

@Entry
@Component
  // 定义聊天详情页面的结构
export struct ChatDetailPage {
  // 用户头像
  private userAvatar: string = router.getParams()['userAvatar'] as string
  // 用户名
  private userName: string = router.getParams()['userName'] as string
  // 聊天详情
  private chatDetail: string = router.getParams()['chatDetail'] as string

  // 构建方法
  build() {
    Column() {
      // 标题
      Title({ text: this.userName })
      // 左侧消息气泡
      LeftMsgBubble({ imageSrc: this.userAvatar, text: "今天天气真好,想不想一起去户外活动?" })
      // 右侧消息气泡
      RightMsgBubble({ imageSrc: "user20.webp", text: "当然想啊,你打算去哪里?" })
      // 左侧消息气泡
      LeftMsgBubble({ imageSrc: this.userAvatar, text: "我想去公园,逛逛花花草草,你觉得怎么样?" })
      // 右侧消息气泡
      RightMsgBubble({ imageSrc: "user20.webp", text: "好主意!我也喜欢大自然的感觉。" })
      // 右侧消息气泡
      RightMsgBubble({ imageSrc: "user20.webp", text: "我们可以带上飞盘或者羽毛球,一起玩玩怎么样?" })
      // 左侧消息气泡
      LeftMsgBubble({ imageSrc: this.userAvatar, text: "太棒了,我会准备一些小吃,我们一起享受阳光吧!" })
    }.height("100%")
  }
}

// 左侧消息气泡组件
@Component
struct LeftMsgBubble {
  private imageSrc: string
  private text: string

  // 构建方法
  build() {
    Row() {
      // 用户头像
      Image($rawfile(this.imageSrc)).width('120px').height('120px').margin({ left: '10px', right: '10px' })
      // 文本消息
      Text(this.text)
        .fontSize('14fp')
        .backgroundColor("#cccccc")
        .padding(10)
        .borderRadius(10)
        .margin({ right: '280px' })
    }
    .width('100%')
    .margin({ top: '20px', bottom: '20px' })
    .alignItems(VerticalAlign.Top)
  }
}

// 右侧消息气泡组件
@Component
struct RightMsgBubble {
  private imageSrc: string
  private text: string

  // 构建方法
  build() {
    Flex({ direction: FlexDirection.RowReverse }) {
      // 用户头像
      Image($rawfile(this.imageSrc))
        .width('120px')
        .height('120px')
        .margin({ left: '10px', right: '10px' })
        .objectFit(ImageFit.Contain)

      Flex({ direction: FlexDirection.RowReverse, justifyContent: FlexAlign.Start }) {
        // 文本消息
        Text(this.text)
          .fontSize('14fp')
          .backgroundColor("#1dde40")
          .padding(10)
          .borderRadius(10)
          .margin({ left: '140px' })
      }
    }.margin({ top: '20px', bottom: '20px' })
  }
}

??????

这段代是使用ArkTS语言?来构建聊天详情页面的 UI 组件。以下是对代码的简要解释:

  1. ChatDetailPage 结构体:
    • userAvatar、userName、chatDetail 是私有成员变量,通过路由获取用户头像、用户名和聊天详情。
    • build 方法定义了页面的结构,包括标题和一系列的消息气泡。
  2. LeftMsgBubble 和 RightMsgBubble 组件:
    • 这两个组件分别表示左侧和右侧的消息气泡。
    • imageSrc 存储用户头像的路径,text 存储消息文本。
    • build 方法定义了每个消息气泡的结构,包括图片和文本。左侧消息气泡的背景色为灰色,右侧消息气泡的背景色为绿色。
  3. Flex 和 Column:
    • Flex 和 Column 是布局相关的组件,用于定义灵活的盒状模型,方便构建响应式的用户界面。
  4. Image 和 Text 组件:
    • Image 和 Text 组件用于显示图片和文本内容。
    • 通过 $rawfile 函数获取图片资源。
  5. 样式设置:
    • 通过方法链式调用设置了消息气泡的样式,包括大小、边距、背景色、文本大小等。
  6. Flex 相关属性:
    • 使用了 FlexDirection、FlexAlign 等属性,通过这些属性设置了消息气泡的布局方式。
  7. 组件嵌套:
    • 左右两侧的消息气泡组件被嵌套在 Column 和 Flex 中,形成了聊天页面的布局。

三、项目地址

完整项目代码:

OurChat: HarmonyOS ArkUI的仿微信界面

文章来源:https://blog.csdn.net/liuhaikang/article/details/135281006
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。