Jetpack compose 中的折叠工具栏

Question

How to build an Instagram profile page using Jetpack compose. I've tried multiple libraries like NestedScrollView , CollapsingToolbar to get collapsable/scrollable Topbar but they are not looking smooth. It's easy to build with XML using CoordinatorLayout.

Expected Scroll:- Instagram Profile Page

Using NestedScrollView Library:- NestedScrollView

Answer 1

This layout is easy to implement with LazyColumn and stickyHeader :

LazyColumn(Modifier.fillMaxWidth()) {
    item {
        Text("Header")
    }
    stickyHeader {
        TabRow(selectedTabIndex = 0) {
            repeat(4) {
                Tab(selected = it == 0, onClick = {}) {
                    Text(
                        it.toString()
                    )
                }
            }
        }
    }
    items(100) {
        Text(it.toString())
    }
}