compose 可折叠的stickyHeader
时间: 2024-01-19 09:17:26 浏览: 45
以下是使用Compose实现可折叠的stickyHeader的示例代码:
```kotlin
@Composable
fun CollapsibleStickyHeader() {
val names = listOf("John", "Jane", "Mike", "Emily")
LazyColumn {
stickyHeader {
Text(text = "Headers", modifier = Modifier
.fillMaxWidth()
.background(Color.Gray))
}
items(names) { name ->
Greeting(name)
}
}
}
@Composable
fun Greeting(name: String) {
Text(text = name, modifier = Modifier
.fillMaxWidth()
.padding(16.dp))
}
```
在上述代码中,我们使用了`LazyColumn`来创建一个可滚动的列表。通过`stickyHeader`函数,我们可以创建一个粘性的标题,它会在滚动时保持在屏幕顶部。在`stickyHeader`函数中,我们使用`Text`组件来显示标题文本,并使用`Modifier.background`设置背景颜色。
然后,我们使用`items`函数来遍历`names`列表,并为每个名称创建一个`Greeting`组件。在`Greeting`组件中,我们使用`Text`组件来显示名称,并使用`Modifier.fillMaxWidth`和`Modifier.padding`设置宽度和内边距。
通过调用`CollapsibleStickyHeader`函数,我们可以将可折叠的stickyHeader应用到我们的Compose界面中。
相关推荐
![none](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)