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 prompt from '@ohos.prompt'; 17 18@Entry 19@Component 20struct ScrollExample { 21 scroller: Scroller = new Scroller() 22 private arr: number[] = [1,2,3,4] 23 24 build() { 25 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 26 Text('MainPage') 27 .fontSize(50) 28 .fontWeight(FontWeight.Bold) 29 Stack({ alignContent: Alignment.TopStart }) { 30 Scroll(this.scroller) { 31 Column() { 32 Button() { 33 Text('next page') 34 .fontSize(25) 35 .fontWeight(FontWeight.Bold) 36 } 37 .key('my-key') 38 .type(ButtonType.Capsule) 39 .margin({ top: 20 }) 40 .onClick(() => { 41 router.push({ uri: 'MainAbility/pages/second' }) 42 }) 43 .gesture( 44 LongPressGesture({ repeat: false }) 45 .onAction((event: GestureEvent) => { 46 router.push({ uri: 'MainAbility/pages/fourth' }) 47 }) 48 ) 49 Button() { 50 Text('Click twice') 51 .fontSize(25) 52 .fontWeight(FontWeight.Bold) 53 } 54 .type(ButtonType.Capsule) 55 .margin({ top: 20 }) 56 .gesture( 57 TapGesture({ count: 1 }) 58 .onAction(() => { 59 router.push({ uri: 'MainAbility/pages/third' }) 60 }) 61 ) 62 Button() { 63 Text('jump') 64 .fontSize(25) 65 .fontWeight(FontWeight.Bold) 66 } 67 .type(ButtonType.Capsule) 68 .margin({ top: 20 }) 69 .onClick(() => { 70 router.push({ uri: 'MainAbility/pages/screen' }) 71 }) 72 .gesture( 73 LongPressGesture({ repeat: false }) 74 .onAction((event: GestureEvent) => { 75 router.push({ uri: 'MainAbility/pages/drag' }) 76 }) 77 ) 78 Checkbox({ name: 'hi' }) 79 .size({ width: 30, height: 30 }) 80 TextInput({ placeholder: 'welcome', text: 'Hello World' }) 81 .type(InputType.Normal) 82 .width(300) 83 .height(50) 84 .fontSize(40) 85 .enabled(true) 86 .margin({ top: 20 }) 87 ForEach(this.arr, (item) => { 88 Text(item.toString()) 89 .width('100%') 90 .height('30%') 91 .backgroundColor(0xFFFFFF) 92 .borderRadius(75) 93 .fontSize(80) 94 .textAlign(TextAlign.Center) 95 .margin({ top: 10 }) 96 }, item => item) 97 Button() { 98 Text('bottom') 99 .fontSize(25) 100 .fontWeight(FontWeight.Bold) 101 }.type(ButtonType.Capsule) 102 .margin({ 103 top: 20, left: 150 104 }) 105 .onClick(() => { 106 router.push({ uri: 'MainAbility/pages/second' }) 107 }) 108 }.width('100%') 109 } 110 .scrollable(ScrollDirection.Vertical) 111 .scrollBar(BarState.On) 112 .scrollBarColor(Color.Gray) 113 .scrollBarWidth(30) 114 .onScroll((xOffset: number, yOffset: number) => { 115 console.info(xOffset + ' ' + yOffset) 116 }) 117 }.width('100%').height('100%').backgroundColor(0xDCDCDC) 118 Text('MainPage_End') 119 .fontSize(50) 120 .fontWeight(FontWeight.Bold) 121 } 122 } 123} 124 125