Jetpack 编写如何使用惰性列滚动整个屏幕

Question

我的顶部有一个标题“汽车”，还有一个加载旋转器，它占据了标题下方剩余空间的中心。仅当

isLoading

为 true 时，加载微调器才可见。如果

isLoading

为 false，则

carsList

将显示在标题“汽车”下方，并占据标题下方的剩余空间。

目前使用下面的代码，只有

LazyColumn

滚动中的项目。但我想让整个屏幕滚动，我该如何实现呢？

如果我使用常规 XML 代码，我可以通过将

NestedScrollView

作为父级、将

RecyclerView

作为子级并设置

android:nestedScrollingEnabled="false"

来实现此目的。

@Composable
fun CarScreen(
    isLoading: Boolean,
    carsList: List<Car>
) {

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
            .padding(horizontal = 16.dp, vertical = 32.dp)
    ) {
        Text(
            text = "Cars",
            fontSize = 32.sp,
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 32.dp)
                .background(Color.Red)
        )

        if (isLoading) {
            CircularProgressIndicator(
                modifier = Modifier
                    .weight(1f)
                    .wrapContentHeight()
                    .align(Alignment.CenterHorizontally)
                    .background(Color.Blue)
            )
        }

        if (!isLoading) {
            LazyColumn(
                modifier = Modifier
                    .weight(1f)
                    .fillMaxWidth()
                    .background(Color.Yellow)
            ) {
                item {
                    Text(
                        text = "List of SUVs",
                        fontSize = 20.sp,
                        modifier = Modifier.padding(bottom = 16.dp)
                    )
                }
                items(carsList) {
                    Column(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(vertical = 16.dp)
                            .background(Color.Gray)
                    ) {
                        Text(text = "Brand: ${it.brand}")
                        Text(text = "Model: ${it.model}")
                        Text(text = "Model: ${it.year}")
                    }
                }
            }
        }
    }
}

isLoading true 时的图像

isLoading false 时的图像

到目前为止我尝试了两件事：

1. 我尝试设置

   LazyColumn(userScrollEnabled = false)

   但这完全禁用了滚动，这不是我想要的。我希望整个屏幕滚动而不是 LazyColumn 单独滚动。

2. 我尝试将最顶层的父级

   Column

   转换为

   LazyColumn

   ，并用

   item

   或

   items

   将每个单独的可组合项包裹在其中。但我注意到许多修饰符函数在

   item

   和

   items

   块内不可用。而且这种方式看起来不太优雅，需要很多额外的代码，jetpack compose 肯定提供了一种简单的方式吗？

Answer 1

您可以使用

LazyColumn

块将标题放在

item {}

中以使其滚动，并将

LazyColumn

放在

Box

中以使进度指示器出现在中心：

    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        LazyColumn(modifier = Modifier.fillMaxSize()) {
            item { Text("Cars") }
            if (!isLoading) {
                items(cars) { car -> 
                    // ... your car elements here
                }
            }
        }
        if (isLoading) {
            CircularProgressIndicator()
        }
    }