• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2023 Hunan OpenValley Digital Industry Development 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 router from '@ohos.router';
17import Logger from '../../utils/Logger';
18
19const TAG = '[Message]';
20
21@Entry
22@Component
23struct Message {
24  @State show: boolean = false;
25  @State text: string = '';
26  scroller: Scroller = new Scroller();
27
28  async aboutToAppear() {
29    this.text = AppStorage.get('text')!;
30    Logger.info(TAG, `Message===this.text===${this.text}`);
31  }
32
33  async aboutToDisappear() {
34    Logger.info(TAG, 'Message===aboutToDisappear===');
35  }
36
37  async onPageShow() {
38    Logger.info(TAG, 'Message===onPageShow===');
39  }
40
41  async onPageHide() {
42    Logger.info(TAG, 'Message===onPageHide===');
43  }
44
45  build() {
46    Column() {
47      RelativeContainer() {
48        Text($r('app.string.message_baby'))
49          .fontColor(Color.White)
50          .fontSize(22)
51          .fontWeight(FontWeight.Regular)
52          .alignRules({
53            middle: { anchor: '__container__', align: HorizontalAlign.Center },
54            center: { anchor: '__container__', align: VerticalAlign.Center }
55          })
56          .id("test1")
57        Image($r("app.media.icon"))
58          .width(30)
59          .height(30)
60          .onClick(() => {
61            router.back()
62          })
63          .alignRules({
64            right: { anchor: '__container__', align: HorizontalAlign.End },
65            center: { anchor: '__container__', align: VerticalAlign.Center }
66          })
67          .id("test2")
68      }
69      .height(30)
70      .width('90%')
71      .margin({ top: 40, bottom: 20 })
72
73      Row() {
74        Image($r('app.media.icon'))
75          .width(100)
76          .height(100)
77          .objectFit(ImageFit.Contain)
78
79        Column() {
80          Row() {
81            Text(this.text)
82              .fontSize(22)
83              .fontColor(Color.White)
84              .margin({ bottom: 20 })
85          }
86          .width(400)
87
88          Row() {
89            Text($r('app.string.message_text'))
90              .fontColor($r('app.color.message_text'))
91              .fontSize(18)
92          }
93          .width(400)
94        }
95        .justifyContent(FlexAlign.Start)
96        .margin({ left: 10 })
97      }
98      .width('100%')
99      .margin({ left: 15, bottom: 10 })
100
101      Scroll(this.scroller) {
102        Column() {
103          Row() {
104            Image($r('app.media.icon'))
105              .height(200)
106              .width('40%')
107
108            Image($r('app.media.icon'))
109              .height(200)
110              .width('40%')
111          }
112          .width('100%')
113          .justifyContent(FlexAlign.SpaceAround)
114
115          Row() {
116            Image($r('app.media.icon'))
117              .height(200)
118              .width('40%')
119
120            Image($r('app.media.icon'))
121              .height(200)
122              .width('40%')
123          }
124          .margin({ top: 12 })
125          .width('100%')
126          .justifyContent(FlexAlign.SpaceAround)
127
128          Row() {
129            Image($r('app.media.icon'))
130              .height(200)
131              .width('40%')
132
133            Image($r('app.media.icon'))
134              .height(200)
135              .width('40%')
136          }
137          .margin({ top: 12 })
138          .width('100%')
139          .justifyContent(FlexAlign.SpaceAround)
140
141          Row() {
142            Image($r('app.media.icon'))
143              .height(200)
144              .width('40%')
145
146            Image($r('app.media.icon'))
147              .height(200)
148              .width('40%')
149          }
150          .margin({ top: 12 })
151          .width('100%')
152          .justifyContent(FlexAlign.SpaceAround)
153
154          Row() {
155            Image($r('app.media.icon'))
156              .height(200)
157              .width('40%')
158
159            Image($r('app.media.icon'))
160              .height(200)
161              .width('40%')
162          }
163          .margin({ top: 12 })
164          .width('100%')
165          .justifyContent(FlexAlign.SpaceAround)
166
167          Row() {
168            Image($r('app.media.icon'))
169              .height(200)
170              .width('40%')
171
172            Image($r('app.media.icon'))
173              .height(200)
174              .width('40%')
175          }
176          .margin({ top: 12 })
177          .width('100%')
178          .justifyContent(FlexAlign.SpaceAround)
179
180          Row() {
181            Image($r('app.media.icon'))
182              .height(200)
183              .width('40%')
184
185            Image($r('app.media.icon'))
186              .height(200)
187              .width('40%')
188          }
189          .margin({ top: 12 })
190          .width('100%')
191          .justifyContent(FlexAlign.SpaceAround)
192        }
193      }
194      .width('100%')
195      .height('90%')
196      .padding(8)
197      .margin({ left: 12, right: 12, top: 12, bottom: 150 })
198      .backgroundColor(Color.White)
199      .borderRadius(8)
200      .scrollBar(BarState.Off)
201      .borderRadius(24)
202      .scrollable(ScrollDirection.Vertical)
203    }
204    .backgroundColor(Color.Black)
205    .width('100%')
206    .height('100%')
207  }
208}