使用 Glide 在 Compose 中加载图片

@Composable
fun Content() {
    
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Image Compare")
    
        Image(
            painter = painterResource(R.drawable.compose),
            modifier = Modifier.size(50.dp),
            contentScale = ContentScale.Crop,
            alignment = Alignment.Center,
            contentDescription = null
        )
    }
}

@Composable
fun NetImage(
    model: Any?,
    modifier: Modifier = Modifier,
    engine: EngineType = EngineType.Default,
    ...
)

enum EngineType {
    Coil, // coil-compose: AsyncImage
    Glide, // glide-compose: GlideImage
    ... // and so on.
}

val context = LocalContext.current

val state = remember(model) { mutableStateOf<Painter?>(null) }
val asyncSize = remember { AsyncGlideSize() }

val sizeModifier = modifier.onSizeChanged { asyncSize.putSize(it) }

val painter = state.value // current painter

if (painter == null) Spacer(modifier = sizeModifier)
else Image(painter = painter, modifier = sizeModifier, ...)

LaunchedEffect(model) {
    val size = asyncSize.awaitSize()
    Glide.with(context)
        .asDrawable()
        .overload(size.width, size.height)
        .load(model)
        .into(painterTarget)
}

internal data class GlideSize(val width: Int, val height: Int)

/**
 * implements:
 * - ImmediateGlideSize
 * - AsyncGlideSize
 **/
internal sealed interface ResolvableGlideSize {
    suspend fun awaitSize(): GlideSize
    fun sizeReady(): Boolean
    fun putSize(size: Size)
    fun readySize(): GlideSize?
}

@Stable
private class GlideAsyncPainter(
    val request: Context.() -> RequestBuilder<Drawable>,
    // ...
) : Painter() {

    private var painter by mutableStateOf(loading)

    override val intrinsicSize: Size
        get() = painter?.intrinsicSize ?: Size.Unspecified

    private val glideSize = AsyncGlideSize()

    override fun DrawScope.onDraw() {
        glideSize.putSize(size)
        (painter)?.apply { draw(size, alpha, colorFilter) }
    }

    fun startRequest(scope: CoroutineScope, context: Context, model: Any?) {
        painter = loading
        rememberJob = (scope + Dispatchers.Main.immediate).launch {
            request().load(model).flow(glideSize).collectLatest {
                painter = it
            }
        }
    }
}

internal fun RequestBuilder<Drawable>.flow(
    size: ResolvableGlideSize,
): Flow<GlideLoadResult> {
    return callbackFlow {
        val target = FlowTarget(this, size)
        listener(target).into(target)
        awaitClose { manager.clear(target) }
    }
}

@Stable
private class GlideAsyncPainter(
    val scale: ContentScale,
    val request: Context.() -> RequestBuilder<Drawable>,
) : Painter(), RememberObserver { 

    private var remembered = false

    override fun onRemembered() {
        (painter as? RememberObserver)?.onRemembered()
        remembered = true
    }

    override fun onForgotten() {
        stopRequest()
        (painter as? RememberObserver)?.onForgotten()
    }

    override fun onAbandoned() {
        stopRequest()
        (painter as? RememberObserver)?.onAbandoned()
    }

    private fun stopRequest() {
        remembered = false
        rememberJob?.cancel()
        rememberJob = null
        // finish all flow target
        glideSize.putSize(Size.Unspecified)
    }
}

@Composable
fun rememberGlideAsyncImagePainter(
    model: Any?,
    scale: ContentScale,
    request: (Context) -> RequestBuilder<Drawable> = { Glide.with(it).asDrawable() },
): Painter {
    val context = LocalContext.current
    val painter = remember {
        GlideAsyncImagePainter(
            loading = loading,
            failure = failure,
            scale = scale,
            listener = listener,
            request = request
        )
    }
    LaunchedEffect(model) {
        painter.startRequest(this, context, model)
    }
    return painter
}

Image(
    painter = rememberGlideAsyncImagePainter(model),
    contentDescription = null,
    contentScale = ContentScale.FillHeight,
    alignment = Alignment.CenterStart,
    modifier = Modifier.height(25.dp).wrapContentWidth()
)

// 初始化 url 是 null，点击按钮后修改为线上图片地址
private var url by mutableStateOf<String?>(null)

// Glide 的控件，提供一个红色的背景颜色
GlideImage(
    model = url,
    modifier = Modifier
        .height(50.dp)
        .wrapContentWidth()
        .background(Color.Red),
    contentScale = ContentScale.FillHeight,
    alignment = Alignment.CenterStart,
    contentDescription = null
)

// Coil 的控件，同样提供一个红色的背景颜色
AsyncImage(
    model = url,
    modifier = Modifier
        .height(50.dp)
        .wrapContentWidth()
        .background(Color.Red)
    ,
    contentScale = ContentScale.FillHeight,
    alignment = Alignment.CenterStart,
    contentDescription = null
)

Button(
    modifier = Modifier.padding(top = 20.dp),
    onClick = { url = Stores.urls.first() }
) { 
    Text("Load")
}

private fun modifyConstraints(constraints: Constraints): Constraints {

    // 控件本身已经有明确的尺寸
    if (constraints.hasFixedWidth && constraints.hasFixedHeight) return constraints

    // 控件本身有约束尺寸
    val hasBoundedDimens = constraints.hasBoundedWidth && constraints.hasBoundedHeight

    // Painter 还没有尺寸，控件有约束尺寸，用约束尺寸
    if (!painterIntrinsicSizeSpecified && hasBoundedDimens) {
        return constraints
    }

    // 控件没有明确尺寸，也没有约束尺寸
    // 获取 Painter 的合法宽高，如果获取不到则用最小宽高。
    // 在控件宽/高使用 wrap 的情况下会得到 0
    val intrinsicSize = painter.intrinsicSize
    val intrinsicWidth =
        if (intrinsicSize.hasSpecifiedAndFiniteWidth()) {
            intrinsicSize.width.roundToInt()
        } else {
            constraints.minWidth
        }

    val intrinsicHeight =
        if (intrinsicSize.hasSpecifiedAndFiniteHeight()) {
            intrinsicSize.height.roundToInt()
        } else {
            constraints.minHeight
        }

    val constrainedWidth = constraints.constrainWidth(intrinsicWidth)
    val constrainedHeight = constraints.constrainHeight(intrinsicHeight)
    // 根据 ContentScale 重新计算 Painter 的尺寸
    val scaledSize = calculateScaledSize(
        Size(constrainedWidth.toFloat(), constrainedHeight.toFloat())
    )
    val minWidth = constraints.constrainWidth(scaledSize.width.roundToInt())
    val minHeight = constraints.constrainHeight(scaledSize.height.roundToInt())
    return constraints.copy(minWidth = minWidth, minHeight = minHeight)
}

protected fun Constraints.inferredGlideSize(): Size {
    val width = if (hasBoundedWidth) {
        maxWidth
    } else {
        com.bumptech.glide.request.target.Target.SIZE_ORIGINAL
    }
    val height =
        if (hasBoundedHeight) {
            maxHeight
        } else {
            com.bumptech.glide.request.target.Target.SIZE_ORIGINAL
        }
    return Size(width.toFloat(), height.toFloat())
}

override fun MeasureScope.measure(
    measurable: Measurable,
    constraints: Constraints
): MeasureResult = trace("$TRACE_SECTION_NAME.measure") {
    val modified = modifyConstraints(constraints)

    // 提供推断后的尺寸给 Glide
    val inferredGlideSize = modified.inferredGlideSize()
    glideSize.putSize(inferredGlideSize)

    // 其它测量逻辑不变
    ...
}

private fun RequestBuilder<Drawable>.setupScaleTransform(): RequestBuilder<Drawable> {
    return when (contentScale) {
        ContentScale.Crop -> optionalCenterCrop()

        // Outside compose, glide would use fitCenter() for FIT. But that's probably not a good
        // decision given how unimportant Bitmap re-use is relative to minimizing texture sizes now.
        // So instead we'll do something different and prefer not to upscale, which means using
        // centerInside(). The UI can still scale the view even if the Bitmap is smaller.
        ContentScale.Fit,
        ContentScale.FillHeight,
        ContentScale.FillWidth,
        ContentScale.FillBounds -> optionalCenterInside()

        ContentScale.Inside -> optionalCenterInside()

        // NONE
        else -> this
    }
}

@Composable
fun GlideAsyncImage(
    model: Any?,
    contentDescription: String?,
    modifier: Modifier,
    contentScale: ContentScale = GlideDefaults.DefaultContentScale,
    alignment: Alignment = GlideDefaults.DefaultAlignment,
    alpha: Float = GlideDefaults.DefaultAlpha,
    colorFilter: ColorFilter? = GlideDefaults.DefaultColorFilter,
    // ... other params
) = trace("GlideAsyncImage") {

    val nodeModel = remember(model) {
        // case internal model
    }

    Layout(
        modifier = modifier
            .glidePainterNode(
                nodeModel = nodeModel,
                contentDescription,
                alignment,
                contentScale,
                alpha,
                colorFilter,
                // ... other params
            ),
        measurePolicy = { _, constraints ->
            layout(constraints.minWidth, constraints.minHeight) {}
        },
    )
}

@Composable
fun ResImage(
    @DrawableRes id: Int,
    modifier: Modifier = Modifier,
    contentDescription: String? = null,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Crop,
    alpha: Float = 1.0f,
) {
    GlideAsyncImage(
        model = id,
        alignment = alignment,
        contentScale = contentScale,
        alpha = alpha,
        contentDescription = contentDescription,
        modifier = modifier
    ) { GlideApp.with(it).asDrawable() }
}

private fun RequestBuilder<Drawable>.loadRequestModel(requestModel: GlideRequestModel): RequestBuilder<Drawable> {
    return when (val model = requestModel.model) {
        is Int -> fallback(model).load(null as Any?)
        is File -> load(model)
        is Uri -> load(model)
        is String -> load(model)
        else -> load(model)
    }
}

// 通用的 Glide 异步加载节点
internal abstract class GlideRequestNode(
    private var nodeModel: GlideNodeModel,
    var contentScale: ContentScale,
    // ...
) : Modifier.Node()

// 异步加载背景修饰节点
internal class GlideBackgroundNode(
    // ...
) : GlideRequestNode(/* params */)

// 异步加载图片控件节点
internal class GlidePainterNode(
    // ...
) : GlideRequestNode(/* params */)


// 设置背景的 Modifier 扩展
fun Modifier.glideBackground(
    model: Any?,
    placeholder: Int? = null,
    alignment: Alignment = GlideDefaults.DefaultAlignment,
    contentScale: ContentScale = GlideDefaults.DefaultContentScale,
    alpha: Float = GlideDefaults.DefaultAlpha,
    colorFilter: ColorFilter? = GlideDefaults.DefaultColorFilter
    // ... other params
): Modifier = composed {

    val nodeModel = remember(model) {
        // case internal mode
    }

    this.glideBackground(
        nodeModel = nodeModel,
        alignment,
        contentScale,
        alpha,
        colorFilter,
        // ... other params
    )
}