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

【Compose multiplatform教程09】【组件】Image组件

news 2024/12/27 11:48:37

查看全部组件

Image

功能说明：能够加载并显示图片，支持本地资源和网络资源，可对图片的大小、缩放方式、裁剪等属性进行设置，使图片以合适的方式展示在界面中，增强界面的视觉效果。
示例场景：在应用的启动页展示品牌 logo；在商品列表页面显示商品图片；用于设置界面的背景图片，营造特定的视觉氛围。

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.ColorMatrix
import androidx.compose.ui.graphics.ColorMatrixColorFilterimport androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import kotlinmultiplatform.composeapp.generated.resources.Res
import kotlinmultiplatform.composeapp.generated.resources.ic_launcher
import org.jetbrains.compose.resources.InternalResourceApi
import org.jetbrains.compose.resources.painterResourceclass ImageDemo {@Composablefun ImageExample() {@OptIn(InternalResourceApi::class)val imageResource = painterResource(Res.drawable.ic_launcher)Column {// 基本图像显示，填充最大宽度，固定高度，设置边距Image(painter = imageResource,contentDescription = "示例图片",modifier = Modifier.fillMaxWidth().height(200.dp).padding(16.dp))// 调整图像内容缩放方式为适应容器（保持纵横比）Image(painter = imageResource,contentDescription = "示例图片 - 适应容器",contentScale = ContentScale.Fit,modifier = Modifier.fillMaxWidth().height(200.dp).padding(16.dp))// 调整图像内容缩放方式为填充容器（可能拉伸）Image(painter = imageResource,contentDescription = "示例图片 - 填充容器",contentScale = ContentScale.FillBounds,modifier = Modifier.fillMaxWidth().height(200.dp).padding(16.dp))// 应用颜色滤镜，例如将图像变为灰度图val colorMatrix = ColorMatrix().apply { setToSaturation(0f) }val colorFilter = ColorMatrixColorFilter(colorMatrix)Image(painter = imageResource,contentDescription = "示例图片 - 灰度",colorFilter = colorFilter,modifier = Modifier.fillMaxWidth().height(200.dp).padding(16.dp))// 裁剪图像，显示中心部分（示例中假设原始图像较大）Image(painter = imageResource,contentDescription = "示例图片 - 裁剪",contentScale = ContentScale.Crop,modifier = Modifier.fillMaxWidth().height(200.dp).padding(16.dp))}}
}