当前位置：首页 > news >正文

图片组件|纯血鸿蒙组件库AUI

news 来源：原创 2025/6/5 12:39:49

摘要：

图片组件(A_Image)：可设置图片地址、图片宽度、图片高度、圆角类型及是否显示外框线。圆角类型支持普通圆角、圆形及无圆角。

一、组件调用方式

1.极简调用

只需要输入A_Image，然后给src（图片地址）属性赋值即可。默认宽度和高度均为300vp，方角。

2.更多属性

输入A_Image，然后给src（图片地址）属性赋值，可设置图片宽度（imageWidth）、图片高度（imageHeight）、圆角类型（radius）和使用外框线（imageOutline）。

3.圆形图片

输入A_Image，然后给src（图片地址）属性赋值，可设置图片宽度（imageWidth），将圆角类型 radius设置为 circle（圆形）。如下图所示：

页面调用代码如下：

  GridCol({ span: 4 }) {A_Image({src: 'https://cdn.aigcoder.com/sample/Image/image1.jpeg',imageWidth: 300,imageHeight: 300,})}GridCol({ span: 4 }) {A_Image({src: 'https://cdn.aigcoder.com/sample/Image/image4.jpeg',imageWidth: 240,imageHeight: 160,radius: 'radius',imageOutline: true})}GridCol({ span: 4 }) {A_Image({src: 'https://cdn.aigcoder.com/sample/Image/image2.jpeg',imageWidth: 120,imageHeight: 300,radius: 'circle',})}

本地模拟器下浅色模式和深色模式运行效果如下：

二、在线排版

1.极简调用

1.1、将图片组件拖拽到页面排版区

1.2、设置图片地址

1.3、保存设置

2.更多属性

2.1、将图片组件拖拽到页面排版区

2.2、设置图片地址、宽度、高度、圆角类型、显示外框线

2.3、保存设置

3.圆形图片

3.1、将图片组件拖拽到页面排版区

3.2、设置宽度，圆角设置为圆形

3.3、保存设置

生成纯血鸿蒙代码：

三、组件源码

图片组件的完整源码如下：

/** Copyright (c) 2024 AIGCoder.com(AI极客)* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at**     http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*//**调用示例一：极简调用A_Image({src: 'https://cdn.aigcoder.com/sample/Image/image1.jpeg'})调用示例二：更多属性A_Image({src: 'https://cdn.aigcoder.com/sample/Image/image4.jpeg',imageWidth: 300,imageHeight: 200,radius: 'radius',imageOutline: true})*/import { ColorConstants } from "../../constants/ColorConstants"
import { FloatConstants } from "../../constants/FloatConstants"
import { GirdConstants } from "../../constants/GirdConstants"/*** 【图片】* src：图片地址(支持远程图片和本地资源)* imageWidth：图片宽度* imageHeight：图片高度* radius：圆角类型(支持radius,circle,normal)* imageOutline：是否显示外框线*/
@Component
export struct A_Image {@Prop src: string = ''@Prop imageWidth?: number@Prop imageHeight?: number@Prop radius?: string = 'normal'@Prop imageOutline?: boolean = false@State compWidth: number = 150@State compHeight: number = 150aboutToAppear(): void {if(this.imageWidth !== undefined){this.compWidth = this.imageWidth}if(this.imageHeight !== undefined){this.compHeight = this.imageHeight}if(!(this.src.startsWith("http://") || this.src.startsWith("https://"))){this.src = this.src === '' ? 'app.media.mdi_image' : 'app.media.' + this.src}}build() {Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}){Image((this.src.startsWith("http://") || this.src.startsWith("https://")) ? this.src : $r(this.src)).width(GirdConstants.FULL_PERCENT).height(GirdConstants.FULL_PERCENT).objectFit(ImageFit.Cover).opacity((this.src === '') ? 0.6 : 1).borderRadius((this.radius == 'radius') ? FloatConstants.RADIUS_ICON : ((this.radius == 'circle') ? this.compWidth/2 : 0))}.width(this.compWidth).height(this.radius == 'circle' ? this.compWidth : this.compHeight).padding(this.imageOutline ? FloatConstants.SPACE_S : 0).backgroundColor(ColorConstants.CARD_BG).borderRadius((this.radius == 'radius') ? FloatConstants.RADIUS_ICON : ((this.radius == 'circle') ? this.compWidth/2 : 0))}
}