Android Jetpack Compose：如何将ByteArray/FileStream显示为图片

嘿，刚接触Kotlin和Jetpack Compose的话，这种直接在UI里展示内存中生成的图片的需求确实很典型，我给你分享两种实用的解决方案，对应你手里的ByteArray和FileStream两种情况👇

Jetpack Compose的Image组件可以接收ImageBitmap类型的参数，我们只需要把二维码的ByteArray转换成ImageBitmap就行。这里建议用remember来缓存生成的结果，避免每次Compose重组都重复生成，提升性能：

import android.graphics.BitmapFactory
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.unit.dp

@Composable
fun QrCode(stand: String) {
    Text(text = "QR-Code:", fontSize = 16.sp)
    
    // 缓存二维码的ByteArray，只有当stand变化时才重新生成
    val qrCodeByteArray = remember(stand) {
        QRCode(stand).render().getBytes()
    }
    
    // 将ByteArray转换为ImageBitmap，同样用remember缓存
    val qrImageBitmap = remember(qrCodeByteArray) {
        val bitmap = BitmapFactory.decodeByteArray(qrCodeByteArray, 0, qrCodeByteArray.size)
        bitmap.asImageBitmap()
    }
    
    Image(
        bitmap = qrImageBitmap,
        contentDescription = "QR Code for $stand", // 别忘了加无障碍描述
        modifier = Modifier.size(200.dp)
    )
}

如果你的库返回的是FileStream（本质是InputStream），转换逻辑类似，只是用BitmapFactory.decodeStream来解析流：

import android.graphics.BitmapFactory
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.unit.dp

@Composable
fun QrCodeFromStream(stand: String) {
    Text(text = "QR-Code:", fontSize = 16.sp)
    
    // 缓存输入流，注意如果流是一次性的，可能需要每次生成新的，根据你的库逻辑调整
    val qrCodeStream = remember(stand) {
        QRCode(stand).render().inputStream() // 替换成你获取流的实际方法
    }
    
    val qrImageBitmap = remember(qrCodeStream) {
        val bitmap = BitmapFactory.decodeStream(qrCodeStream)
        bitmap.asImageBitmap()
    }
    
    Image(
        bitmap = qrImageBitmap,
        contentDescription = "QR Code for $stand",
        modifier = Modifier.size(200.dp)
    )
}

如果生成二维码的过程比较耗时（比如复杂内容或高分辨率），一定要放到后台线程处理，不然会导致UI卡顿。我们可以用LaunchedEffect配合协程来实现：

import android.graphics.BitmapFactory
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.withContext

@Composable
fun QrCodeWithLoading(stand: String) {
    Text(text = "QR-Code:", fontSize = 16.sp)
    
    // 用State来保存生成的图片，初始为null
    var qrImageBitmap by remember { mutableStateOf<ImageBitmap?>(null) }
    
    // 当stand变化时，启动协程在后台生成二维码
    LaunchedEffect(stand) {
        val byteArray = withContext(Dispatchers.IO) {
            // 耗时操作放到IO线程
            QRCode(stand).render().getBytes()
        }
        // 转换为ImageBitmap，这一步可以在主线程做，因为耗时短
        val bitmap = BitmapFactory.decodeByteArray(byteArray, 0, byteArray.size)
        qrImageBitmap = bitmap.asImageBitmap()
    }
    
    // 根据图片是否生成，显示图片或加载指示器
    qrImageBitmap?.let { bitmap ->
        Image(
            bitmap = bitmap,
            contentDescription = "QR Code for $stand",
            modifier = Modifier.size(200.dp)
        )
    } ?: run {
        CircularProgressIndicator(modifier = Modifier.size(40.dp))
    }
}

这样用户体验会更好，生成过程中不会卡UI，还能看到加载状态。

内容的提问来源于stack exchange，提问作者Purtl