• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2025 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/**
17 * 为图像设置填充效果
18 */
19@Entry
20@Component
21struct ImageExample{
22  build() {
23    Column() {
24      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
25        Row() {
26          // 加载png格式图片
27          Image($r('app.media.sky'))
28            .width(110).height(110).margin(15)
29            .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
30            .border({ width: 2, color: Color.Pink })
31            .objectFit(ImageFit.TOP_START)
32          // 加载gif格式图片
33          Image($r('app.media.loading'))
34            .width(110).height(110).margin(15)
35            .overlay('gif', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
36            .border({ width: 2, color: Color.Pink })
37            .objectFit(ImageFit.BOTTOM_START)
38        }
39        Row() {
40          // 加载svg格式图片
41          Image($r('app.media.svg'))
42            .width(110).height(110).margin(15)
43            .overlay('svg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
44            .border({ width: 2, color: Color.Pink })
45            .objectFit(ImageFit.TOP_END)
46          // 加载jpg格式图片
47          Image($r('app.media.jpg'))
48            .width(110).height(110).margin(15)
49            .overlay('jpg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
50            .border({ width: 2, color: Color.Pink })
51            .objectFit(ImageFit.CENTER)
52        }
53      }
54    }.height(320).width(360).padding({ right: 10, top: 10 })
55  }
56}