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

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

article 2025/2/28 15:48:27

查看全部组件

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.ColorMatrixColorFilter

import 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.painterResource

class ImageDemo {

    @Composable
    fun 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)
            )
        }
    }
}