问题描述
限时送ChatGPT账号..我有以下屏幕:
fun ItemsScreen(
viewModel: ItemsViewModel = hiltViewModel()
) {
val showProgressBarState = remember { mutableStateOf(false) }
if (showProgressBarState.value) { ShowProgressBar() }
when(val resource = viewModel.state.value) {
is Loading -> ShowProgressBar() //Works perfectly
is Success -> LazyColumn {
items(
items = resource.data
) { item ->
ItemCard(
item = item
)
}
when(val r = viewModel.s.value) {
is Loading -> showProgressBarState.value = true
is Success -> showProgressBarState.value = false
is Failure -> Log.d(TAG, "Failure")
}
}
is Failure -> Text(
text = r.message,
modifier = Modifier.padding(16.dp)
)
}
}
@Composable
fun ShowProgressBar() {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
CircularProgressIndicator()
}
}
第二个when"用于删除状态.我想在删除项目时启动进度条.它开始但在 LazyColumn 后面.怎么加在前面?
The second "when" is for a delete state. I want when a item is deleted to start the progress bar. It starts but behind the LazyColumn. How to add it in front?
这是我在活动课上的内容:
This is what I have in the activity class:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Scaffold(
//
) {
ItemsScreen()
}
}
}
推荐答案
您正在更新视图构建器中的状态值.在这种情况下它会起作用,但通常这是一种不好的做法,可能会导致冗余重组,这可能会降低您的应用程序的速度.我说的是这部分:
You're updating your state value inside the view builder. It'll work in this case, but generally it's a bad practice which may lead to redundant recompositions which may slow your app. I'm talking about this part:
when(val r = viewModel.s.value) {
is Loading -> showProgressBarState.value = true
is Success -> showProgressBarState.value = false
is Failure -> Log.d(TAG, "Failure")
}
您应该使用副作用更改状态.在这里,您可以使用 LaunchedEffect
,因此仅当自上次重组以来指定的键发生更改时才会调用内容.:
You should change state using side effects. Here you could've use LaunchedEffect
, so content would be called only when specified key is changed since the last recomposition.:
LaunchedEffect(viewModel.s.value) {
when (val r = viewModel.s.value) {
is Loading -> showProgressBarState.value = true
is Success -> showProgressBarState.value = false
is Failure -> Log.d(TAG, "Failure")
}
}
但实际上这是一个未来的主题,在这种情况下,您根本不需要 showProgressBarState
.
But actually that was an off topic for the future, in this case you don't need showProgressBarState
at all.
当您使用 Box
时,项目会在屏幕上显示在彼此的顶部.由于需要在 LazyColumn
上方显示进度条,所以需要用 Box
包裹它,并将 ShowProgressBar
放在 LazyColumn 之后
.
When you use Box
, items are displayed on the screen on on top of each other. As you need to display the progress bar on top of LazyColumn
, you need to wrap it with a Box
and place ShowProgressBar
after LazyColumn
.
你也可以指定 contentAlignment = Alignment.Center
而不是用 Column
包裹 CircularProgressIndicator
:
Also you can specify contentAlignment = Alignment.Center
instead of wrapping CircularProgressIndicator
with a Column
:
is Resource.Success -> {
Box(contentAlignment = Alignment.Center) {
LazyColumn {
items(
items = resource.data
) { item ->
ItemCard(
item = item
)
}
}
when (val r = viewModel.s.value) {
is Resource.Loading -> CircularProgressIndicator()
is Resource.Success -> Unit
is Resource.Failure -> Log.d(TAG, "Failure")
}
}
}
这篇关于如何在 Jetpack Compose 中的现有 LazyColumn 之上添加 CircularProgressIndicator?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论