如何在 Jetpack Compose 中的现有 LazyColumn 之上添加 CircularProgressIndicator? [英] How to add a CircularProgressIndicator on top of existing LazyColumn in Jetpack Compose?

问题描述

我有以下屏幕:

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屋！