1/**
2 * Copyright (c) 2022 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 */
15import router from '@system.router';
16import promptAction from '@ohos.promptAction';
17
18@Entry
19@Component
20struct ScrollExample {
21  scroller: Scroller = new Scroller()
22  private arr: number[] = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
23  @State hoverText : string = 'jump'
24
25  build() {
26    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
27      Text('MainPage')
28        .fontSize(50)
29        .fontWeight(FontWeight.Bold)
30      Stack({ alignContent: Alignment.TopStart }) {
31        Scroll(this.scroller) {
32          Column() {
33            Button('toast').fontSize(25).fontWeight(FontWeight.Bold)
34              .onClick(() => {
35                try {
36                  promptAction.showToast({
37                    message: 'toastShow',
38                    duration: 60000
39                  });
40                } catch (error) {
41                  console.error(`showToast args error code is ${error.code}, message is ${error.message}`);
42                };
43              })
44            Button('dialog').fontSize(25).fontWeight(FontWeight.Bold)
45              .onClick(() => {
46                AlertDialog.show(
47                  {
48                    title: '',
49                    message: 'dialogShow',
50                    alignment: DialogAlignment.Bottom,
51                    confirm: {
52                      value: 'close',
53                      action: () => {
54                        console.info('close dialog')
55                      }
56                    }
57                  }
58                )
59              })
60            Button() {
61              Text('next page')
62                .fontSize(25)
63                .fontWeight(FontWeight.Bold)
64            }
65            .key('my-key')
66            .type(ButtonType.Capsule)
67            .margin({ top: 20 })
68            .onClick(() => {
69              router.push({ uri: 'pages/second' })
70            })
71            .gesture(
72              LongPressGesture({ repeat: false })
73                .onAction((event: GestureEvent) => {
74                  router.push({ uri: 'pages/fourth' })
75                })
76            )
77            Button() {
78              Text('Click twice')
79                .fontSize(25)
80                .fontWeight(FontWeight.Bold)
81            }
82            .type(ButtonType.Capsule)
83            .margin({ top: 20 })
84            .gesture(
85              TapGesture({ count: 1 })
86                .onAction(() => {
87                  router.push({ uri: 'pages/third' })
88                })
89            )
90            Button() {
91              Text(this.hoverText)
92                .fontSize(25)
93                .fontWeight(FontWeight.Bold)
94            }
95            .type(ButtonType.Capsule)
96            .key('jump')
97            .margin({ top: 20 })
98            .onHover((isHover: boolean) => {
99              if (isHover) {
100                this.hoverText = 'hover'
101              }
102            })
103            .onMouse((event: MouseEvent) => {
104              switch (event.button) {
105                case MouseButton.Left :
106                  this.hoverText = 'left'
107                  break
108                case MouseButton.Right :
109                  this.hoverText = 'right'
110                  break
111                case MouseButton.Middle :
112                  this.hoverText = 'middle'
113                  break
114              }
115            })
116            .onClick(() => {
117              router.push({ uri: 'pages/pinch' })
118            })
119            .gesture(
120              LongPressGesture({ repeat: false })
121                .onAction((event: GestureEvent) => {
122                  router.push({ uri: 'pages/drag' })
123                })
124            )
125            Checkbox({ name: 'hi' })
126              .size({ width: 30, height: 30 })
127            TextInput({ placeholder: 'welcome', text: 'Hello World' })
128              .type(InputType.Normal)
129              .width(300)
130              .height(50)
131              .fontSize(40)
132              .enabled(true)
133              .margin({ top: 20 })
134            ForEach(this.arr, (item:number) => {
135              Text(item.toString())
136                .width('100%')
137                .height('30%')
138                .backgroundColor(0xFFFFFF)
139                .borderRadius(75)
140                .fontSize(80)
141                .textAlign(TextAlign.Center)
142                .margin({ top: 10 })
143            }, (item:string) => item)
144            Button() {
145              Text('bottom')
146                .fontSize(25)
147                .fontWeight(FontWeight.Bold)
148            }.type(ButtonType.Capsule)
149            .margin({
150              top: 20, left: 150
151            })
152            .onClick(() => {
153              router.push({ uri: 'pages/second' })
154            })
155          }.width('100%')
156        }
157        .scrollable(ScrollDirection.Vertical)
158        .scrollBar(BarState.On)
159        .scrollBarColor(Color.Gray)
160        .scrollBarWidth(30)
161        .onScroll((xOffset: number, yOffset: number) => {
162          console.info(xOffset + ' ' + yOffset)
163        })
164      }.width('100%').height('100%').backgroundColor(0xDCDCDC)
165      Text('MainPage_End')
166        .fontSize(50)
167        .fontWeight(FontWeight.Bold)
168    }
169  }
170}
171
172