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 */ 15 16import { NavigationBar } from '../../../common/components/navigationBar'; 17 18@Entry 19@Component 20struct TextTimerSample { 21 @State format: string = 'mm:ss.ms'; 22 @State isCountDown: boolean = false; 23 @State minutes: number = 1; 24 myTimerController: TextTimerController = new TextTimerController(); 25 26 build() { 27 Column() { 28 NavigationBar({ title: 'TextTimer' }) 29 30 Column() { 31 Scroll() { 32 Column() { 33 Text('计时显示') 34 .width('100%') 35 .height('10%') 36 .fontSize(18) 37 .margin({ bottom: 10 }) 38 .textAlign(TextAlign.Center) 39 40 TextTimer({ 41 controller: this.myTimerController, 42 isCountDown: this.isCountDown, 43 count: this.minutes * 60000 44 }) 45 .format(this.format) 46 .fontColor(Color.Black) 47 .height('20%') 48 .fontSize(50) 49 .onTimer((utc: number, elapsedTime: number) => { 50 console.info('textTimer notCountDown utc is：' + utc + ', elapsedTime: ' + elapsedTime) 51 }) 52 } 53 .justifyContent(FlexAlign.Start) 54 .alignItems(HorizontalAlign.Center) 55 .width('100%') 56 } 57 } 58 .width('100%') 59 .constraintSize({ minHeight: 218, maxHeight: 402 }) 60 .padding({ left: 12, right: 12, top: 22, bottom: 22 }) 61 .margin({ bottom: 24 }) 62 .backgroundColor('#FFFFFF') 63 64 65 Scroll() { 66 Column() { 67 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround, wrap: FlexWrap.Wrap }) { 68 Button('开始计时') 69 .width('30%') 70 .borderRadius(14) 71 .fontSize(12) 72 .backgroundColor('#007DFF') 73 .fontColor('#FFFFFF') 74 .fontWeight(FontWeight.Medium) 75 .margin({ top: 15, bottom: 10 }) 76 .onClick(() => { 77 this.isCountDown = false; 78 this.myTimerController.start(); 79 this.minutes = 1; 80 }); 81 Button('暂停计时') 82 .width('30%') 83 .borderRadius(14) 84 .fontSize(12) 85 .backgroundColor('#007DFF') 86 .fontColor('#FFFFFF') 87 .fontWeight(FontWeight.Medium) 88 .margin({ top: 15, bottom: 10 }) 89 .onClick(() => { 90 this.myTimerController.pause(); 91 }); 92 Button('重置计时') 93 .width('30%') 94 .borderRadius(14) 95 .fontSize(12) 96 .backgroundColor('#007DFF') 97 .fontColor('#FFFFFF') 98 .fontWeight(FontWeight.Medium) 99 .margin({ top: 15, bottom: 10 }) 100 .onClick(() => { 101 this.myTimerController.reset(); 102 this.minutes = 1; 103 }); 104 105 Button('开始倒计时') 106 .width('30%') 107 .borderRadius(14) 108 .fontSize(12) 109 .backgroundColor('#007DFF') 110 .fontColor('#FFFFFF') 111 .fontWeight(FontWeight.Medium) 112 .onClick(() => { 113 this.isCountDown = true; 114 this.myTimerController.start(); 115 }); 116 Button('暂停倒计时') 117 .width('30%') 118 .borderRadius(14) 119 .fontSize(12) 120 .backgroundColor('#007DFF') 121 .fontColor('#FFFFFF') 122 .fontWeight(FontWeight.Medium) 123 .onClick(() => { 124 this.myTimerController.pause(); 125 }); 126 Button('重置倒计时') 127 .width('30%') 128 .borderRadius(14) 129 .fontSize(12) 130 .backgroundColor('#007DFF') 131 .fontColor('#FFFFFF') 132 .fontWeight(FontWeight.Medium) 133 .onClick(() => { 134 this.myTimerController.reset(); 135 this.minutes = 1; 136 }); 137 } 138 .width('100%') 139 .height('15%') 140 .borderRadius(24) 141 .padding({ left: '1%', right: '1%' }) 142 .margin({ bottom: 8 }) 143 .backgroundColor('#FFFFFF') 144 145 Row() { 146 Text('count:').fontSize('16fp') 147 .opacity(0.5) 148 .fontColor('#182431') 149 .fontWeight(FontWeight.Medium) 150 Counter() { 151 Text('' + this.minutes).fontSize(18) 152 } 153 .onInc(() => { 154 this.minutes++ 155 }) 156 .onDec(() => { 157 this.minutes > 0 ? this.minutes-- : 0 158 }) 159 } 160 .justifyContent(FlexAlign.SpaceBetween) 161 .alignItems(VerticalAlign.Center) 162 .width('100%') 163 .height('6%') 164 .padding({ left: '3%', right: '4%' }) 165 .borderRadius(24) 166 .backgroundColor('#FFFFFF') 167 .margin({ top: 8 }) 168 } 169 } 170 } 171 .alignItems(HorizontalAlign.Center) 172 .justifyContent(FlexAlign.Start) 173 .width('100%') 174 .height('100%') 175 .backgroundColor('#F1F3F5') 176 .padding({ left: '3%', right: '3%', bottom: 10 }) 177 } 178 179 pageTransition() { 180 PageTransitionEnter({ duration: 370, curve: Curve.Friction }) 181 .slide(SlideEffect.Bottom) 182 .opacity(0.0) 183 184 PageTransitionExit({ duration: 370, curve: Curve.Friction }) 185 .slide(SlideEffect.Bottom) 186 .opacity(0.0) 187 } 188}