Accompanist SwipeRefresh Inside LazyColumn

Question

I'm trying to place a SwipeRefresh layout inside a LazyColumn and scope it to include the 2 item calls and one items call, below a item {LazyRow(inside LazyColumn)} and below another item{}.

So what I'm trying to implement is:

LazyColumn(
        Modifier
            .fillMaxSize()
            .background(colorResource(id = R.color.colorBackground))
    ) {
        item {
           LazyRow(
                Modifier
                    .wrapContentHeight()
                    .fillMaxWidth()
                    .background(colorResource(id = R.color.colorBackground)),
                listState
            ) { items()}
        }
        item { }
        -- this is where I want to place the swipe Refresh --
        item {}// box for holding a drawable
        item {} // another box
        items{ } // efficiently list items here
    }

What I think I can do is, instead of using a lazyList and its dsl, I can make a huge Scrollable Column but I this will cause the page to lose all performance gains from items{} block at the bottom. Is there a more efficient way than having to use a Column?

score 0 · Answer 1 · answered Jul 29 '22 at 13:20

You shall put LazyColumn in SwipeRefresh composable. E.g.:

SwipeRefresh(
        state = swipeRefreshState,
        onRefresh = onRefresh,
        indicator = { state, refreshTrigger ->
            SwipeRefreshIndicator(
                state = state,
                refreshTriggerDistance = refreshTrigger
            )
        }
    ) {
            LazyColumn(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.White),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                item {
                 
                        Row(
                            modifier = Modifier.fillMaxWidth(),
                            horizontalArrangement = Arrangement.SpaceEvenly
                        ) {
                            someSections.forEach { section ->
                                SomeComposable(...)
                            }
                        }
                    }
                }
            }
    }

I don't want the swipe-refresh behaviour to contain whole screen, only the 2 item calls and the last items call. I guess there is no solution other than using a Column for this behaviour. — StylishGentleman, Jul 30 '22 at 12:45

Accompanist SwipeRefresh Inside LazyColumn

1 Answers1