如何在 Jetpack Compose 的文本字段中為圖標的可見性設置動畫

Question

當我輸入文本並且當TextField文本為空時，我試圖為TextField中的trailingIcon的可見性設置動畫，但由於某種原因，發生這種情況時沒有任何反應。

以前的代碼（在使用AnimatedVisibility之前）

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

當前代碼（使用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

你可以使用類似的東西：

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"
                )
            }
        }
    }
)