Измените пульсацию IconButton

Question

как я могу это исправить

      @Composable
fun Body() {

    val scrollState = rememberScrollState()

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(10.dp),
        modifier = Modifier
            .verticalScroll(state = scrollState)
            .fillMaxSize()
            .padding(top = 10.dp)
    ) {

        //....

        Surface(
            color = Color.LightGray,
            modifier = Modifier
                .fillMaxWidth(0.95f),
            shape = RoundedCornerShape(CornerSize(10.dp)),
            elevation = 1.dp,
        ) {

            var expanded by remember { mutableStateOf(false) }

            Column(
                verticalArrangement = Arrangement.spacedBy(5.dp)
            ) {

                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {

                    //....

                    IncrementDecrementButton()
                }

                //...
            }
        }
    }
}

я использую.offsetуменьшить расстояние между кнопками и текстом

      @Composable
fun IncrementDecrementButton() {

    var Number by remember { mutableStateOf(1) }

    IconButton(onClick = { Number += 1 }) {
        Icon(
            imageVector = Icons.Default.Add,
            contentDescription = "",
            modifier = Modifier
                .size(20.dp)
                .offset(x = 10.dp)
        )
    }

    Text(
        text = "$Number",
        modifier = Modifier
            .size(20.dp),
        textAlign = TextAlign.Center
    )

    IconButton(
        onClick = {
            if (Number > 1)
                Number -= 1
        }
    ) {
        Icon(
            painter = painterResource(id = R.drawable.ic_baseline_remove_24),
            contentDescription = "",
            modifier = Modifier
                .size(20.dp)
                .offset(x = (-10).dp)
        )
    }
}

Answer 1

Анимация представляет собой пульсацию, связанную с IconButton, но вы не можете изменить радиусRippleтак как он встроен в .

Если вы хотите изменить размерIconButton, вы можете использовать что-то вроде:

          Box(
        modifier = Modifier
            .padding(1.dp)
            .size(20.dp)
            .clickable(
                onClick = { Number += 1 },
                enabled = enabled,
                interactionSource = interactionSource,
                indication = rememberRipple(bounded = false, radius = 10.dp)
            ),
        contentAlignment = Alignment.Center
    ) {
        val contentAlpha = if (enabled) LocalContentAlpha.current else ContentAlpha.disabled
        CompositionLocalProvider(LocalContentAlpha provides contentAlpha){
            Icon(
                imageVector = Icons.Default.Add,
                contentDescription = "",
            )
        }
    }