mcpField
K
kuikly-assets-resource

kuikly-assets-resource

github.com/tencent-tdsDevelopment134440 installsUpdated 11w ago
Repository

About kuikly-assets-resource

A resource management guide for developers using Kuikly DSL or Compose DSL. It covers asset organization, ImageUri construction, image loading, and platform packaging configuration.

Key features

  1. 01Organize page and shared assets
  2. 02Build asset URIs with ImageUri
  3. 03Load images in Kuikly DSL
  4. 04Load Compose images with DrawableResource
  5. 05Review platform packaging setup

Use cases

  1. 01Store and reference images for a page
  2. 02Share assets across multiple pages
  3. 03Load local images in Compose DSL pages

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/tencent-tds/kuiklyui-ai --skill kuikly-assets-resource

After installing, type/kuikly-assets-resourcein Claude Code to confirm it loaded.

Bundled filesreferences/PLATFORM_CONFIG.md

Details

From the project README

Kuikly 资源文件管理与加载

资源目录结构

assets 资源存放在 shared/src/commonMain/assets 目录下,一般将资源放在对应页面目录下,多页面共享的资源放 common/ 目录:

shared/src/commonMain/
├── assets/
│   ├── MyPage/            # MyPage 页面资源(推荐,资源跟随页面)
│   │   ├── banner.png
│   │   └── icon.png
│   ├── OtherPage/         # OtherPage 页面资源
│   │   └── bg.png
│   └── common/            # 公共资源(多页面共享时使用)
│       └── logo.png
└── kotlin/               # 业务代码

ImageUri API

ImageUri 是 Kuikly 统一的资源 URI 封装类,用于在 Image、PAG 等组件中引用资源。

工厂方法
// 页面 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
URI Scheme 常量
Scheme值说明
SCHEME_COMMON_ASSETSassets://common/公共资源
SCHEME_PAGE_ASSETSassets://#pageName#/页面资源(运行时替换)
SCHEME_FILEfile://本地文件
SCHEME_BASE64data:imageBase64 图片

Kuikly DSL 资源加载

加载 Assets 图片
// Image 组件引用 assets 资源
Image {
    attr {
        src(ImageUri.pageAssets("banner.png"))         // 页面资源(最常用)
    }
}
Image {
    attr {
        src(ImageUri.commonAssets("logo.png"))         // 公共资源
    }
}
        

Compose DSL 资源加载

Compose DSL 通过 DrawableResource + ImageUri 加载本地 assets 资源,目录结构和打包配置与 Kuikly DSL 完全一致。

相关 import
import 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
加载 Assets 图片
// 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)
    }
}

各平台打包配置

首次使用 assets 资源需要配置打包,详见 PLATFORM_CONFIG.md


Comments

Markdown supported