零基础开始学习鸿蒙开发-评论区的制作

前言:利用TextArea文本域制作一个评论区，评论区下面显示评论区的内容

1.下面简单介绍TextArea的使用。

代码示例:

//在placeholder设置提示用户输入的内容，通过onchange事件监听文本域输入的内容/
 TextArea({ placeholder: '请输入评论内容' }).onChange((content: string) => {
        this.content = content;
      }).height(200).width(270)

2.通过List展示文本评论区的内容

代码示例:
//通过ForEach循环遍历初始化的数据，或者请求返回来的数据
 List() {
          //通过foEach循环获取数据
          //循环遍历我们的游戏。
          ForEach(this.commentList, (item) => {
            ListItemGroup() {
              ListItem() {
                Row({ space: 2 }) {
                  Text('时间:')
                  Text(item.createTime)
                }
              }
              ListItem() {
                Row({ space: 2 }) {
                  Text('评论内容:')
                  Text(item.content)
                }
              }
            }
          }, item => item)
        }

3.下面是完整的评论区的制作代码

import  postCommont from  '../utils/CommentUtil'
import ArrayList from '@ohos.util.ArrayList';
@Observed
export  class CommentEntity{
  private id:number;
  //定义内容
  private content:string;
  //定义时间
  private createTime:string;
}
@Entry
@Component
struct textAreaPage {
  //定义一个空的数组
  @State commentList: Array<CommentEntity> = [].concat(
    {
      "createTime": "2023-12-2 15:00:00",
      "content": "外你"
    }
  );
  @State  private content: string=""
  @State private commentURl: string = 'http://ntek44b.nat.ipyingshe.com/comment';
 /* @State private getList: string = 'http://ntek44b.nat.ipyingshe.com/getList';*/
  //定义一个空字符串数组
  build() {
    Column({ space: 8 }) {
      TextArea({ placeholder: '请输入评论内容' }).onChange((content: string) => {
        this.content = content;
      }).height(200).width(270)
      Button('评论留言').onClick(async () => {
        //将请求写入数据
        let res = await postCommont(this.commentURl, this.content);
        console.log("responseCode====",res.responseCode)
        console.log("res====",JSON.stringify(res))
      }).width("80").height("30")
      Text('-----------以下显示评论内容-------').width("100%")
      Column({ space: 2 }) {
        //下面用于一个List展示评论的内容
       List() {
          //通过foEach循环获取数据
          //循环遍历我们的游戏。
          ForEach(this.commentList, (item) => {
            ListItemGroup() {
              ListItem() {
                Row({ space: 2 }) {
                  Text('时间:')
                  Text(item.createTime)
                }
              }
              ListItem() {
                Row({ space: 2 }) {
                  Text('评论内容:')
                  Text(item.content)
                }
              }
            }
          }, item => item)
        }
      }
    }.width("100%").height("100").backgroundColor(Color.White)
  }
}

4.效果如下图