Is the ScalizingLazyListState() and ScalingLazyCol...

# compose-wear

[Yingding Wang]

Is the ScalizingLazyListState() and ScalingLazyColumn autoCentering conflict still present in wear compose-material:1.0.0?
The following code doesn’t work, which shows only a dark screen at the beginning.

val state: ScalingLazyListState = rememberScalingLazyListState()
Scaffold (
     vignette = { Vignette(vignettePosition = VignettePosition.TopAndBottom) },
     positionIndicator = { PositionIndicator(scalingLazyListState = state) }
) {
     ScalingLazyColumn (
         modifier = Modifier.fillMaxSize(),
         verticalArrangement = Arrangement.Center,
         state = state,
         anchorType = ScalingLazyListAnchorType.ItemCenter,
     ) {...

After I set the ScalingLazyListState(), and autoCentering both to (0, 0), the first element is shown correctly.

val state: ScalingLazyListState = rememberScalingLazyListState(
            initialCenterItemIndex = 0,
            initialCenterItemScrollOffset = 0
)
Scaffold (
     vignette = { Vignette(vignettePosition = VignettePosition.TopAndBottom) },
     positionIndicator = { PositionIndicator(scalingLazyListState = state) }
) {
     ScalingLazyColumn (
         modifier = Modifier.fillMaxSize(),
         verticalArrangement = Arrangement.Center,
         state = state,
         anchorType = ScalingLazyListAnchorType.ItemCenter,
         autoCentering = AutoCenteringParams(itemIndex = 0, itemOffset = 0)
     ) {...

And set to (1, 0) as the both defaults are, doesn’t work. (0, 0) seems to be the only working combi. I think this issue was also present in horologist (https://github.com/google/horologist/issues/245).
Any thoughts on this are appreciated.

Update: It is worth to mention that my items are two full screen elements. After I scrolled the screen, the code behaved like I had set (0, 0).

item {
   Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
      Text(text = "Hello World!")
   }
}

[Yingding Wang]

(0, 30) for both seem to work, maybe it is because I have two full screen items, thus (1, 0) defaults doesn’t seem to work well, but should the initialization of ScalingLazyListState and autoCentering of ScalingLazyColumn are not the same, the code doesn’t work.

val listState: ScalingLazyListState = rememberScalingLazyListState(
    initialCenterItemIndex = 0,
    initialCenterItemScrollOffset = 30
)

...
   ScalingLazyColumn(
    autoCentering = AutoCenteringParams(itemIndex = 0, itemOffset = 0)

The construct of state and autoCentering is somehow confusing.

[John Nichol]

there are no issues with ScalingLazyColumn that I know of - not sure what conflict you are referring to

[John Nichol]

AFK at the moment but will take a look and try and repro your use case

[John Nichol]

could you raise a bug and attach repro project if possible

[John Nichol]

The Horologist bug you referenced https://github.com/google/horologist/issues/245 was about Time Text not ever displaying if you give wrong config - so doesn't seem related at all

[John Nichol]

I have tried and failed to reporoduce the issue - here is my code based on your description

@Composable
fun SLCLargeItemsNotVisible() {
    val state = rememberScalingLazyListState()
    ScalingLazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        state = state,
        autoCentering = AutoCenteringParams()
    ) {
        items(4) {
            Card(
                onClick = {},
                modifier = Modifier.height(300.dp),
            ) {
                Box(modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Blue))

            }
        }
    }
}

[John Nichol]

I also tried adjusting both autoCentering and rememberScalingLazyListState indexes

[John Nichol]

I am running on an 384x384 px round emulator

[Yingding Wang]

Sure. Let me double check if there is something different and I will try to attach a repo and make a bug report.

[Yingding Wang]

my bad, it happens with a fullscreen Image composable only

@Composable
fun fullScreenImage() {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Image(
            painter= painterResource(R.drawable.watch_preview_circular_384),
            contentDescription = "Yellow fullscreen"
        )
    }
}

@Composable
fun fullScreenText() {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Text(text = "Hello World!")
    }
}

will open an issue report.

[John Nichol]

Thanks - will probably be Monday before I take a look - interesting that is it happening for Images I don't have any immediate ideas why it would matter what the type of content is - but with a repro case I am sure we will soon get to the bottom of it.

[John Nichol]

I think I have found and fixed the problem, just need to do a bit more testing and a patch should land today. As a workaround add a 0.dp height spacer as a third item in your list and it should be visible as expected.

[John Nichol]

Also thanks for the great bug report - so much easier to find these issues when you have a good repro case.

[Yingding Wang]

Indeed the workaround adding a 0.dp height spacer as a third item in my ScalingLazyColumn works. 😇
Thanks also for the rapid responses, I am glad that I can help make wear-compose rock solid.

[John Nichol]

cool - the patch will land in 1.0.1 and 1.1.0-alpha04 on 24th August as we missed the cut for this weeks release - but as we have a workaround hopefully that is not too inconvenient