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 .margin({ top: 20 }) 97 .onHover((isHover: boolean) => { 98 if (isHover) { 99 this.hoverText = 'hover' 100 } 101 }) 102 .onMouse((event: MouseEvent) => { 103 switch (event.button) { 104 case MouseButton.Left : 105 this.hoverText = 'left' 106 break 107 case MouseButton.Right : 108 this.hoverText = 'right' 109 break 110 case MouseButton.Middle : 111 this.hoverText = 'middle' 112 break 113 } 114 }) 115 .onClick(() => { 116 router.push({ uri: 'pages/pinch' }) 117 }) 118 .gesture( 119 LongPressGesture({ repeat: false }) 120 .onAction((event: GestureEvent) => { 121 router.push({ uri: 'pages/drag' }) 122 }) 123 ) 124 Checkbox({ name: 'hi' }) 125 .size({ width: 30, height: 30 }) 126 TextInput({ placeholder: 'welcome', text: 'Hello World' }) 127 .type(InputType.Normal) 128 .width(300) 129 .height(50) 130 .fontSize(40) 131 .enabled(true) 132 .margin({ top: 20 }) 133 ForEach(this.arr, (item) => { 134 Text(item.toString()) 135 .width('100%') 136 .height('30%') 137 .backgroundColor(0xFFFFFF) 138 .borderRadius(75) 139 .fontSize(80) 140 .textAlign(TextAlign.Center) 141 .margin({ top: 10 }) 142 }, item => item) 143 Button() { 144 Text('bottom') 145 .fontSize(25) 146 .fontWeight(FontWeight.Bold) 147 }.type(ButtonType.Capsule) 148 .margin({ 149 top: 20, left: 150 150 }) 151 .onClick(() => { 152 router.push({ uri: 'pages/second' }) 153 }) 154 }.width('100%') 155 } 156 .scrollable(ScrollDirection.Vertical) 157 .scrollBar(BarState.On) 158 .scrollBarColor(Color.Gray) 159 .scrollBarWidth(30) 160 .onScroll((xOffset: number, yOffset: number) => { 161 console.info(xOffset + ' ' + yOffset) 162 }) 163 }.width('100%').height('100%').backgroundColor(0xDCDCDC) 164 Text('MainPage_End') 165 .fontSize(50) 166 .fontWeight(FontWeight.Bold) 167 } 168 } 169} 170 171