Hey there! Let's break down how to replicate your View system layout in Jetpack Compose, and fix that nested scrolling issue with LazyColumn you're running into.

Key Concepts to Wrap Your Head Around First #

Compose handles scrolling differently than the old View system—there's no direct 1:1 replacement for CoordinatorLayout or NestedScrollView, but we have tools to achieve the same behavior:

• Scroll Behavior Coordination: Instead of relying on CoordinatorLayout's implicit behavior, Compose uses ScrollState and NestedScrollConnection to manage how scroll events are shared between parent and child components.
• No Nested Lazy Components by Default: LazyColumn/LazyRow can't be directly nested in another scrollable component because both will try to consume scroll events, leading to janky or broken behavior. We solve this by either making one component the single source of scroll truth, or manually coordinating events with NestedScrollConnection.
• Sticky Headers: LazyColumn has a built-in stickyHeader function that replaces the need for a custom sticky TabLayout setup.
• Collapsing Toolbars: Use TopAppBar with a scrollBehavior (like exitUntilCollapsedScrollBehavior) to replicate CollapsingToolbarLayout behavior, paired with Scaffold for overall layout structure.

Full Example Code (Matching Your Original Layout) #

This code replicates every part of your View system layout, using Compose-native components and fixing the nested scroll issue:

First, if you're using the ViewPager equivalent, add these Accompanist dependencies to your build.gradle (Module level):

implementation "com.google.accompanist:accompanist-pager:0.32.0"
implementation "com.google.accompanist:accompanist-pager-indicators:0.32.0"

Then the Compose code:

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.HorizontalPager
import com.google.accompanist.pager.pagerTabIndicatorOffset
import com.google.accompanist.pager.rememberPagerState

@OptIn(ExperimentalPagerApi::class)
@Composable
fun ReplicatedViewSystemLayout() {
    val scaffoldState = rememberScaffoldState()
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())
    val swipeRefreshState = rememberSwipeRefreshState(isRefreshing = false)
    val pagerState = rememberPagerState()
    val tabTitles = listOf("Tab 1", "Tab 2", "Tab 3")

    // SwipeRefreshLayout equivalent
    SwipeRefresh(
        state = swipeRefreshState,
        onRefresh = {
            // Add your refresh logic here (e.g., fetch data)
        }
    ) {
        // NavigationDrawer equivalent
        ModalNavigationDrawer(
            drawerState = scaffoldState.drawerState,
            drawerContent = { DrawerMenuContent() }
        ) {
            // CoordinatorLayout/AppBarLayout/CollapsingToolbarLayout equivalent
            Scaffold(
                scaffoldState = scaffoldState,
                topBar = {
                    TopAppBar(
                        title = { Text("Collapsing Toolbar") },
                        navigationIcon = {
                            IconButton(onClick = {
                                // Open drawer
                                scaffoldState.drawerState.open()
                            }) {
                                Icon(Icons.Default.Menu, contentDescription = "Open Menu")
                            }
                        },
                        scrollBehavior = scrollBehavior
                    )
                }
            ) { innerPadding ->
                // NestedScrollView + LinearLayout equivalent (single scroll container)
                LazyColumn(
                    modifier = Modifier.padding(innerPadding),
                    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
                ) {
                    // First ConstraintLayout section (replace with your actual TextView/Button content)
                    item {
                        Column(
                            modifier = Modifier.fillMaxWidth(),
                            verticalArrangement = Arrangement.spacedBy(8.dp)
                        ) {
                            Text(text = "Header TextView 1")
                            Text(text = "Header TextView 2")
                            Button(onClick = { /* Handle button click */ }) {
                                Text("Action Button")
                            }
                        }
                        Spacer(modifier = Modifier.height(16.dp))
                    }

                    // Horizontal RecyclerView equivalent
                    item {
                        Text(text = "Horizontal Scroll Items")
                        LazyRow(
                            modifier = Modifier.fillMaxWidth(),
                            horizontalArrangement = Arrangement.spacedBy(8.dp)
                        ) {
                            items(10) { index ->
                                Card(
                                    modifier = Modifier.size(120.dp),
                                    shape = RoundedCornerShape(8.dp),
                                    elevation = 4.dp
                                ) {
                                    Box(modifier = Modifier.fillMaxSize()) {
                                        Text(text = "Item $index", modifier = Modifier.align(Alignment.Center))
                                    }
                                }
                            }
                        }
                        Spacer(modifier = Modifier.height(16.dp))
                    }

                    // Sticky TabLayout equivalent
                    stickyHeader {
                        TabRow(
                            selectedTabIndex = pagerState.currentPage,
                            indicator = { tabPositions ->
                                TabRowDefaults.Indicator(
                                    modifier = Modifier.pagerTabIndicatorOffset(pagerState, tabPositions)
                                )
                            }
                        ) {
                            tabTitles.forEachIndexed { index, title ->
                                Tab(
                                    text = { Text(title) },
                                    selected = pagerState.currentPage == index,
                                    onClick = { /* Handle tab selection */ }
                                )
                            }
                        }
                    }

                    // ViewPager equivalent
                    item {
                        HorizontalPager(
                            count = tabTitles.size,
                            state = pagerState,
                            modifier = Modifier.fillMaxWidth().height(300.dp)
                        ) { page ->
                            Box(modifier = Modifier.fillMaxSize()) {
                                Text(
                                    text = "Content for ${tabTitles[page]}",
                                    modifier = Modifier.align(Alignment.Center)
                                )
                            }
                        }
                    }
                }
            }
        }
    }
}

@Composable
fun DrawerMenuContent() {
    Column(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
        Text(text = "Drawer Item 1", style = MaterialTheme.typography.subtitle1)
        Text(text = "Drawer Item 2", style = MaterialTheme.typography.subtitle1)
        Text(text = "Drawer Item 3", style = MaterialTheme.typography.subtitle1)
    }
}

If You Really Need Nested Scrolling #

If you have a use case where you must nest a LazyColumn inside another scrollable component, use NestedScrollConnection to coordinate scroll events between parent and child:

@Composable
fun NestedScrollWorkaround() {
    val outerScrollState = rememberScrollState()
    val innerLazyState = rememberLazyListState()

    Column(
        modifier = Modifier.verticalScroll(outerScrollState)
    ) {
        // Outer scrollable content
        Text("Outer Content", modifier = Modifier.fillMaxWidth().height(200.dp))

        // Inner LazyColumn with scroll coordination
        LazyColumn(
            state = innerLazyState,
            modifier = Modifier
                .fillMaxWidth()
                .height(300.dp)
                .nestedScroll(connection = remember {
                    object : NestedScrollConnection {
                        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                            // Let outer scroll handle events when inner is at the top
                            val scrollDelta = available.y
                            if (scrollDelta > 0 && innerLazyState.firstVisibleItemIndex == 0 && innerLazyState.firstVisibleItemScrollOffset == 0) {
                                outerScrollState.scrollBy(scrollDelta.toInt())
                                return available
                            }
                            return Offset.Zero
                        }
                    }
                })
        ) {
            items(20) {
                Text("Inner Item $it", modifier = Modifier.fillMaxWidth().padding(16.dp))
            }
        }

        // More outer content
        Text("More Outer Content", modifier = Modifier.fillMaxWidth().height(200.dp))
    }
}

This setup ensures scroll events are passed to the parent component when the inner LazyColumn can't scroll anymore (is at the top).

内容的提问来源于stack exchange，提问作者Nithin Raghav