如何始終在 Jetpack Compose 的屏幕中心居中進度條？

Question

我正在嘗試對從 API 獲得的一些項目進行分頁。 我想一次加載 10 個項目。 我需要的是始終在屏幕中央顯示進度。 這是我嘗試過的：

val items = viewModel.items.collectAsLazyPagingItems()
Box(
    modifier = Modifier.fillMaxSize()
) {
    LazyColumn {
        items(
            items = items
        ) { item ->
            ProductCard(
                item = item
            )
        }
        items.apply {
            when(loadState.refresh) {
                is Loading -> item { ProgressBar() }
                is Error -> //Log error
            }
        }
    }
}

這是我的進度條：

@Composable
fun ProgressBar() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ){
        CircularProgressIndicator()
    }
}

問題是當我啟動應用程序時，進度條開始加載在 10 個加載項的頂部。 一旦我加載更多，它就會停留在現有項目的底部和新項目的頂部之間 10. 無論我加載多少頁，如何讓進度條始終位於屏幕中央？

Answer 1

嘗試使用適當的 alignment 將 ProgressBar 放在 LazyColumn 之外，或者在 ProgressBar 中使用 Modifier.align()

val items = viewModel.items.collectAsLazyPagingItems()
Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    LazyColumn(modifier = Modifier.fillMaxSize()) {
        items(
            items = items
        ) { item ->
            ProductCard(
                item = item
            )
        }
    }
    when(loadState.refresh) {
                is Loading -> ProgressBar()
                is Error -> //Log error
    }
}