Loading...
Loading...
Kuikly 资源文件管理与加载助手。指导如何在 Kuikly 中添加、打包和加载 assets 资源,包括目录结构规范(common/页面资源)、各平台打包配置(Android/iOS/鸿蒙/H5/微信小程序/动态化)、ImageUri API 使用。当用户需要在 Kuikly 中使用本地图片资源、配置 assets 打包时使用。
npx skill4agent add tencent-tds/kuiklyui-ai kuikly-assets-resourceshared/src/commonMain/assetscommon/shared/src/commonMain/
├── assets/
│ ├── MyPage/ # MyPage 页面资源(推荐,资源跟随页面)
│ │ ├── banner.png
│ │ └── icon.png
│ ├── OtherPage/ # OtherPage 页面资源
│ │ └── bg.png
│ └── common/ # 公共资源(多页面共享时使用)
│ └── logo.png
└── kotlin/ # 业务代码ImageUriImagePAG// 页面 assets 资源(当前页面目录,最常用)
ImageUri.pageAssets("banner.png")
// 生成: assets://#pageName#/banner.png(运行时替换为实际页面名)
// 页面 assets 子目录资源
ImageUri.pageAssets("icons/star.png")
// 生成: assets://#pageName#/icons/star.png
// 公共 assets 资源(common 目录,多页面共享)
ImageUri.commonAssets("logo.png")
// 生成: assets://common/logo.png
// 本地文件路径
ImageUri.file("/path/to/image.png")
// 生成: file:///path/to/image.png| Scheme | 值 | 说明 |
|---|---|---|
| | 公共资源 |
| | 页面资源(运行时替换) |
| | 本地文件 |
| | Base64 图片 |
// Image 组件引用 assets 资源
Image {
attr {
src(ImageUri.pageAssets("banner.png")) // 页面资源(最常用)
}
}
Image {
attr {
src(ImageUri.commonAssets("logo.png")) // 公共资源
}
}
DrawableResourceImageUriimport com.tencent.kuikly.compose.foundation.Image
import com.tencent.kuikly.compose.resources.painterResource
import com.tencent.kuikly.compose.resources.imageResource
import com.tencent.kuikly.compose.resources.DrawableResource
import com.tencent.kuikly.compose.resources.InternalResourceApi// 1. 定义 DrawableResource(需要 @OptIn InternalResourceApi)
@OptIn(InternalResourceApi::class)
private val bannerRes by lazy(LazyThreadSafetyMode.NONE) {
DrawableResource(ImageUri.pageAssets("banner.png").toUrl(""))
}
// 2. 使用 painterResource 加载(返回 Painter,用于 Image 组件)
@Composable
fun MyImage() {
Image(
painter = painterResource(bannerRes),
contentDescription = null,
modifier = Modifier.size(200.dp, 100.dp),
)
}
// 3. 使用 imageResource 加载(返回 ImageBitmap,用于 Canvas 绘制)
@Composable
fun MyCanvas() {
val bitmap = imageResource(bannerRes)
Canvas(Modifier.size(100.dp)) {
drawImage(bitmap)
}
}