Compose Coil Gif Image

Dependencies

io.coil-kt:coil-compose
io.coil-kt:coil-gif

实现代码

//组合数据
val items = mutableListOf<ActionStep>()
val array = arrayOf(
    R.mipmap.ic_stage_1_1,
    R.mipmap.ic_stage_1_2,
    R.mipmap.ic_stage_1_3,
    R.mipmap.ic_stage_1_4,
    R.mipmap.ic_stage_1_5,
    R.mipmap.ic_stage_1_6
)
for (i in 0..5) {
    items.add(ActionStep("动作$i", array[i]))
}

//初始化Coil及其解码配置
Coil.setImageLoader(
    ImageLoader.Builder(applicationContext)
        .components(ComponentRegistry.Builder().add(GifDecoder.Factory()).build())
        .logger(DebugLogger())
        .build()
)

//Gird 三行两列
LazyVerticalGrid(
    modifier = Modifier
        .clip(shape = RoundedCornerShape(8.dp))
        .background(color = Color.White),
    columns = GridCells.Fixed(2),
    verticalArrangement = Arrangement.spacedBy(5.dp),
    horizontalArrangement = Arrangement.spacedBy(5.dp),
    contentPadding = PaddingValues(
        start = 10.dp,
        end = 10.dp,
        top = 10.dp,
        bottom = 40.dp
    )
) {
    items(items) { item ->
        GridItem(item)
    }
}

@Composable
fun GridItem(item: ActionStep) {
    Box(modifier = Modifier.height(120.dp).clip(RoundedCornerShape(8.dp))) {
        AsyncImage(
            modifier = Modifier
                .fillMaxWidth(),
            model = ImageRequest.Builder(LocalContext.current).data(item.icon).build(),
            contentDescription = null,
            contentScale = ContentScale.FillWidth
        )
    }
}