I'm struggling with making the Compose equivalent ...

# compose-wear

[Gabriel Gircenko]

I'm struggling with making the Compose equivalent of the ViewPager2 with the LazyRow. Is there a solution to this?

This is the whole code snippet where you can see that I have tried out a few approaches:

@Composable
    private fun ListOfHomePages(rows: List<PageItemUIData>) {
        val listState = rememberLazyListState()
        val listScope = rememberCoroutineScope()
        val scrollState = rememberScrollState()
        var index by remember { mutableStateOf(0) }

        LazyRow(
            modifier = Modifier
                .fillMaxSize()
                .background(color = colorResource(id = R.color.black)),
            state = listState
        ) {
            items(rows) { item: PageItemUIData ->
                if (!listState.isScrollInProgress) {
                    listScope.launch {
                        listState.animateScrollToItem(index)
                    }
                    /*if (listState.isScrollingUp()) {
                        listScope.launch {
                            listState.animateScrollToItem(listState.firstVisibleItemIndex + 1)
                        }
                    } else if (listState.isScrollingDown()) {
                        listScope.launch {
                            listState.animateScrollToItem(listState.firstVisibleItemIndex - 1)
                        }
                    }*/
                }

                PageItem(
                    painter = item.painter,
                    iconContentDescription = item.iconContentDescription,
                    title = item.title,
                    backgroundGradientStart = item.backgroundGradientStart,
                    backgroundGradientEnd = item.backgroundGradientEnd,
                    backgroundGradientOffset = item.backgroundGradientOffset,
                    modifier = Modifier.onGloballyPositioned { coordinates ->
                        index = coordinates.positionInParent().x.roundToInt()
                    }
                )
            }
        }
    }

I'm pretty new to Compose too and don't understand how to run a coroutine just once instead of every composition...

[yschimke]

On the last question - LaunchedEffect will run a coroutine on first composition (or when the key changes)

[Alex Vanyo]

https://google.github.io/accompanist/pager/ is a prebuilt solution, which might work for your needs. You could also take a look at the source to see what its doing under the hood

[Gabriel Gircenko]

That's a good resource. Thank you! With all these findings, I'll skip the Wear Compose for now, until it matures a bit more for the production.

[Alex Vanyo]

accompanist/pager should work out of the box with Wear Compose, since it is only making use of the lower architectural layers of Compose that are shared between the platforms.

[yschimke]

I used horizontalpager and it just worked.

[John Nichol]

@Alex Vanyo is correct. We are not planning a Wear OS specific version of pager as we have been testing with accompanist/pager and it does what is needed. We have also tested that it works well with Compose for Wear OS Swipe to Dismiss. We expect accompanist/pager to migrate to Core Compose in the future. @Michail Kulaga do you have a code snippit you can share for the pager-swipe to dismiss integration?

[John Nichol]

We are adding a Wear OS specific PaginationIndicator which will provide a Wear Material Design indicator in the Scaffold to show progression through a series of pages that will look good on both round and rectangular watch faces.