Compose material3 OverScroll 4个方向显示

Question

I am using meterial3 with Compose. I found that all the Scrollable Composable Showing overscroll effect in all 4 directions regardless of scrolling direction. that goes for Column , LazyColumn , LazyVerticalGrid etc..

I m not using anything custom to override overscroll effect. i can not figure out whats causing this behavior. i will add an example code below with LazyVerticalGrid which is causing this behavior. Since this is vertical grid it should show over scroll only vertically(to and bottom) but it also show it horizontally (left and right)..

Any direction on this will be appreciated.

@Composable
@Destination
fun FavoritesScreen(navigator: DestinationsNavigator) {
val favoritesViewModel: FavoritesViewModel = hiltViewModel()
val favoritesLiveData =
    favoritesViewModel.favoritesLiveData.observeAsState(initial = null)
if (favoritesLiveData.value != null) {
    if (favoritesLiveData.value!!.isEmpty()) {
      // Show empty view
    } else {
        LazyVerticalGrid(
            contentPadding = PaddingValues(
                12.dp,
                12.dp,
                12.dp,
                20.dp
            ),
            columns = GridCells.Fixed(2),
            horizontalArrangement = Arrangement.spacedBy(12.dp),
            verticalArrangement = Arrangement.spacedBy(12.dp),
        ) {
            item(span = { GridItemSpan(2) }) {
                Spacer(modifier = Modifier.windowInsetsTopHeight(WindowInsets.statusBars))
                Text(
                    text = stringResource(id = R.string.favorites),
                    style = MaterialTheme.typography.headlineMedium,
                    modifier = Modifier.padding(top = 20.dp)
                )
                ColumnSpacer(value = 10)
            }
            items(favoritesLiveData.value!!) { game ->
                // grid Item
            }
        }
    }
} 
}

Answer 1

You may need to update your Compose version. This was a known issue in Compose 1.3.0-alpha01, which was fixed subsequently.