1/* 2 * Copyright (c) 2023 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 16// 绕z轴旋转 17const ROTATE_Z: number = 1; 18// 旋转角度 19const ROTATE_ANGLE: number = 360; 20// 旋转时长 21const ROTATE_DURATION: number = 3000; 22// 重复次数 23const ROTATE_ITERATIONS: number = -1; 24// 字体透明度 25const TEXT_OPACITY: number = 0.8; 26 27@Component 28export struct NonIconItem { 29 @Link renderGroupFlag: boolean; 30 image: string | Resource = ''; 31 text: string | Resource = ''; 32 33 build() { 34 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignContent: FlexAlign.Center }) { 35 Image(this.image) 36 .height($r('app.integer.RenderGroup_item_image_height')) 37 .width($r('app.integer.RenderGroup_item_image_width')) 38 .objectFit(ImageFit.Contain) 39 .margin({ 40 left: $r('app.integer.RenderGroup_item_image_margin') 41 }) 42 .transition(TransitionEffect.rotate({ z: ROTATE_Z, angle: ROTATE_ANGLE }) 43 .animation({ duration: ROTATE_DURATION, curve: Curve.Linear, iterations: ROTATE_ITERATIONS })) 44 45 Text(this.text) 46 .fontSize($r('app.integer.RenderGroup_item_text_font')) 47 .fontColor($r('app.color.RenderGroup_item_text_fontColor')) 48 .margin({ 49 top: $r('app.integer.RenderGroup_item_text_margin_top') 50 }) 51 .width($r('app.integer.RenderGroup_item_text_width')) 52 .opacity(TEXT_OPACITY) 53 .textAlign(TextAlign.Center) 54 } 55 .backgroundColor($r('app.color.RenderGroup_item_backgroundColor')) 56 .width($r('app.integer.RenderGroup_item_width')) 57 .height($r('app.integer.RenderGroup_item_height')) 58 .borderRadius($r('app.integer.RenderGroup_item_borderRadius')) 59 // 在IconItem内调用renderGroup,true为开启，false为关闭 60 .renderGroup(this.renderGroupFlag) 61 } 62}