如何在 Compose Multiplatform 中实现具有固定标题的可滚动视图

Question

我正在尝试在 Compose Multiplatform 中创建一个布局，其中标题保留在顶部，而其下方的其余内容是可滚动的。标题应该始终可见，并且只有下面的内容应该滚动。

我尝试过使用 LazyColumn 和 Column，但在滚动时无法使标题保持固定。是否有推荐的方法或最佳实践在 Compose Multiplatform 中实现此布局？

像这样

Answer 1

有两种方法可以实现这一目标。

A) 使用

Column

和

LazyColumn

与

weight

请将

weight

修饰符应用于

LazyColumn

，以便它将填充可组合标题留下的所有剩余屏幕空间。

Column(
    modifier = Modifier.fillMaxSize()
) {
    Text(
        modifier = Modifier.fillMaxWidth(),
        text = "HEADER",
        fontSize = 32.sp,
        textAlign = TextAlign.Center
    )
    LazyColumn(
        modifier = Modifier
            .weight(1f)
            .fillMaxWidth()
    ) {
        items(100) {
            Text(text = "Item $it")
        }
    }
}

B) 仅使用

LazyColumn

和

stickyHeader

或者，您可以将标题 Composable 包含在

LazyColumn

中作为

stickyHeader

:

LazyColumn(
    modifier = Modifier.fillMaxSize()
) {
    stickyHeader {
        Text(
            modifier = Modifier.fillMaxWidth(),
            text = "HEADER",
            fontSize = 32.sp,
            textAlign = TextAlign.Center
        )
    }
    items(100) {
        Text(text = "Item $it")
    }
}

请注意，使用这种方法时，

stickyHeader

默认具有透明背景。如果不需要，您需要用

Surface

:

包装您的可组合头文件

stickyHeader {
    Surface {
        Text(
            modifier = Modifier.fillMaxWidth(),
            text = "HEADER",
            fontSize = 32.sp,
            textAlign = TextAlign.Center
        )
    }
}

输出：