圆形进度条作为尾随图标

Question

我有一个 OutlinedTextField ，其尾随图标根据状态而变化。 比方说，开始时处于空闲状态，然后当按下尾随图标时进入加载状态，当任务为 时，状态成功，图标是十字/取消，它会清除文本字段。 我想要的是在加载状态时有一个像图标一样的进度条。 我目前使用 CircularProgressbar 可组合项，但它看起来/感觉不像图标。

问题

有没有办法让 CircularProgressbar 看起来像一个适用于任何手机和尺寸的通用方式的图标？ 或者有更简单的方法吗？

动画一些图标也可能很有趣。

这是我所做的：

trailingIcon = {
                when(status) {
                    Status.IDLING -> IconButton(
                        onClick = {
                            viewModel.filterData(iNeedInput)
                        }
                    ) {
                        Icon(imageVector = Icons.Outlined.Search, contentDescription = "search")
                    }
                    Status.SUCCESS -> IconButton(
                        onClick = {
                            viewModel.updateSearchUi("")
                        }
                    ) {
                        Icon(imageVector = Icons.Outlined.Clear, contentDescription = "clear")
                    }
                    Status.LOADING ->
                        IconButton(
                            onClick = {
                                viewModel.updateSearchUi("")
                            }
                        ) {
                            CircularProgressIndicator()
                        }
                    Status.FAILED ->  Icon(imageVector = Icons.Outlined.Info, contentDescription = "error")
                }
            }

Answer 1

Icon

使用

LocalContentColor

进行绘制，因此您也可以使用它来设置

CircularProgressIndicator

的颜色。尾随图标大小为 24dp by specs，您还可以添加

padding(2.dp)

以使其与其他图标的大小相匹配。

CircularProgressIndicator(
    color = LocalContentColor.current,
    strokeWidth = 2.dp,
    modifier = Modifier.size(24.dp),
)

默认：

错误：

残疾人：

黑暗：