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 { NavigationBar } from '../../../common/components/navigationBar'; 16 17@Entry 18@Component 19struct TextClockSample { 20 @State passTime: number = 0; 21 @State timeZoneOffset: number = -8; 22 controller: TextClockController = new TextClockController() 23 24 build() { 25 Column() { 26 NavigationBar({ title: 'TextClock' }) 27 28 Column() { 29 Column() { 30 Scroll() { 31 Column() { 32 Text('current milliseconds is:' + this.passTime).fontSize(16).width('100%').textAlign(TextAlign.Center) 33 TextClock({ timeZoneOffset: this.timeZoneOffset, controller: this.controller }) 34 .format('hhmmss') 35 .onDateChange((value: number) => { 36 this.passTime = value 37 }) 38 .margin(40) 39 .fontSize(30) 40 } 41 .justifyContent(FlexAlign.Start) 42 .alignItems(HorizontalAlign.Center) 43 .width('100%') 44 } 45 } 46 .width('100%') 47 .constraintSize({ minHeight: 218, maxHeight: 402 }) 48 .padding({ left: 12, right: 12, top: 22, bottom: 22 }) 49 .margin({ bottom: 24 }) 50 .backgroundColor('#FFFFFF') 51 52 Scroll() { 53 Column() { 54 Row() { 55 Button('start TextClock') 56 .borderRadius(16) 57 .fontSize(12) 58 .backgroundColor('#007DFF') 59 .fontColor('#FFFFFF') 60 .fontWeight(FontWeight.Medium) 61 .onClick(() => { 62 this.controller.start() 63 }); 64 Button('stop TextClock') 65 .borderRadius(14) 66 .fontSize(12) 67 .backgroundColor('#007DFF') 68 .fontColor('#FFFFFF') 69 .fontWeight(FontWeight.Medium) 70 .onClick(() => { 71 this.controller.stop() 72 }); 73 } 74 .alignItems(VerticalAlign.Center) 75 .justifyContent(FlexAlign.SpaceAround) 76 .width('100%') 77 .height('10%') 78 .borderRadius(24) 79 .padding({ left: '1%', right: '1%' }) 80 .margin({ bottom: 8 }) 81 .backgroundColor('#FFFFFF') 82 83 Row() { 84 Text('timeZoneOffset').fontSize('16fp') 85 .opacity(0.5) 86 .fontColor('#182431') 87 .fontWeight(FontWeight.Medium) 88 89 Blank() 90 91 Counter() { 92 Text('' + this.timeZoneOffset).fontSize(18) 93 } 94 .onInc(() => { 95 this.timeZoneOffset >= 12 ? 12 : this.timeZoneOffset++ 96 }) 97 .onDec(() => { 98 this.timeZoneOffset <= -14 ? -14 : this.timeZoneOffset-- 99 }) 100 } 101 .alignItems(VerticalAlign.Center) 102 .justifyContent(FlexAlign.SpaceAround) 103 .width('100%') 104 .height('6%') 105 .padding({ left: '3%', right: '4%' }) 106 .borderRadius(24) 107 .backgroundColor('#FFFFFF') 108 .margin({ top: 8 }) 109 } 110 .width('100%') 111 } 112 } 113 .height('100%') 114 } 115 .alignItems(HorizontalAlign.Center) 116 .justifyContent(FlexAlign.Center) 117 .width('100%') 118 .backgroundColor('#F1F3F5') 119 .padding({ left: '3%', right: '3%', bottom: 10 }) 120 } 121 122 pageTransition() { 123 PageTransitionEnter({ duration: 370, curve: Curve.Friction }) 124 .slide(SlideEffect.Bottom) 125 .opacity(0.0) 126 127 PageTransitionExit({ duration: 370, curve: Curve.Friction }) 128 .slide(SlideEffect.Bottom) 129 .opacity(0.0) 130 } 131}