Jetpack Compose 拇指图像答案

【问题标题】：Jetpack Compose thumb imageJetpack Compose 拇指图像
【发布时间】：2022-09-29 17:43:57
【问题描述】：

更改 Compose Slider 拇指图像的最佳方法是什么。现在可以更改颜色但不能更改图像？我正在考虑使用 Box() 顶部有一个 Slider 和 Image 但不知道如何实现它

我不认为 Slider 可以做到这一点，因为 Compose 是根据 Material Design 默认实现的，我认为 Slider 不能用 MD 概念中的图像代替。
默认情况下不是。需要制作一个自定义滑块

标签： android kotlin slider android-jetpack-compose

【解决方案1】：

我使用了下面允许我设置图像的库

https://github.com/SmartToolFactory/Compose-Colorful-Sliders

【讨论】：

【解决方案2】：

和M3androidx.compose.material3.Slider 你可以使用thumb属性以使用自定义拇指。

例如，您可以使用Image，例如：

var sliderPosition by remember { mutableStateOf(0f) }
Column {
    Text(text = sliderPosition.toString())
    Slider(
        modifier = Modifier.semantics { contentDescription = "Localized Description" },
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        valueRange = 0f..5f,
        steps = 4,
        interactionSource = interactionSource,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
        },
        thumb = {
            Image(painterResource(id = R.drawable.ic_launcher_background),"contentDescription")
        }

    )
}

或者一个简单的Icon：

var sliderPosition by remember { mutableStateOf(0f) }
Column {
    Text(text = sliderPosition.toString())
    Slider(
        modifier = Modifier.semantics { contentDescription = "Localized Description" },
        value = sliderPosition,
        onValueChange = { sliderPosition = it },
        valueRange = 0f..5f,
        steps = 4,
        interactionSource = interactionSource,
        onValueChangeFinished = {
            // launch some business logic update with the state you hold
        },
        thumb = {
            Icon(
                imageVector = Icons.Filled.Favorite,
                contentDescription = null,
                modifier = Modifier.size(ButtonDefaults.IconSize),
                tint = Color.Red
            )
        }

    )
}

笔记：它需要material3 至少版本1.0.0-beta03

【讨论】：