如何在Android Compose应用程序中动态调整图像[线圈]的大小

Question

我当前的 Android Compose 应用程序允许用户使用滑块设置应用程序图标的大小。

滑块范围为 0.5 到 2，例如允许用户将图标大小缩小 50% 到 200%。

我有以下撰写代码

var currentValue by remember { mutableIntStateOf(uiController.settings.getScaleFactorInt()) }

val dynamicIconSize: Int by remember { derivedStateOf { (24 * (currentValue / 100.0F)).toInt() } }

线圈 AsyncImage 定义如下：-

AsyncImage(
            model = uiController.hotspotSettings?.fullIconUrl,
            contentDescription = null,
            modifier = Modifier.size(dynamicIconSize.dp)
        )

这可行，但用户体验非常糟糕。 我猜这是因为当用户拖动滑块时图像被过度重绘。

如何实现更平滑的动态变化并允许用户设置图标大小？

滑块定义如下：-

CustomSlider(
            modifier = Modifier
                .weight(1f),
            currentValue = currentValue,
            maxValue = 200,
            minValue = 50,
            onValueChanged = { customScale ->
                currentValue = customScale
                val validatedValue = if (customScale >= 50) customScale else 50
                onValueChanged(validatedValue)
            }

Answer 1

您不应该在当前场景中使用

derivedStateOf

。当您的状态变量经常变化，但只想在某个阈值上重组时，应该使用它。

注意：

derivedStateOf

很昂贵，只有在结果没有改变时才应该使用它来避免不必要的重新组合。

您可以尝试使用

remember

与按键代替，并测试它是否对性能产生任何影响：

val dynamicIconSize: Int by remember(currentValue) { (24 * (currentValue / 100.0F)).toInt() }

除此之外，正如 Leviathan 所说，请确保您的

CustomSlider

实现不会进入某些无限

onValueChanged

循环或类似循环。

这是我目前唯一的想法，如果有任何改变请报告。