使用鸿蒙系统ArkTs语言编写聊天框

一.开发思路、与开发成果。

1.所编写的聊天框是通过TextInput的组件输入咱们想发送的内容，然后点击发送按钮发送内容，但是我们应该想 如何获取到TextInput组件中内容，并且怎么发送，发送到哪里这是问题所在。 所以为我们需要自己来构建函数，首先.我们构建一个send()来连接所发送的数据，然后就是搭建一个聊天界面，并对button按钮添加点击事件就差不多完成了。

结果如下：

二.具体开发流程。

1.内容的显示

因为没有做数据持久化，所以如果想要在聊天框内显示内容先自己搭建一个（其中头像是通过网络请求而来的）

2.搭建聊天框的框架、布局、基础属性的添加。

通过基础组件搭建框架(Row  Column...)搭建页面布局，并通过坐标的形式定位消息框中>的位置和通过rotate属性进行添加旋转属性从而达到简单消息框的实现。

3.创建连接发送数据send()。

send(options: UDPSendOptions, callback: AsyncCallback<void>): void   通过UDPSocket连接发送数据。

三.码源。

class Msg {
  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<Msg> = [
    {
      avatar:"https://img.lovepik.com/element/40077/8422.png_860.png",
      id:1,
      content:"可以提前放假嘛",
      type:1,
    },
    {
      avatar:"https://img.lovepik.com/element/40077/8422.png_860.png",
      id:2,
      content:"学校什么时候给安装空调呀！！太热了  要噶了.....啊啊啊~~~~",
      type:1,
    },
    {
      avatar:"https://c-ssl.dtstatic.com/uploads/blog/202207/09/20220709150824_97667.thumb.1000_0.jpg",
      id:3,
      content:"我也想快快放假回家吹吹空调",
      type:2,
    }
  ]

  send(){
    if(!this.msgText){
      return;
    }
    this.listData.push(
      new Msg(this.avatar,this.listData.length+2, this.msgText, 2)
    );
    setTimeout(()=>{
      this.msgText = null
    },100)
  }

  build() {
    Column() {
      Row(){
      Image($r('app.media.returns')).width(30).rotate({angle:180})
        Blank()
      Image($r('app.media.gengduo01')).width(40)}.width('98%').backgroundColor('#fffffff')
      Stack({ alignContent: Alignment.BottomEnd }) {
        List({ space: 20, initialIndex: 0 }) {
          ForEach(this.listData, (item: Msg) => {
            ListItem() {
              Flex({
                direction: item.type == 2 ? FlexDirection.RowReverse : FlexDirection.Row
              }) {
                Image(item.avatar)
                  .alt($r('app.media.yaofang'))
                  .objectFit(ImageFit.Cover)
                  .width(46)
                  .height(46)
                  .borderRadius(50)
                  .borderWidth(1)
                  .borderColor('#fffffff')

                Row() {
                  Image($r('app.media.returns'))
                    .width(16)
                    .height(16)
                    .fillColor(item.type == 1 ? '#ffffff' : '#ff92e0b7')
                    .objectFit(ImageFit.Cover)
                    .position({
                      x: item.type == 1 ? -10 : '97%',
                      y: 2
                    })
                    .rotate({
                      x: 0,
                      y: 0,
                      z: 1,
                      centerX: '50%',
                      centerY: '50%',
                      angle: item.type == 1 ? 180 : 0
                    })
                  Row() {
                    Text(item.content)
                      .fontSize(14)
                      .fontColor('#333333')
                  }
                  .padding({ right: 10, left: 10 })
                }
                .justifyContent(FlexAlign.Start)
                .align(Alignment.Start)
                .padding({
                  top: 10,
                  bottom: 10
                })
                .width('65%')
                .margin({ left: item.type == 1 ? 15 : 0, right: item.type == 1 ? 0 : 15 })
                .backgroundColor(item.type == 1 ? '#ffffff' : '#ff92e0b7')
                .borderRadius(5)
              }
              .width('100%')
              .padding({
                top: 10,
                right: 10,
                left: 10
              })
            }.onClick(() => {
              console.log('111')
            })
          }, (item) => item.id)
        }.zIndex(1)
        .width('100%')
        .height('100%')
        .padding({ bottom: 80 })

        Column() {
          Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween,
            alignItems: ItemAlign.Center }) {
            Row() {
              TextInput({ text: this.msgText, placeholder: '请输入聊天内容', controller: this.controller })
                .placeholderColor(Color.Grey)
                .placeholderFont({ size: 14, weight: 400 })
                .caretColor(Color.Blue)
                .height(35)
                .fontSize(14)
                .margin({ left: 15 })
                .fontColor(Color.Black)
                .onChange((value: string) => {
                  this.msgText = value
                })
            }
            .flexGrow(1)

            Button('发送')
              .margin(15)
              .fontSize(16)
              .width(100)
              .height(35)
              .backgroundColor('#ff64e394')
              .onClick(() => {
                this.send()
              })
          }

          .width('100%')
          .backgroundColor('#ffffff')
          .margin({bottom:35})
        }
        .width('100%')
        .zIndex(100)
      }.width('100%')
      .height('100%')
      .backgroundColor('#f7f7f7').padding({ top: 5 })
    }
  }
}