如何在 Jetpack Compose 的文本字段中为图标的可见性设置动画

Question

I am trying to animate the visibility of a trailingIcon within a TextField when I enter text and when the TextField text is empty, but for some reason, nothing happens when this happrns.

Previous code (before using AnimatedVisibility )

TextField(
    modifier = Modifier.fillMaxWidth(),
    value = mText,
    onValueChange = {
        mText = it
    },
    trailingIcon = {
        when {
            mText.isNotEmpty() -> OutlinedIconButton(
                onClick = { mText = "" }
            ) {
                Icon(
                    imageVector = Icons.Default.Clear,
                    contentDescription = "Clear"
                )
            }
        }
    }
)

Current code (after using AnimatedVisibility )

OutlinedTextField(
    modifier = Modifier.fillMaxWidth(),
    value = mText,
    onValueChange = {
        mText = it
    },
    trailingIcon = {
        AnimatedVisibility(
            visible = visible,
            enter = fadeIn(),
            exit = fadeOut()
        ) {
            IconButton(
                    onClick = { mText = "" }
            ) {
                Icon(
                    imageVector = Icons.Default.Clear,
                    contentDescription = "Clear"
                )
            }
        }
    }
)

Answer 1

You can use something like:

var text by remember { mutableStateOf("") }
val isVisible by remember {
    derivedStateOf {
        text.isNotEmpty()
    }
}

OutlinedTextField(
    value = text,
    onValueChange = {
        text = it
    },
    trailingIcon = {
        AnimatedVisibility(
            visible = isVisible,
            enter = fadeIn(),
            exit = fadeOut()
        ) {
            IconButton(
                onClick = { text = "" }
            ) {
                Icon(
                    imageVector = Icons.Default.Clear,
                    contentDescription = "Clear"
                )
            }
        }
    }
)