Compose 中 Scroll

在 Jetpack Compose 中，Scroll（滚动）是一种常见的用户交互方式，用于在界面中查看大量内容或者滚动可滚动的组件，例如列表、网格、文本等。Compose 提供了 LazyColumn、LazyRow、ScrollableColumn、ScrollableRow 等组件来实现滚动功能。

LazyColumn 和 LazyRow

LazyColumn 和 LazyRow 是用于显示垂直和水平方向上大量数据的懒加载列表组件。它们在屏幕上只会渲染可见区域的列表项，当用户滚动列表时，它们会动态加载和卸载列表项，从而提高性能和内存效率。

以下是一个简单的示例代码，演示了如何在 Compose 中使用 LazyColumn 和 LazyRow：

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun LazyListExample() {
    LazyColumn {
        items(100) { index ->
            Text("Item $index", modifier = Modifier.padding(16.dp))
        }
    }
}

@Composable
fun LazyRowExample() {
    LazyRow {
        items(10) { index ->
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .padding(8.dp)
                    .background(MaterialTheme.colors.primary)
            )
        }
    }
}

在上述示例中，我们分别创建了一个垂直方向的 LazyColumn 和一个水平方向的 LazyRow，并填充了一些示例数据。当用户滚动列表时，只会渲染可见区域的列表项，以提高性能和效率。

ScrollableColumn 和 ScrollableRow

ScrollableColumn 和 ScrollableRow 是用于显示自定义内容的可滚动列和行组件。它们允许你在其中放置任意的组件，并支持垂直和水平方向的滚动。

以下是一个简单的示例代码，演示了如何在 Compose 中使用 ScrollableColumn 和 ScrollableRow：

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun ScrollableColumnExample() {
    ScrollableColumn {
        repeat(20) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(100.dp)
                    .padding(8.dp)
                    .background(Color.Gray)
            )
        }
    }
}

@Composable
fun ScrollableRowExample() {
    ScrollableRow {
        repeat(10) {
            Box(
                modifier = Modifier
                    .width(100.dp)
                    .height(100.dp)
                    .padding(8.dp)
                    .background(Color.Blue)
            )
        }
    }
}

在上述示例中，我们创建了一个垂直方向的 ScrollableColumn 和一个水平方向的 ScrollableRow，并分别填充了一些示例数据。用户可以通过滚动来查看所有的内容。

通过使用 LazyColumn、LazyRow、ScrollableColumn 和 ScrollableRow 组件，你可以在 Jetpack Compose 中实现各种滚动效果，从而创建更加灵活和交互丰富的界面。