• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2024 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { Constants } from '../common/Constants';
17import { promptAction, window } from '@kit.ArkUI';
18import { CommentDataSource } from '../model/CommentDataSource';
19
20@Component
21export struct Comment {
22  close: () => void = () => {
23  };
24  private data: CommentDataSource = new CommentDataSource([]);
25  private scroller: Scroller = new Scroller();
26  @State bottomHeight: number = 0;
27
28  aboutToAppear(): void {
29    // 获取导航条高度，手动进行避让
30    window.getLastWindow(getContext(), (err, data) => {
31      const avoidAreaBottom = data.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
32      this.bottomHeight = avoidAreaBottom.bottomRect.height;
33    })
34    // 加载示例评论
35    for (let i = 0; i < Constants.TEST_COMMENTS_COUNT; i++) {
36      this.data.pushItem(i);
37    }
38  }
39
40  build() {
41    Column() {
42      // title
43      Row() {
44        Blank()
45          .width($r('app.integer.immersive_comment_title_blank_width'))
46        Text($r('app.string.immersive_comment_title_label'))
47          .fontSize($r('app.integer.immersive_comment_title_font_size'))
48          .fontWeight(FontWeight.Bold)
49          .width($r('app.integer.immersive_comment_title_font_width'))
50          .textAlign(TextAlign.Center)
51        Row() {
52          Image($r('app.media.immersive_close'))
53            .width($r('app.integer.immersive_comment_title_close_img_size'))
54            .height($r('app.integer.immersive_comment_title_close_img_size'))
55        }
56        .width($r('app.integer.immersive_comment_title_close_button_width'))
57        .height($r('app.integer.immersive_comment_title_close_button_height'))
58        .justifyContent(FlexAlign.Center)
59        .onClick(this.close)
60        .id('close_button')
61      }
62      .width($r('app.string.immersive_full_size'))
63      .height($r('app.integer.immersive_comment_title_height'))
64      .justifyContent(FlexAlign.SpaceBetween)
65      .padding({
66        left: $r('app.integer.immersive_comment_padding'),
67        right: $r('app.integer.immersive_comment_padding')
68      })
69
70      // commets list
71      List({ space: Constants.COMMENT_SPACE, scroller: this.scroller }) {
72        // TODO: 高性能知识点: LazyForEach按需加载，提高加载性能。
73        LazyForEach(this.data, (item: number, index: number) => {
74          ListItem() {
75            this.commentItem(index + 1) // index from 1
76          }
77          .margin({ bottom: index === this.data.totalCount() - 1 ? px2vp(this.bottomHeight) : 0 })
78        }, (item: number) => item.toString())
79      }
80      .width($r('app.string.immersive_full_size'))
81      // TODO: 高性能知识点: 使用了cachedCount设置预加载的评论，提高快速滑动时的性能。
82      .cachedCount(Constants.COMMENTS_LIST_CACHE)
83      .padding({
84        left: $r('app.integer.immersive_comment_padding'),
85        right: $r('app.integer.immersive_comment_padding')
86      })
87      .edgeEffect(EdgeEffect.Spring)
88      .layoutWeight(1) // 自适应布局
89    }
90    .width($r('app.string.immersive_full_size'))
91    .height($r('app.string.immersive_full_size'))
92  }
93
94  @Builder
95  commentItem(index: number) {
96    Row({ space: Constants.COMMENT_ITEM_SPACE }) {
97      Image($r('app.media.immersive_portrait_1'))
98        .width($r('app.integer.immersive_comment_portrait_size'))
99        .height($r('app.integer.immersive_comment_portrait_size'))
100        .borderRadius($r('app.integer.immersive_comment_portrait_radius'))
101
102      Column({ space: Constants.COMMENT_CONTENT_SPACE }) {
103        // id
104        Text(Constants.COMMENTS_DEFAULT_USERNAME + index.toString())
105          .fontSize($r('app.integer.immersive_comment_username_font_size'))
106          .fontColor(Color.Gray)
107        // comment
108        Text($r('app.string.immersive_comment_example'))
109        // comment image
110        Image($r('app.media.immersive_comment_pic'))
111          .width($r('app.integer.immersive_comment_image_size'))
112          .height($r('app.integer.immersive_comment_image_size'))
113          .borderRadius($r('app.integer.immersive_comment_image_radius'))
114        Row() {
115          Text($r('app.string.immersive_comment_time'))
116            .fontSize($r('app.integer.immersive_comment_time_font_size'))
117            .fontColor(Color.Gray)
118          Blank()
119            .width($r('app.integer.immersive_comment_info_blank_width'))
120          Text($r('app.string.immersive_comment_reply_label'))
121            .fontSize($r('app.integer.immersive_comment_reply_font_size'))
122            .fontColor($r('app.color.immersive_comment_reply_font_color'))
123            .onClick(() => {
124              promptAction.showToast({ message: $r('app.string.immersive_mode_other_function') });
125            })
126          Blank()
127          Image($r('app.media.immersive_like'))
128            .width($r('app.integer.immersive_comment_like_icon_size'))
129            .height($r('app.integer.immersive_comment_like_icon_size'))
130            .onClick(() => {
131              promptAction.showToast({ message: $r('app.string.immersive_mode_other_function') });
132            })
133        }
134        .width($r('app.string.immersive_full_size'))
135
136      }
137      .layoutWeight(1) // 自适应布局
138      .alignItems(HorizontalAlign.Start)
139    }
140    .alignItems(VerticalAlign.Top)
141    .width($r('app.string.immersive_full_size'))
142  }
143}
144