惰性列不会滚动

Question

Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(top = 32.dp)
            .padding(horizontal = 16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
      SomeHeader()
      Results()
      SomeOtherComposable()
    }

结果看起来像

ListOfResults()

结果列表是

LazyColumn(
    modifier = modifier
        .padding(top = 16.dp)
        .fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(12.dp),

    ) {
    items(items = results, key = { it.id }) { result ->
        ResultItem(result = result)
      }

所以，问题是当我想滚动 Results() 时我无法滚动它们。我尝试过 RememberScrollState 和类似的东西，但不起作用。

Answer 1

要在 Results() 可组合项中启用滚动，您需要确保包含结果列表的 LazyColumn 具有固定高度。以下是如何修改代码以启用滚动的示例：

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(top = 32.dp)
        .padding(horizontal = 16.dp),
    verticalArrangement = Arrangement.spacedBy(16.dp)
) {
    SomeHeader()
    Results()
    SomeOtherComposable()
}

@Composable
fun Results() {
    val results = // Retrieve your list of results here

    LazyColumn(
        modifier = Modifier
            .padding(top = 16.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp),
        state = rememberLazyListState() // Remember the scroll state
    ) {
        items(items = results, key = { it.id }) { result ->
            ResultItem(result = result)
        }
    }
}

在修改后的代码中，LazyColumn 现在具有 fillMaxHeight() 修饰符，以确保它占用可用的垂直空间。此外， fillMaxWidth() 修饰符用于使 LazyColumn 占据其父级的整个宽度。

LazyColumn 的 state 参数设置为 RememberLazyListState()，它允许您记住并控制列的滚动状态。

不要忘记导入必要的 Jetpack Compose 函数和类：

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.verticalArrangement
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp