如何在 Jetpack Compose 中使用图标切换按钮？

Question

我想在 Jetpack Compose 中使用图标按钮，但我看不懂 Jetpack Compose 文档。有人可以分享类似于 this one 的切换按钮的示例代码吗？
当用户点击按钮时，我想像在 Instagram 中一样使用弹跳动画对其进行动画处理。

Answer 1

您可以将 IconToggleButton 与过渡相结合。示例代码（使用版本1.0.0-beta05）：

import android.annotation.SuppressLint
import androidx.compose.animation.animateColor
import androidx.compose.animation.core.*
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@SuppressLint("UnusedTransitionTargetStateParameter")
@Composable
fun FavoriteButton(
    isChecked: Boolean,
    onClick: () -> Unit
) {
    IconToggleButton(
        checked = isChecked,
        onCheckedChange = { onClick() }
    ) {
        val transition = updateTransition(isChecked, label = "Checked indicator")

        val tint by transition.animateColor(
            label = "Tint"
        ) { isChecked ->
            if (isChecked) Color.Red else Color.Black
        }

        val size by transition.animateDp(
            transitionSpec = {
                if (false isTransitioningTo true) {
                    keyframes {
                        durationMillis = 250
                        30.dp at 0 with LinearOutSlowInEasing // for 0-15 ms
                        35.dp at 15 with FastOutLinearInEasing // for 15-75 ms
                        40.dp at 75 // ms
                        35.dp at 150 // ms
                    }
                } else {
                    spring(stiffness = Spring.StiffnessVeryLow)
                }
            },
            label = "Size"
        ) { 30.dp }

        Icon(
            imageVector = if (isChecked) Icons.Filled.Favorite else Icons.Filled.FavoriteBorder,
            contentDescription = null,
            tint = tint,
            modifier = Modifier.size(size)
        )
    }
}

@Preview("Favorite Button")
@Composable
fun FavoriteButtonPreview() {
    val (isChecked, setChecked) = remember { mutableStateOf(false) }
    MaterialTheme {
        Surface {
            FavoriteButton(
                isChecked = isChecked, 
                onClick = { setChecked(!isChecked) }
            )
        }
    }
}

这些是此示例所需的依赖项：

dependencies {
    implementation 'androidx.core:core-ktx:1.6.0-alpha01'

    implementation "androidx.compose.ui:ui:1.0.0-beta05"
    implementation "androidx.compose.material:material:1.0.0-beta05"
    implementation "androidx.compose.ui:ui-tooling:1.0.0-beta05"
    implementation 'androidx.activity:activity-compose:1.3.0-alpha06'
}

有关 transition 和 keyframes 的更多详细信息以及自定义它们的方法，请参阅 Compose 的 Animation documentation。

如何在 Jetpack Compose 中使用图标切换按钮？

How to use Icon Toggle button in Jetpack Compose?

user-interface

android

android-jetpack-compose