• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1import { ComponentContent, LengthUnit } from '@kit.ArkUI';
2
3globalThis.width = 10;
4
5@Builder
6function datePickerComponentBuilder(color: Color) {
7  DatePickerComponent({});
8}
9
10@Builder
11function datePickerDialogComponentBuilder(color: Color) {
12  DatePickerDialogComponent({});
13}
14
15@Builder
16function calendarPickerComponentBuilder(color: Color) {
17  CalendarPickerComponent({});
18}
19
20@Builder
21function calendarPickerDialogComponentBuilder(color: Color) {
22  CalendarPickerDialogComponent({});
23}
24
25@Builder
26function timePickerComponentBuilder(color: Color) {
27  TimePickerComponent({});
28}
29
30@Builder
31function timePickerDialogComponentBuilder(color: Color) {
32  TimePickerDialogComponent({});
33}
34
35@Builder
36function textPickerComponentBuilder(color: Color) {
37  TextPickerComponent({});
38}
39
40@Builder
41function textPickerDialogComponentBuilder(color: Color) {
42  TextPickerDialogComponent({});
43}
44
45@Builder
46function imageComponentBuilder(color: Color) {
47  ImageComponent({});
48}
49
50@Builder
51function imageAnimatorComponentBuilder(color: Color) {
52  ImageAnimatorComponent({});
53}
54
55@Builder
56function counterComponentBuilder(color: Color) {
57  CounterComponent({});
58}
59
60@Builder
61function patternLockComponentBuilder(color: Color) {
62  PatternLockComponent({});
63}
64
65@Builder
66function textClockComponentBuilder(color: Color) {
67  TextClockComponent({});
68}
69
70@Builder
71function textTimerComponentBuilder(color: Color) {
72  TextTimerComponent({});
73}
74
75@Builder
76function dataPanelComponentBuilder(color: Color) {
77  DataPanelComponent({});
78}
79
80@Builder
81function gaugeComponentBuilder(color: Color) {
82  GaugeComponent({});
83}
84
85@Builder
86function loadingprogressComponentBuilder(color: Color) {
87  LoadingProgressComponent({});
88}
89
90@Builder
91function progressComponentBuilder(color: Color) {
92  ProgressComponent({});
93}
94
95@Builder
96function qrCodeComponentBuilder(color: Color) {
97  QRCodeComponent({});
98}
99
100@Builder
101function badgeComponentBuilder(color: Color) {
102  BadgeComponent({});
103}
104
105function printFields(obj: object) {
106  let result: string = '';
107  Object.keys(obj).forEach(key => {
108    result += `${key}: ${obj[key]} `;
109  });
110  return result;
111}
112
113@Component
114struct DatePickerComponent {
115  @State isLunar: boolean = false;
116  @State datePickerModeList: (DatePickerMode)[] = [
117    DatePickerMode.DATE,
118    DatePickerMode.YEAR_AND_MONTH,
119    DatePickerMode.MONTH_AND_DAY,
120  ];
121  @State datePickerModeIndex: number = 0;
122  private selectedDate: Date = new Date('2021-08-08');
123  private onDateChange = 0;
124  @State value1: string = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
125  @State value2: string = 'onDateChange times: ' + this.onDateChange;
126  @State value3: string = 'onDateChange args: ';
127
128  build() {
129    Column() {
130      Divider()
131      Text('回调情况')
132      Text([
133        this.value1,
134        this.value2,
135        this.value3
136      ].join('\n')).backgroundColor(Color.Yellow)
137      Button('切换公历农历')
138        .margin({ top: 10, bottom: 10 })
139        .onClick(() => {
140          this.isLunar = !this.isLunar;
141        })
142      DatePicker({
143        start: new Date('2020-1-1'),
144        end: new Date('2030-1-1'),
145        selected: this.selectedDate,
146        mode: this.datePickerModeIndex
147      })
148        .lunar(this.isLunar)
149        .onDateChange((value: Date) => {
150          this.selectedDate = value;
151          this.onDateChange++;
152          globalThis.width++;
153          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
154          this.value2 = 'onDateChange times: ' + this.onDateChange;
155          this.value3 = 'onDateChange args: ' + value.toString();
156        })
157      Button('mode :' + this.datePickerModeIndex).margin({ top: 20 })
158        .onClick(() => {
159          this.datePickerModeIndex++;
160          if (this.datePickerModeIndex >= this.datePickerModeList.length) {
161            this.datePickerModeIndex = 0;
162          }
163        })
164    }.width('100%')
165  }
166}
167
168@Component
169struct CalendarPickerComponent {
170  private selectedDate: Date = new Date('2024-03-05');
171  private onChange = 0;
172  @State edgeAlignList: (CalendarAlign)[] = [
173    CalendarAlign.START,
174    CalendarAlign.CENTER,
175    CalendarAlign.END,
176  ];
177  @State edgeAlignIndex: number = 0;
178  @State value1: string = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
179  @State value2: string = 'onChange times: ' + this.onChange;
180  @State value3: string = 'onChange args: ';
181
182  build() {
183    Column() {
184      Divider()
185      Text('回调情况')
186      Text([
187        this.value1,
188        this.value2,
189        this.value3
190      ].join('\n')).backgroundColor(Color.Yellow)
191      Column() {
192        CalendarPicker({ hintRadius: 10, selected: this.selectedDate })
193          .edgeAlign(this.edgeAlignIndex)
194          .textStyle({ color: '#ff182431', font: { size: 20, weight: FontWeight.Normal } })
195          .margin(10)
196          .onChange((value: Date) => {
197            this.onChange++;
198            globalThis.width++;
199            this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
200            this.value2 = 'onChange times: ' + this.onChange;
201            this.value3 = 'onChange args: ' + value.toString();
202          })
203      }.alignItems(HorizontalAlign.End).width('100%')
204
205      Button('edgeAlign :' + this.edgeAlignIndex).margin({ top: 20 })
206        .onClick(() => {
207          this.edgeAlignIndex++;
208          if (this.edgeAlignIndex >= this.edgeAlignList.length) {
209            this.edgeAlignIndex = 0;
210          }
211        })
212      Text('日历日期选择器').fontSize(30)
213    }.width('100%')
214  }
215}
216
217@Component
218struct TimePickerComponent {
219  @State isLoop: boolean = true;
220  private selectedTime: Date = new Date('2022-07-22T08:00:00');
221  private onChange = 0;
222  private onEnterSelectedArea = 0;
223  @State value1: string = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
224  @State value2: string = 'onChange times: ' + this.onChange;
225  @State value3: string = 'onChange args: ';
226  @State value4: string = 'onEnterSelectedArea times: ' + this.onEnterSelectedArea;
227  @State value5: string = 'onEnterSelectedArea args: ';
228
229  build() {
230    Column() {
231      Divider()
232      Text('回调情况')
233      Text([
234        this.value1,
235        this.value2,
236        this.value3,
237        this.value4,
238        this.value5
239      ].join('\n')).backgroundColor(Color.Yellow)
240      TimePicker({
241        selected: this.selectedTime,
242        format: TimePickerFormat.HOUR_MINUTE_SECOND,
243        start: new Date('2022-07-22T08:30:00'),
244        end: new Date('2022-07-22T15:20:00'),
245      })
246        .loop(this.isLoop)
247        .useMilitaryTime(false)
248        .disappearTextStyle({ color: '#004aaf', font: { size: 24, weight: FontWeight.Lighter } })
249        .textStyle({ color: Color.Black, font: { size: 26, weight: FontWeight.Normal } })
250        .selectedTextStyle({ color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder } })
251        .onEnterSelectedArea((value: TimePickerResult) => {
252          this.onEnterSelectedArea++;
253          globalThis.width++;
254          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
255          this.value4 = 'onEnterSelectedArea times: ' + this.onEnterSelectedArea;
256          this.value5 = 'onEnterSelectedArea args: ' + printFields(value);
257        })
258        .onChange((value: TimePickerResult) => {
259          if (value.hour >= 0) {
260            this.selectedTime.setHours(value.hour, value.minute);
261          }
262          this.onChange++;
263          globalThis.width++;
264          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
265          this.value2 = 'onChange times: ' + this.onChange;
266          this.value3 = 'onChange args: ' + printFields(value);
267        })
268    }
269  }
270}
271
272@Component
273struct TextPickerComponent {
274  @State isLoop: boolean = false;
275  private select: number = 1;
276  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4'];
277  private onChange = 0;
278  private onEnterSelectedArea = 0;
279  private onScrollStop = 0;
280  @State value1: string = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
281  @State value2: string = 'onChange times: ' + this.onChange;
282  @State value3: string = 'onChange args: ';
283  @State value4: string = 'onEnterSelectedArea times: ' + this.onEnterSelectedArea;
284  @State value5: string = 'onEnterSelectedArea args: ';
285  @State value6: string = 'onScrollStop times: ' + this.onScrollStop;
286  @State value7: string = 'onScrollStop args: ';
287
288  build() {
289    Column() {
290      Divider()
291      Text('回调情况')
292      Text([
293        this.value1,
294        this.value2,
295        this.value3,
296        this.value4,
297        this.value5,
298        this.value6,
299        this.value7
300      ].join('\n')).backgroundColor(Color.Yellow)
301      TextPicker({
302        range: this.fruits,
303        selected: this.select,
304        value: this.fruits[this.select]
305      })
306        .onChange((value: string | string[], index: number | number[]) => {
307          this.onChange++;
308          globalThis.width++;
309          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
310          this.value2 = 'onChange times: ' + this.onChange;
311          this.value3 = 'onChange args: ' + value.toString() + ', ' + index.toString();
312        })
313        .onScrollStop((value: string | string[], index: number | number[]) => {
314          this.onScrollStop++;
315          globalThis.width++;
316          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
317          this.value6 = 'onScrollStop times: ' + this.onScrollStop;
318          this.value7 = 'onScrollStop args: ' + value.toString() + ', ' + index.toString();
319        })
320        .onEnterSelectedArea((value: string | string[], index: number | number[]) => {
321          this.onEnterSelectedArea++;
322          globalThis.width++;
323          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
324          this.value4 = 'onEnterSelectedArea times: ' + this.onEnterSelectedArea;
325          this.value5 = 'onEnterSelectedArea args: ' + value.toString() + ', ' + index.toString();
326        })
327        .disappearTextStyle({ color: Color.Red, font: { size: 15, weight: FontWeight.Lighter } })
328        .textStyle({ color: Color.Black, font: { size: 20, weight: FontWeight.Normal } })
329        .selectedTextStyle({ color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder } })
330        .defaultPickerItemHeight(50)
331        .canLoop(this.isLoop)
332        .selectedIndex(2)
333      Row() {
334        Text('循环滚动').fontSize(20)
335
336        Toggle({ type: ToggleType.Switch, isOn: false })
337          .onChange((isOn: boolean) => {
338            this.isLoop = isOn;
339          })
340      }.position({ x: '60%', y: '40%' })
341    }.width('100%')
342  }
343}
344
345@Component
346struct DatePickerDialogComponent {
347  selectedDate: Date = new Date('2010-1-1');
348  @State isLunar: boolean = false;
349  @State showTime: boolean = true;
350  @State useMilitaryTime: boolean = false;
351  private onDateAccept = 0;
352  private onCancel = 0;
353  private onDateChange = 0;
354  private onDidAppear = 0;
355  private onDidDisappear = 0;
356  private onWillAppear = 0;
357  private onWillDisappear = 0;
358  @State value1: string = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
359  @State value2: string = 'onDateAccept times: ' + this.onDateAccept;
360  @State value3: string = 'onDateAccept args: ';
361  @State value4: string = 'onCancel times: ' + this.onCancel;
362  @State value5: string = 'onDateChange times: ' + this.onDateChange;
363  @State value6: string = 'onDateChange args: ';
364  @State value7: string = 'onDidAppear times: ' + this.onDidAppear;
365  @State value8: string = 'onDidDisappear times: ' + this.onDidDisappear;
366  @State value9: string = 'onWillAppear times: ' + this.onWillAppear;
367  @State value10: string = 'onWillDisappear times: ' + this.onWillDisappear;
368
369  build() {
370    Column() {
371      Divider()
372      Text('回调情况')
373      Text([
374        this.value1,
375        this.value2,
376        this.value3,
377        this.value4,
378        this.value5,
379        this.value6,
380        this.value7,
381        this.value8,
382        this.value9,
383        this.value10
384      ].join('\n')).backgroundColor(Color.Yellow)
385      Button('切换公历农历')
386        .margin({ top: 10, bottom: 10 })
387        .onClick(() => {
388          this.isLunar = !this.isLunar;
389        })
390      Button('切换showTime')
391        .margin({ top: 10, bottom: 10 })
392        .onClick(() => {
393          this.showTime = !this.showTime;
394        })
395      Button('切换useMilitaryTime')
396        .margin({ top: 10, bottom: 10 })
397        .onClick(() => {
398          this.useMilitaryTime = !this.useMilitaryTime;
399        })
400      Button('DatePickerDialog')
401        .margin(20)
402        .onClick(() => {
403          this.getUIContext().showDatePickerDialog({
404            start: new Date('2000-1-1'),
405            end: new Date('2100-12-31'),
406            lunar: this.isLunar,
407            selected: this.selectedDate,
408            showTime: this.showTime,
409            useMilitaryTime: this.useMilitaryTime,
410            disappearTextStyle: { color: '#297bec', font: { size: '20fp', weight: FontWeight.Bold } },
411            textStyle: { color: Color.Black, font: { size: '18fp', weight: FontWeight.Normal } },
412            selectedTextStyle: { color: Color.Blue, font: { size: '26fp', weight: FontWeight.Regular } },
413            dateTimeOptions: { hour: 'numeric', minute: '2-digit' },
414            onDateAccept: (value: Date) => {
415              // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
416              this.selectedDate = value
417              this.onDateAccept++;
418              globalThis.width++;
419              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
420              this.value2 = 'onDateAccept times: ' + this.onDateAccept;
421              this.value3 = 'onDateAccept args: ' + value.toString();
422            },
423            onCancel: () => {
424              this.onCancel++;
425              globalThis.width++;
426              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
427              this.value4 = 'onCancel times: ' + this.onCancel;
428            },
429            onDateChange: (value: Date) => {
430              this.onDateChange++;
431              globalThis.width++;
432              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
433              this.value5 = 'onDateChange times: ' + this.onDateChange;
434              this.value6 = 'onDateChange args: ' + value.toString();
435            },
436            onDidAppear: () => {
437              this.onDidAppear++;
438              globalThis.width++;
439              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
440              this.value7 = 'onDidAppear times: ' + this.onDidAppear;
441            },
442            onDidDisappear: () => {
443              this.onDidDisappear++;
444              globalThis.width++;
445              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
446              this.value8 = 'onDidDisappear times: ' + this.onDidDisappear;
447            },
448            onWillAppear: () => {
449              this.onWillAppear++;
450              globalThis.width++;
451              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
452              this.value9 = 'onWillAppear times: ' + this.onWillAppear;
453            },
454            onWillDisappear: () => {
455              this.onWillDisappear++;
456              globalThis.width++;
457              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
458              this.value10 = 'onWillDisappear times: ' + this.onWillDisappear;
459            }
460          })
461        })
462    }.width('100%')
463  }
464}
465
466@Component
467struct CalendarPickerDialogComponent {
468  private selectedDate: Date = new Date('2024-04-23');
469  private onAccept = 0;
470  private onCancel = 0;
471  private onChange = 0;
472  private onDidAppear = 0;
473  private onDidDisappear = 0;
474  private onWillAppear = 0;
475  private onWillDisappear = 0;
476  @State value1: string = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
477  @State value2: string = 'onAccept times: ' + this.onAccept;
478  @State value3: string = 'onAccept args: ';
479  @State value4: string = 'onCancel times: ' + this.onCancel;
480  @State value5: string = 'onChange times: ' + this.onChange;
481  @State value6: string = 'onChange args: ';
482  @State value7: string = 'onDidAppear times: ' + this.onDidAppear;
483  @State value8: string = 'onDidDisappear times: ' + this.onDidDisappear;
484  @State value9: string = 'onWillAppear times: ' + this.onWillAppear;
485  @State value10: string = 'onWillDisappear times: ' + this.onWillDisappear;
486
487  build() {
488    Column() {
489      Divider()
490      Text('回调情况')
491      Text([
492        this.value1,
493        this.value2,
494        this.value3,
495        this.value4,
496        this.value5,
497        this.value6,
498        this.value7,
499        this.value8,
500        this.value9,
501        this.value10
502      ].join('\n')).backgroundColor(Color.Yellow)
503      Button('Show CalendarPicker Dialog')
504        .margin(10)
505        .onClick(() => {
506          console.info('CalendarDialog.show');
507          CalendarPickerDialog.show({
508            selected: this.selectedDate,
509            backgroundColor: Color.Gray,
510            backgroundBlurStyle: BlurStyle.NONE,
511            shadow: ShadowStyle.OUTER_FLOATING_SM,
512            onAccept: (value: Date) => {
513              // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
514              this.selectedDate = value
515              this.onAccept++;
516              globalThis.width++;
517              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
518              this.value2 = 'onAccept times: ' + this.onAccept;
519              this.value3 = 'onAccept args: ' + value.toString();
520            },
521            onCancel: () => {
522              this.onCancel++;
523              globalThis.width++;
524              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
525              this.value4 = 'onCancel times: ' + this.onCancel;
526            },
527            onChange: (value: Date) => {
528              this.onChange++;
529              globalThis.width++;
530              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
531              this.value5 = 'onChange times: ' + this.onChange;
532              this.value6 = 'onChange args: ' + value.toString();
533            },
534            onDidAppear: () => {
535              this.onDidAppear++;
536              globalThis.width++;
537              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
538              this.value7 = 'onDidAppear times: ' + this.onDidAppear;
539            },
540            onDidDisappear: () => {
541              this.onDidDisappear++;
542              globalThis.width++;
543              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
544              this.value8 = 'onDidDisappear times: ' + this.onDidDisappear;
545            },
546            onWillAppear: () => {
547              this.onWillAppear++;
548              globalThis.width++;
549              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
550              this.value9 = 'onWillAppear times: ' + this.onWillAppear;
551            },
552            onWillDisappear: () => {
553              this.onWillDisappear++;
554              globalThis.width++;
555              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
556              this.value10 = 'onWillDisappear times: ' + this.onWillDisappear;
557            }
558          });
559        })
560    }.width('100%')
561  }
562}
563
564@Component
565struct TimePickerDialogComponent {
566  @State useMilitaryTime: boolean = false;
567  private selectTime: Date = new Date('2020-12-25T08:30:00');
568  private onAccept = 0;
569  private onCancel = 0;
570  private onChange = 0;
571  private onDidAppear = 0;
572  private onDidDisappear = 0;
573  private onWillAppear = 0;
574  private onWillDisappear = 0;
575  private onEnterSelectedArea = 0;
576  @State value1: string = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
577  @State value2: string = 'onAccept times: ' + this.onAccept;
578  @State value3: string = 'onAccept args: ';
579  @State value4: string = 'onCancel times: ' + this.onCancel;
580  @State value5: string = 'onChange times: ' + this.onChange;
581  @State value6: string = 'onChange args: ';
582  @State value7: string = 'onDidAppear times: ' + this.onDidAppear;
583  @State value8: string = 'onDidDisappear times: ' + this.onDidDisappear;
584  @State value9: string = 'onWillAppear times: ' + this.onWillAppear;
585  @State value10: string = 'onWillDisappear times: ' + this.onWillDisappear;
586  @State value11: string = 'onEnterSelectedArea times: ' + this.onEnterSelectedArea;
587  @State value12: string = 'onEnterSelectedArea times: ' + this.onEnterSelectedArea;
588
589  build() {
590    Column() {
591      Divider()
592      Text('回调情况')
593      Text([
594        this.value1,
595        this.value2,
596        this.value3,
597        this.value4,
598        this.value5,
599        this.value6,
600        this.value7,
601        this.value8,
602        this.value9,
603        this.value10,
604        this.value11,
605        this.value12
606
607      ].join('\n')).backgroundColor(Color.Yellow)
608      Button('切换useMilitaryTime')
609        .margin({ top: 10, bottom: 10 })
610        .onClick(() => {
611          this.useMilitaryTime = !this.useMilitaryTime;
612        })
613      Button('TimePickerDialog')
614        .margin(20)
615        .onClick(() => {
616          this.getUIContext().showTimePickerDialog({
617            selected: this.selectTime,
618            format: TimePickerFormat.HOUR_MINUTE,
619            useMilitaryTime: this.useMilitaryTime,
620            dateTimeOptions: { hour: 'numeric', minute: '2-digit' },
621            disappearTextStyle: { color: '#297bec', font: { size: '20fp', weight: FontWeight.Bold } },
622            textStyle: { color: Color.Black, font: { size: '18fp', weight: FontWeight.Normal } },
623            selectedTextStyle: { color: Color.Blue, font: { size: '26fp', weight: FontWeight.Regular } },
624            onAccept: (value: TimePickerResult) => {
625              // 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间
626              if (value.hour != undefined && value.minute != undefined) {
627                this.selectTime.setHours(value.hour, value.minute);
628              }
629              this.onAccept++;
630              globalThis.width++;
631              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
632              this.value2 = 'onAccept times: ' + this.onAccept;
633              this.value3 = 'onAccept args: ' + printFields(value);
634            },
635            onCancel: () => {
636              this.onCancel++;
637              globalThis.width++;
638              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
639              this.value4 = 'onCancel times: ' + this.onCancel;
640            },
641            onChange: (value: TimePickerResult) => {
642              this.onChange++;
643              globalThis.width++;
644              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
645              this.value5 = 'onChange times: ' + this.onChange;
646              this.value6 = 'onChange args: ' + printFields(value);
647            },
648            onDidAppear: () => {
649              this.onDidAppear++;
650              globalThis.width++;
651              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
652              this.value7 = 'onDidAppear times: ' + this.onDidAppear;
653            },
654            onDidDisappear: () => {
655              this.onDidDisappear++;
656              globalThis.width++;
657              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
658              this.value8 = 'onDidDisappear times: ' + this.onDidDisappear;
659            },
660            onWillAppear: () => {
661              this.onWillAppear++;
662              globalThis.width++;
663              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
664              this.value9 = 'onWillAppear times: ' + this.onWillAppear;
665            },
666            onWillDisappear: () => {
667              this.onWillDisappear++;
668              globalThis.width++;
669              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
670              this.value10 = 'onWillDisappear times: ' + this.onWillDisappear;
671            },
672            onEnterSelectedArea: (value: TimePickerResult) => {
673              this.onEnterSelectedArea++;
674              globalThis.width++;
675              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
676              this.value11 = 'onEnterSelectedArea times: ' + this.onEnterSelectedArea;
677              this.value12 = 'onEnterSelectedArea args: ' + printFields(value);
678            }
679          });
680        })
681    }.width('100%')
682  }
683}
684
685@Component
686struct TextPickerDialogComponent {
687  private select: number | number[] = 0;
688  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'];
689  @State v: string = '';
690  private onAccept = 0;
691  private onCancel = 0;
692  private onChange = 0;
693  private onDidAppear = 0;
694  private onDidDisappear = 0;
695  private onWillAppear = 0;
696  private onWillDisappear = 0;
697  private onScrollStop = 0;
698  private onEnterSelectedArea = 0;
699  @State value1: string = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
700  @State value2: string = 'onAccept times: ' + this.onAccept;
701  @State value3: string = 'onAccept args: ';
702  @State value4: string = 'onCancel times: ' + this.onCancel;
703  @State value5: string = 'onChange times: ' + this.onChange;
704  @State value6: string = 'onChange args: ';
705  @State value7: string = 'onDidAppear times: ' + this.onDidAppear;
706  @State value8: string = 'onDidDisappear times: ' + this.onDidDisappear;
707  @State value9: string = 'onWillAppear times: ' + this.onWillAppear;
708  @State value10: string = 'onWillDisappear times: ' + this.onWillDisappear;
709  @State value11: string = 'onScrollStop times: ' + this.onScrollStop;
710  @State value12: string = 'onScrollStop args: ';
711  @State value13: string = 'onEnterSelectedArea times: ' + this.onEnterSelectedArea;
712  @State value14: string = 'onEnterSelectedArea times: ' + this.onEnterSelectedArea;
713
714  build() {
715    Column() {
716      Divider()
717      Text('回调情况')
718      Text([
719        this.value1,
720        this.value2,
721        this.value3,
722        this.value4,
723        this.value5,
724        this.value6,
725        this.value7,
726        this.value8,
727        this.value9,
728        this.value10,
729        this.value11,
730        this.value12
731      ].join('\n')).backgroundColor(Color.Yellow)
732      Button('TextPickerDialog:' + this.v)
733        .margin(10)
734        .onClick(() => {
735          this.getUIContext().showTextPickerDialog({
736            range: this.fruits,
737            selected: this.select,
738            value: this.v,
739            defaultPickerItemHeight: 50,
740            disappearTextStyle: { color: '#297bec', font: { size: '20fp', weight: FontWeight.Bold } },
741            textStyle: { color: Color.Black, font: { size: '18fp', weight: FontWeight.Normal } },
742            selectedTextStyle: { color: Color.Blue, font: { size: '26fp', weight: FontWeight.Regular } },
743            onAccept: (value: TextPickerResult) => {
744              // 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项
745              this.select = value.index;
746              console.log(this.select + '');
747              // 点击确定后，被选到的文本数据展示到页面
748              this.v = value.value as string;
749              this.onAccept++;
750              globalThis.width++;
751              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
752              this.value2 = 'onAccept times: ' + this.onAccept;
753              this.value3 = 'onAccept args: ' + printFields(value);
754            },
755            onCancel: () => {
756              this.onCancel++;
757              globalThis.width++;
758              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
759              this.value4 = 'onCancel times: ' + this.onCancel;
760            },
761            onChange: (value: TextPickerResult) => {
762              this.onChange++;
763              globalThis.width++;
764              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
765              this.value5 = 'onChange times: ' + this.onChange;
766              this.value6 = 'onChange args: ' + printFields(value);
767            },
768            onScrollStop: (value: TextPickerResult) => {
769              this.onScrollStop++;
770              globalThis.width++;
771              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
772              this.value11 = 'onScrollStop times: ' + this.onScrollStop;
773              this.value12 = 'onScrollStop args: ' + printFields(value);
774            },
775            onDidAppear: () => {
776              this.onDidAppear++;
777              globalThis.width++;
778              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
779              this.value7 = 'onDidAppear times: ' + this.onDidAppear;
780            },
781            onDidDisappear: () => {
782              this.onDidDisappear++;
783              globalThis.width++;
784              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
785              this.value8 = 'onDidDisappear times: ' + this.onDidDisappear;
786            },
787            onWillAppear: () => {
788              this.onWillAppear++;
789              globalThis.width++;
790              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
791              this.value9 = 'onWillAppear times: ' + this.onWillAppear;
792            },
793            onWillDisappear: () => {
794              this.onWillDisappear++;
795              globalThis.width++;
796              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
797              this.value10 = 'onWillDisappear times: ' + this.onWillDisappear;
798            },
799            onEnterSelectedArea: (value: TextPickerResult) => {
800              this.onEnterSelectedArea++;
801              globalThis.width++;
802              this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
803              this.value13 = 'onEnterSelectedArea times: ' + this.onEnterSelectedArea;
804              this.value14 = 'onEnterSelectedArea args: ' + printFields(value);
805            },
806          });
807        })
808    }.width('100%')
809  }
810}
811
812interface onImageComplete {
813  width: number;
814  height: number;
815  componentWidth: number;
816  componentHeight: number;
817  loadingStatus: number;
818  contentWidth: number;
819  contentHeight: number;
820  contentOffsetX: number;
821  contentOffsetY: number;
822}
823
824@Component
825struct ImageComponent {
826  private imageOne: Resource = $r('app.media.startIcon');
827  private imageTwo: Resource = $r('app.media.hello');
828  private imageThree: Resource = $r('app.media.layered_image');
829  @State objectFit: ImageFit = ImageFit.Contain;
830  @State sourceSize: number = 20;
831  @State copy: CopyOptions = CopyOptions.InApp;
832  @State drm: DynamicRangeMode = DynamicRangeMode.HIGH;
833  @State orientation: ImageRotateOrientation = ImageRotateOrientation.AUTO;
834  @State src: Resource = this.imageOne;
835  @State src2: Resource = this.imageOne;
836  private onComplete = 0;
837  private onError = 0;
838  private onFinish = 0;
839  @State value1: string = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
840  @State value2: string = 'onComplete times: ' + this.onComplete;
841  @State value3: string = 'onComplete args: ';
842  @State value4: string = 'onError times: ' + this.onError;
843  @State value5: string = 'onError args: ';
844  @State value6: string = 'onFinish times: ' + this.onFinish;
845
846  build() {
847    Column() {
848      Divider()
849      Text('回调情况')
850      Text([
851        this.value1,
852        this.value2,
853        this.value3,
854        this.value4,
855        this.value5,
856        this.value6,
857      ].join('\n')).backgroundColor(Color.Yellow)
858      // 为图片添加点击事件，点击完成后加载特定图片
859      Text('点击图片，触发onError').backgroundColor(Color.Blue)
860      Row() {
861        Button('切换objectFit:' + this.objectFit)
862          .onClick(() => {
863            this.objectFit++;
864            this.objectFit = this.objectFit % 17;
865          })
866        Button('变换sourceSize:' + this.sourceSize)
867          .onClick(() => {
868            if (this.sourceSize == 20) {
869              this.sourceSize = 50;
870            } else {
871              this.sourceSize = 20;
872            }
873          })
874      }
875
876      Row() {
877        Button('图片可复制:' + this.copy)
878          .onClick(() => {
879            if (this.copy == 0) {
880              this.copy = 1;
881            } else {
882              this.copy = 0;
883            }
884          })
885      }
886
887      Row() {
888        Button('DynamicRangeMode:' + this.drm)
889          .onClick(() => {
890            this.drm++;
891            this.drm %= 3;
892          })
893        Button('orientation:' + this.orientation)
894          .onClick(() => {
895            this.orientation++;
896            this.orientation %= 9;
897          })
898      }
899
900      Image(this.src)
901        .width(100)
902        .height(100)
903        .onClick(() => {
904          this.src = this.imageThree;
905        })
906        .copyOption(this.copy)
907        .alt($r('app.media.background'))
908        .objectFit(this.objectFit)
909        .dynamicRangeMode(this.drm)
910        .orientation(this.orientation)
911        .sourceSize({ width: this.sourceSize, height: this.sourceSize })
912        .onError((error: ImageError) => {
913          this.onError++;
914          globalThis.width++;
915          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
916          this.value4 = 'onError times: ' + this.onError;
917          this.value5 = 'onError args: ' + printFields(error);
918        })
919        .onComplete((value: onImageComplete) => {
920          this.onComplete++;
921          globalThis.width++;
922          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
923          this.value2 = 'onComplete times: ' + this.onComplete;
924          this.value3 = 'onComplete args: ' + printFields(value);
925        })
926
927      // 当加载图片为SVG格式时
928      Button('点击播放svg')
929        .onClick(() => {
930          this.src2 = this.imageTwo;
931        })
932      Button('重置图片')
933        .onClick(() => {
934          this.src2 = this.imageOne;
935        })
936      Text('不设置fillColor')
937      Image(this.src2)
938        .width(100)
939        .height(100)
940        .onComplete((value: onImageComplete) => {
941          this.onComplete++;
942          globalThis.width++;
943          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
944          this.value2 = 'onComplete times: ' + this.onComplete;
945          this.value3 = 'onComplete args: ' + printFields(value);
946        })
947        .onError((error: ImageError) => {
948          this.onError++;
949          globalThis.width++;
950          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
951          this.value4 = 'onError times: ' + this.onError;
952          this.value5 = 'onError args: ' + printFields(error);
953        })
954        .onFinish(() => {
955          this.onFinish++;
956          globalThis.width++;
957          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
958          this.value6 = 'onFinish times: ' + this.onFinish;
959        })
960      Text('fillColor传入Color.Blue')
961      Image(this.src2)
962        .height(100)
963        .width(100)
964        .objectFit(ImageFit.Contain)
965        .borderWidth(1)
966        .fillColor(Color.Blue)
967    }.width('100%')
968  }
969}
970
971@Component
972struct ImageAnimatorComponent {
973  @State state: AnimationStatus = AnimationStatus.Initial;
974  @State reverse: boolean = false;
975  @State iterations: number = 1;
976  @State fixedSize: boolean = true;
977  @State monitorInvisibleArea: boolean = false;
978  private onStart = 0;
979  private onPause = 0;
980  private onRepeat = 0;
981  private onCancel = 0;
982  private onFinish = 0;
983  @State value1: string = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
984  @State value2: string = 'onStart times: ' + this.onStart;
985  @State value3: string = 'onPause times: ' + this.onPause;
986  @State value4: string = 'onRepeat times: ' + this.onRepeat;
987  @State value5: string = 'onCancel times: ' + this.onCancel;
988  @State value6: string = 'onFinish times: ' + this.onFinish;
989
990  build() {
991    Column() {
992      Divider()
993      Text('回调情况')
994      Text([
995        this.value1,
996        this.value2,
997        this.value3,
998        this.value4,
999        this.value5,
1000        this.value6,
1001      ].join('\n')).backgroundColor(Color.Yellow)
1002      Button('切换fixedSize:' + this.fixedSize)
1003        .margin(10)
1004        .onClick(() => {
1005          this.fixedSize = !this.fixedSize;
1006        })
1007      Button('切换monitorInvisibleArea:' + this.monitorInvisibleArea)
1008        .onClick(() => {
1009          this.monitorInvisibleArea = !this.monitorInvisibleArea;
1010        })
1011      ImageAnimator()
1012        .images([
1013          {
1014            src: $r('app.media.startIcon')
1015          },
1016          {
1017            src: $r('app.media.ohos_ic_normal_white_grid_mp3')
1018          },
1019          {
1020            src: $r('app.media.ohos_ic_normal_white_grid_image')
1021          },
1022          {
1023            src: $r('app.media.ohos_ic_normal_white_grid_html')
1024          },
1025          {
1026            src: $r('app.media.ohos_ic_normal_white_grid_folder')
1027          },
1028          {
1029            src: $r('app.media.ohos_ic_normal_white_grid_doc')
1030          },
1031          {
1032            src: $r('app.media.ohos_ic_normal_white_grid_compress')
1033          },
1034          {
1035            src: $r('app.media.ohos_ic_normal_white_grid_calendar')
1036          },
1037          {
1038            src: $r('app.media.ohos_ic_normal_white_grid_audio')
1039          },
1040          {
1041            src: $r('app.media.background')
1042          }
1043        ])
1044        .duration(2000)
1045        .fixedSize(this.fixedSize)
1046        .state(this.state)
1047        .reverse(this.reverse)
1048        .fillMode(FillMode.None)
1049        .iterations(this.iterations)
1050        .monitorInvisibleArea(this.monitorInvisibleArea)
1051        .width(100)
1052        .height(100)
1053        .onStart(() => {
1054          this.onStart++;
1055          globalThis.width++;
1056          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
1057          this.value2 = 'onStart times: ' + this.onStart;
1058        })
1059        .onPause(() => {
1060          this.onPause++;
1061          globalThis.width++;
1062          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
1063          this.value3 = 'onPause times: ' + this.onPause;
1064        })
1065        .onRepeat(() => {
1066          this.onRepeat++;
1067          globalThis.width++;
1068          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
1069          this.value4 = 'onRepeat times: ' + this.onRepeat;
1070        })
1071        .onCancel(() => {
1072          this.onCancel++;
1073          globalThis.width++;
1074          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
1075          this.value5 = 'onCancel times: ' + this.onCancel;
1076        })
1077        .onFinish(() => {
1078          this.onFinish++;
1079          globalThis.width++;
1080          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
1081          this.value6 = 'onFinish times: ' + this.onFinish;
1082          this.state = AnimationStatus.Stopped
1083        })
1084      Row() {
1085        Button('start').width(100).padding(5).onClick(() => {
1086          this.state = AnimationStatus.Running
1087        }).margin(5)
1088        Button('pause').width(100).padding(5).onClick(() => {
1089          this.state = AnimationStatus.Paused // 显示当前帧图片
1090        }).margin(5)
1091        Button('stop').width(100).padding(5).onClick(() => {
1092          this.state = AnimationStatus.Stopped // 显示动画的起始帧图片
1093        }).margin(5)
1094      }
1095
1096      Row() {
1097        Button('reverse').width(100).padding(5).onClick(() => {
1098          this.reverse = !this.reverse
1099        }).margin(5)
1100        Button('cancel').width(100).padding(5).onClick(() => {
1101          this.state = AnimationStatus.Initial
1102        }).margin(5)
1103        Button('iterations: ' + this.iterations).width(100).padding(5).onClick(() => {
1104          this.iterations ++ // 无限循环播放
1105          if (this.iterations == 10 ) {
1106            this.iterations = -1;
1107          }
1108          if (this.iterations == 0 ) {
1109            this.iterations = 1;
1110          }
1111        }).margin(5)
1112      }
1113    }.width('100%')
1114  }
1115}
1116
1117@Component
1118struct CounterComponent {
1119  @State value: number = 0;
1120  private onInc = 0;
1121  private onDec = 0;
1122  @State value1: string = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
1123  @State value2: string = 'onInc times: ' + this.onInc;
1124  @State value3: string = 'onDec times: ' + this.onDec;
1125
1126  build() {
1127    Column() {
1128      Divider()
1129      Text('回调情况')
1130      Text([
1131        this.value1,
1132        this.value2,
1133        this.value3,
1134      ].join('\n')).backgroundColor(Color.Yellow)
1135      Counter() {
1136        Text(this.value.toString())
1137      }
1138      .onInc(() => {
1139        this.value++;
1140        this.onInc++;
1141        globalThis.width++;
1142        this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
1143        this.value2 = 'onInc times: ' + this.onInc;
1144      })
1145      .onDec(() => {
1146        this.value--;
1147        this.onDec++;
1148        globalThis.width++;
1149        this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
1150        this.value3 = 'onDec times: ' + this.onDec;
1151      })
1152    }.width('100%')
1153  }
1154}
1155
1156@Component
1157struct PatternLockComponent {
1158  @State passwords: Number[] = [];
1159  @State message: string = 'please input password!';
1160  private patternLockController: PatternLockController = new PatternLockController();
1161  private onDotConnect = 0;
1162  private onPatternComplete = 0;
1163  @State value1: string = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
1164  @State value2: string = 'onDotConnect times: ' + this.onDotConnect;
1165  @State value3: string = 'onDotConnect args: ';
1166  @State value4: string = 'onPatternComplete times: ' + this.onPatternComplete;
1167  @State value5: string = 'onPatternComplete args: ';
1168
1169  build() {
1170    Column() {
1171      Divider()
1172      Text('回调情况')
1173      Text([
1174        this.value1,
1175        this.value2,
1176        this.value3,
1177        this.value4,
1178        this.value5,
1179      ].join('\n')).backgroundColor(Color.Yellow)
1180      Text(this.message).textAlign(TextAlign.Center).margin(20).fontSize(20)
1181      PatternLock(this.patternLockController)
1182        .sideLength(200)
1183        .circleRadius(9)
1184        .pathStrokeWidth(5)
1185        .regularColor('#551823')
1186        .activeColor('#707070')
1187        .selectedColor('#707070')
1188        .pathColor('#707070')
1189        .backgroundColor('#F5F5F5')
1190        .autoReset(true)
1191        .activateCircleStyle({
1192          color: '#707070',
1193          radius: { value: 16, unit: LengthUnit.VP },
1194          enableWaveEffect: true
1195        })
1196        .onDotConnect((index: number) => {
1197          this.onDotConnect++;
1198          globalThis.width++;
1199          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
1200          this.value2 = 'onDotConnect times: ' + this.onDotConnect;
1201          this.value3 = 'onDotConnect args: ' + index.toString();
1202        })
1203        .onPatternComplete((input: Array<number>) => {
1204          // 输入的密码长度小于5时，提示重新输入
1205          if (input.length < 5) {
1206            this.message = 'The password length needs to be greater than 5, please enter again.';
1207            return;
1208          }
1209          // 判断密码长度是否大于0
1210          if (this.passwords.length > 0) {
1211            // 判断两次输入的密码是否相同，相同则提示密码设置成功，否则提示重新输入
1212            if (this.passwords.toString() === input.toString()) {
1213              this.passwords = input;
1214              this.message = 'Set password successfully: ' + this.passwords.toString();
1215              this.patternLockController.setChallengeResult(PatternLockChallengeResult.CORRECT);
1216            } else {
1217              this.message = 'Inconsistent passwords, please enter again.';
1218              this.patternLockController.setChallengeResult(PatternLockChallengeResult.WRONG);
1219            }
1220          } else {
1221            // 提示第二次输入密码
1222            this.passwords = input;
1223            this.message = 'Please enter again.';
1224          }
1225          this.onPatternComplete++;
1226          globalThis.width++;
1227          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
1228          this.value4 = 'onPatternComplete times: ' + this.onPatternComplete;
1229          this.value5 = 'onPatternComplete args: ' + input.toString();
1230        })
1231      Button('Reset PatternLock').margin(30).onClick(() => {
1232        // 重置密码锁
1233        this.patternLockController.reset();
1234        this.passwords = [];
1235        this.message = 'Please input password';
1236      })
1237    }.width('100%')
1238  }
1239}
1240
1241@Component
1242struct TextClockComponent {
1243  @State accumulateTime: number = 0;
1244  // 导入对象
1245  controller: TextClockController = new TextClockController();
1246  private onDateChange = 0;
1247  @State value1: string = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
1248  @State value2: string = 'onDateChange times: ' + this.onDateChange;
1249  @State value3: string = 'onDateChange args: ';
1250
1251  build() {
1252    Column() {
1253      Divider()
1254      Text('回调情况')
1255      Text([
1256        this.value1,
1257        this.value2,
1258        this.value3,
1259      ].join('\n')).backgroundColor(Color.Yellow)
1260      Text('Current milliseconds is ' + this.accumulateTime)
1261        .fontSize(20)
1262      // 以12小时制显示东八区的系统时间，精确到秒。
1263      TextClock({ timeZoneOffset: -8, controller: this.controller })
1264        .format('aa hh:mm:ss')
1265        .onDateChange((value: number) => {
1266          this.accumulateTime = value;
1267          this.onDateChange++;
1268          globalThis.width++;
1269          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
1270          this.value2 = 'onDateChange times: ' + this.onDateChange;
1271          this.value3 = 'onDateChange args: ' + value.toString();
1272        })
1273        .margin(20)
1274        .fontSize(30)
1275        .fontStyle(FontStyle.Italic)
1276        .fontColor(Color.Brown)
1277      Button('start TextClock')
1278        .margin({ bottom: 10 })
1279        .onClick(() => {
1280          // 启动文本时钟
1281          this.controller.start();
1282        })
1283      Button('stop TextClock')
1284        .onClick(() => {
1285          // 停止文本时钟
1286          this.controller.stop();
1287        })
1288    }
1289    .width('100%')
1290  }
1291}
1292
1293@Component
1294struct TextTimerComponent {
1295  textTimerController: TextTimerController = new TextTimerController();
1296  @State format: string = 'mm:ss.SS';
1297  private onTimer = 0;
1298  @State value1: string = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
1299  @State value2: string = 'onTimer times: ' + this.onTimer;
1300  @State value3: string = 'onTimer args: ';
1301
1302  build() {
1303    Column() {
1304      Divider()
1305      Text('回调情况')
1306      Text([
1307        this.value1,
1308        this.value2,
1309        this.value3,
1310      ].join('\n')).backgroundColor(Color.Yellow)
1311      TextTimer({ isCountDown: true, count: 30000, controller: this.textTimerController })
1312        .format(this.format)
1313        .fontColor(Color.Black)
1314        .fontSize(50)
1315        .fontStyle(FontStyle.Italic)
1316        .onTimer((utc: number, elapsedTime: number) => {
1317          this.onTimer++;
1318          globalThis.width++;
1319          this.value1 = 'globalThis.width: ' + (globalThis.width ?? 'undefined');
1320          this.value2 = 'onTimer times: ' + this.onTimer;
1321          this.value3 = 'onTimer args: ' + utc.toString() + ', ' + elapsedTime.toString();
1322        })
1323      Row() {
1324        Button('start').onClick(() => {
1325          this.textTimerController.start();
1326        })
1327        Button('pause').onClick(() => {
1328          this.textTimerController.pause();
1329        })
1330        Button('reset').onClick(() => {
1331          this.textTimerController.reset();
1332        })
1333      }
1334    }
1335  }
1336}
1337
1338@Component
1339struct DataPanelComponent {
1340  public values1: number[] = [20, 20, 20, 20]
1341  public color1: LinearGradient =
1342    new LinearGradient([{ color: '#65EEC9A3', offset: 0 }, { color: '#FFEF629F', offset: 1 }])
1343  public color2: LinearGradient =
1344    new LinearGradient([{ color: '#FF67F9D4', offset: 0 }, { color: '#FFFF9554', offset: 1 }])
1345  public colorShadow1: LinearGradient =
1346    new LinearGradient([{ color: '#65EEC9A3', offset: 0 }, { color: '#65EF629F', offset: 1 }])
1347  public colorShadow2: LinearGradient =
1348    new LinearGradient([{ color: '#65e26709', offset: 0 }, { color: '#65efbd08', offset: 1 }])
1349  public colorShadow3: LinearGradient =
1350    new LinearGradient([{ color: '#6572B513', offset: 0 }, { color: '#6508efa6', offset: 1 }])
1351  public colorShadow4: LinearGradient =
1352    new LinearGradient([{ color: '#65ed08f5', offset: 0 }, { color: '#65ef0849', offset: 1 }])
1353  @State color3: string = '#00FF00'
1354  @State color4: string = '#20FF0000'
1355  @State bgColor: string = '#08182431'
1356  @State offsetX: number = 15
1357  @State offsetY: number = 15
1358  @State radius: number = 5
1359  @State colorArray: Array<LinearGradient | ResourceColor> = [this.color1, this.color2, this.color3, this.color4]
1360  @State shadowColorArray: Array<LinearGradient | ResourceColor> =
1361    [this.colorShadow1, this.colorShadow2, this.colorShadow3, this.colorShadow4]
1362
1363  build() {
1364    Column() {
1365      Divider()
1366      Text('LinearGradient')
1367        .fontSize(9)
1368        .fontColor(0xCCCCCC)
1369        .textAlign(TextAlign.Start)
1370        .width('100%')
1371        .margin({ top: 20, left: 20 })
1372      DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle })
1373        .width(300)
1374        .height(300)
1375        .valueColors(this.colorArray)
1376        .trackShadow({
1377          radius: this.radius,
1378          colors: this.shadowColorArray,
1379          offsetX: this.offsetX,
1380          offsetY: this.offsetY
1381        })
1382        .strokeWidth(30)
1383        .trackBackgroundColor(this.bgColor)
1384    }.width('100%')
1385  }
1386}
1387
1388@Component
1389struct GaugeComponent {
1390  @State desc: string = '说明文本';
1391
1392  @Builder
1393  descriptionBuilder() {
1394    Text(this.desc)
1395      .maxFontSize('30sp')
1396      .minFontSize('10.0vp')
1397      .fontColor('#fffa2a2d')
1398      .fontWeight(FontWeight.Medium)
1399      .width('100%')
1400      .textAlign(TextAlign.Center)
1401  }
1402
1403  build() {
1404    Column() {
1405      Divider()
1406      Button('修改文本').onClick(() => {
1407        this.desc = '修改成功';
1408      })
1409      Gauge({ value: 50, min: 1, max: 100 }) {
1410        Column() {
1411        }.width('100%')
1412      }
1413      .value(50)
1414      .startAngle(210)
1415      .endAngle(150)
1416      .colors([[new LinearGradient([{ color: '#deb6fb', offset: 0 }, { color: '#ac49f5', offset: 1 }]), 9],
1417        [new LinearGradient([{ color: '#bbb7fc', offset: 0 }, { color: '#564af7', offset: 1 }]), 8],
1418        [new LinearGradient([{ color: '#f5b5c2', offset: 0 }, { color: '#e64566', offset: 1 }]), 7],
1419        [new LinearGradient([{ color: '#f8c5a6', offset: 0 }, { color: '#ed6f21', offset: 1 }]), 6],
1420        [new LinearGradient([{ color: '#fceb99', offset: 0 }, { color: '#f7ce00', offset: 1 }]), 5],
1421        [new LinearGradient([{ color: '#dbefa5', offset: 0 }, { color: '#a5d61d', offset: 1 }]), 4],
1422        [new LinearGradient([{ color: '#c1e4be', offset: 0 }, { color: '#64bb5c', offset: 1 }]), 3],
1423        [new LinearGradient([{ color: '#c0ece5', offset: 0 }, { color: '#61cfbe', offset: 1 }]), 2],
1424        [new LinearGradient([{ color: '#b5e0f4', offset: 0 }, { color: '#46b1e3', offset: 1 }]), 1]])
1425      .width('80%')
1426      .strokeWidth(18)
1427      .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
1428      .description(this.descriptionBuilder)
1429      .padding(18)
1430    }.width('100%')
1431  }
1432}
1433
1434@Component
1435struct LoadingProgressComponent {
1436  @State enableLoading: boolean = true;
1437
1438  build() {
1439    Column() {
1440      Divider()
1441      Button('切换enableLoading').onClick(() => {
1442        this.enableLoading = !this.enableLoading;
1443      })
1444      Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%')
1445      LoadingProgress()
1446        .color(Color.Blue)
1447        .enableLoading(this.enableLoading)
1448        .layoutWeight(1)
1449    }.width('100%')
1450  }
1451}
1452
1453@Component
1454struct ProgressComponent {
1455  @State enableSmoothEffect: boolean = true;
1456  @State value: number = 0;
1457
1458  build() {
1459    Column() {
1460      Divider()
1461      Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
1462      Progress({ value: 10, type: ProgressType.Linear }).width(200)
1463      Progress({ value: 20, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width(200)
1464
1465
1466      Text('ScaleRing Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
1467      Text('enableSmoothEffect: true')
1468        .fontSize(9)
1469        .fontColor(0xCCCCCC)
1470        .width('90%')
1471        .margin(5)
1472        .margin({ top: 20 })
1473      Progress({ value: this.value, total: 100, type: ProgressType.ScaleRing })
1474        .style({ strokeWidth: 10, enableSmoothEffect: true })
1475
1476      Text('enableSmoothEffect: false').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5)
1477      Progress({ value: this.value, total: 100, type: ProgressType.ScaleRing })
1478        .style({ strokeWidth: 10, enableSmoothEffect: false })
1479
1480      Button('value +10').onClick(() => {
1481        this.value += 10;
1482      })
1483        .width(75)
1484        .height(15)
1485        .fontSize(9)
1486    }.width('100%')
1487  }
1488}
1489
1490@Component
1491struct QRCodeComponent {
1492  private value: string = 'hello world';
1493
1494  build() {
1495    Column() {
1496      Divider()
1497      RelativeContainer() {
1498        Image($r('app.media.startIcon'))
1499        // 设置二维码背景色为透明
1500        QRCode(this.value).width(200).height(200).backgroundColor('#00ffffff')
1501      }.width(200).height(200)
1502    }.width('100%').margin({ top: 5 })
1503  }
1504}
1505
1506@Component
1507struct BadgeComponent {
1508  @State badgeCount: number = 1;
1509
1510  build() {
1511    Column() {
1512      Divider()
1513      Badge({
1514        count: this.badgeCount,
1515        maxCount: 10,
1516        style: {},
1517        position: BadgePosition.RightTop,
1518      }) {
1519        Image($r('app.media.startIcon'))
1520          .width(50)
1521          .height(50)
1522      }
1523      .width(55)
1524
1525      Button('count --').onClick(() => {
1526        this.badgeCount--;
1527      })
1528      Button('count ++').onClick(() => {
1529        this.badgeCount++;
1530      })
1531    }
1532    .margin({ top: 20 })
1533  }
1534}
1535
1536export function InitBuilder1(context: UIContext, color: Color) {
1537  return new ComponentContent<Color>(context,
1538    wrapBuilder<[Color]>(datePickerComponentBuilder), color);
1539}
1540
1541export function InitBuilder2(context: UIContext, color: Color) {
1542  return new ComponentContent<Color>(context,
1543    wrapBuilder<[Color]>(calendarPickerComponentBuilder), color);
1544}
1545
1546export function InitBuilder3(context: UIContext, color: Color) {
1547  return new ComponentContent<Color>(context,
1548    wrapBuilder<[Color]>(timePickerComponentBuilder), color);
1549}
1550
1551export function InitBuilder4(context: UIContext, color: Color) {
1552  return new ComponentContent<Color>(context,
1553    wrapBuilder<[Color]>(textPickerComponentBuilder), color);
1554}
1555
1556export function InitBuilder5(context: UIContext, color: Color) {
1557  return new ComponentContent<Color>(context,
1558    wrapBuilder<[Color]>(datePickerDialogComponentBuilder), color);
1559}
1560
1561export function InitBuilder6(context: UIContext, color: Color) {
1562  return new ComponentContent<Color>(context,
1563    wrapBuilder<[Color]>(calendarPickerDialogComponentBuilder), color);
1564}
1565
1566export function InitBuilder7(context: UIContext, color: Color) {
1567  return new ComponentContent<Color>(context,
1568    wrapBuilder<[Color]>(timePickerDialogComponentBuilder), color);
1569}
1570
1571export function InitBuilder8(context: UIContext, color: Color) {
1572  return new ComponentContent<Color>(context,
1573    wrapBuilder<[Color]>(textPickerDialogComponentBuilder), color);
1574}
1575
1576export function InitBuilder9(context: UIContext, color: Color) {
1577  return new ComponentContent<Color>(context,
1578    wrapBuilder<[Color]>(imageComponentBuilder), color);
1579}
1580
1581export function InitBuilder10(context: UIContext, color: Color) {
1582  return new ComponentContent<Color>(context,
1583    wrapBuilder<[Color]>(imageAnimatorComponentBuilder), color);
1584}
1585
1586export function InitBuilder11(context: UIContext, color: Color) {
1587  return new ComponentContent<Color>(context,
1588    wrapBuilder<[Color]>(counterComponentBuilder), color);
1589}
1590
1591export function InitBuilder12(context: UIContext, color: Color) {
1592  return new ComponentContent<Color>(context,
1593    wrapBuilder<[Color]>(patternLockComponentBuilder), color);
1594}
1595
1596export function InitBuilder13(context: UIContext, color: Color) {
1597  return new ComponentContent<Color>(context,
1598    wrapBuilder<[Color]>(textClockComponentBuilder), color);
1599}
1600
1601export function InitBuilder14(context: UIContext, color: Color) {
1602  return new ComponentContent<Color>(context,
1603    wrapBuilder<[Color]>(textTimerComponentBuilder), color);
1604}
1605
1606export function InitBuilder15(context: UIContext, color: Color) {
1607  return new ComponentContent<Color>(context,
1608    wrapBuilder<[Color]>(dataPanelComponentBuilder), color);
1609}
1610
1611export function InitBuilder16(context: UIContext, color: Color) {
1612  return new ComponentContent<Color>(context,
1613    wrapBuilder<[Color]>(gaugeComponentBuilder), color);
1614}
1615
1616export function InitBuilder17(context: UIContext, color: Color) {
1617  return new ComponentContent<Color>(context,
1618    wrapBuilder<[Color]>(loadingprogressComponentBuilder), color);
1619}
1620
1621export function InitBuilder18(context: UIContext, color: Color) {
1622  return new ComponentContent<Color>(context,
1623    wrapBuilder<[Color]>(progressComponentBuilder), color);
1624}
1625
1626export function InitBuilder19(context: UIContext, color: Color) {
1627  return new ComponentContent<Color>(context,
1628    wrapBuilder<[Color]>(qrCodeComponentBuilder), color);
1629}
1630
1631export function InitBuilder20(context: UIContext, color: Color) {
1632  return new ComponentContent<Color>(context,
1633    wrapBuilder<[Color]>(badgeComponentBuilder), color);
1634}