【鸿蒙实战教程】华为HarmonyOS NEXT 开发一个简单的聊天界面

最新推荐文章于 2025-05-17 08:45:58 发布

「已注销」

最新推荐文章于 2025-05-17 08:45:58 发布

阅读量2k

点赞数 11

CC 4.0 BY-SA版权

文章标签：华为 harmonyos 鸿蒙鸿蒙系统

本文链接：https://blog.youkuaiyun.com/HarmonyOS_001/article/details/139755588

前言

根据研究机构Counterpoint Research发布的最新数据，2024年第一季度，鸿蒙OS份额由去年一季度的8%上涨至17%，iOS份额则从20%下降至16%。

这意味着，华为鸿蒙OS在中国市场的份额超越苹果iOS，已成中国第二大操作系统

随着鸿蒙市场份额的不断提升，相应的岗位也会迎来一个爆发式的增长。这对于想要换赛道的程序员来说是一个非常好的消息，话说大家最近有想法转型鸿蒙开发吗？

今天来讲讲鸿蒙系统中开发一个简单的聊天界面

一、先说说遇到的问题

●HarmonyOS ArkTS 组件里面并没有css伪类这个概念,所以我研究聊天气泡弹窗的三角符号的时候浪费了不少时间。
●然后是组件定位文档里面 position 绝对定位 markAnchor 锚点 offset 相对定位这些都是设置 x y 没有web前端那样可以设置bottom,right来得直接高效。
●把聊天输入框放在底部一开始用position实现发现确实不好用，最后改成了Stack堆叠的方式实现，发现效果还不错。

二、开始实现聊天界面

1.先上最终的效果图吧。

在这里插入图片描述

2.创建项目可以参考我之前的文章构建第一个ArkTS应用。

3.在Index.ets页面创建构造消息实例

class MsgType {
  avatar:string
  id:number
  content:string
  type:number

  constructor(avatar: string,id: number, content: string, type: number) {
    this.avatar = avatar;
    this.id = id;
    this.content = content;
    this.type = type;
  }
}

4.创建消息对话列表

利用 Flex 组件 direction 属性 FlexDirection.RowReverse 当是自己发送的消息type等于2 时将头像和消息气泡反转


class MsgType {
  avatar:string
  id:number
  content:string
  type:number

  constructor(avatar: string,id: number, content: string, type: number) {
    this.avatar = avatar;
    this.id = id;
    this.content = content;
    this.type = type;
  }
}


@Entry
@Component
struct Index {
  controller: TextInputController = new TextInputController()
  private avatar:string="https://img2.baidu.com/it/u=283928093,2746724785&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
  @State msgText:string="";
  @State listData: Array<MsgType> = [
    {
      avatar:"https://q3.itc.cn/q_70/images03/20240519/1b4e7565b46241b68288ae482412a866.jpeg",
      id:1,
      content:"真实一条测试记录真实一条测试记录真实一条测试记录真实一条测试记录真实一条测试记录真实一条测试记录真实一条测试记录真实一条测试记录",
      type:1,
    },
    {
      avatar:"https://q3.