Jetpack Compose系列 | 如何在Lists中添加header

Sticky Header

• 注意:sticky header 是测试 API 这在未来可能会被完全移除

  @OptIn(ExperimentalFoundationApi::class)
  @Composable
  fun ListWithHeader(items: List<Item>) {
      LazyColumn {
          stickyHeader {
              Header()
          }
  
          items(items) { item ->
              ItemRow(item)
          }
      }
  }
  

• 如果你想为 多个item添加不同的header（如同上面的图片所演示的那样） 你可以这样使用

// 在理想状态下 这个应该放在viewModel中
val grouped = contacts.groupBy { it.firstName[0] }

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ContactsList(grouped: Map<Char, List<Contact>>) {
    LazyColumn {
        grouped.forEach { (initial, contactsForInitial) ->
            stickyHeader {
                CharacterHeader(initial)
            }

            items(contactsForInitial) { contact ->
                ContactListItem(contact)
            }
        }
    }
}