https://kotlinlang.org logo
Channels
Powered by
#compose-wear
Title
# compose-wear
y

Yingding Wang

08/05/2022, 10:02 AM
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.
Copy code
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.
Copy code
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).
Copy code
item {
   Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
      Text(text = "Hello World!")
   }
}
(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.
Copy code
val listState: ScalingLazyListState = rememberScalingLazyListState(
    initialCenterItemIndex = 0,
    initialCenterItemScrollOffset = 30
)

...
   ScalingLazyColumn(
    autoCentering = AutoCenteringParams(itemIndex = 0, itemOffset = 0)
The construct of state and autoCentering is somehow confusing.
j

John Nichol

08/05/2022, 12:09 PM
there are no issues with ScalingLazyColumn that I know of - not sure what conflict you are referring to
AFK at the moment but will take a look and try and repro your use case
could you raise a bug and attach repro project if possible
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
I have tried and failed to reporoduce the issue - here is my code based on your description
Copy code
@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))

            }
        }
    }
}
I also tried adjusting both autoCentering and rememberScalingLazyListState indexes
I am running on an 384x384 px round emulator
y

Yingding Wang

08/05/2022, 2:40 PM
Sure. Let me double check if there is something different and I will try to attach a repo and make a bug report.
my bad, it happens with a fullscreen Image composable only
Copy code
@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.
j

John Nichol

08/06/2022, 9:32 AM
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.
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.
Also thanks for the great bug report - so much easier to find these issues when you have a good repro case.
y

Yingding Wang

08/09/2022, 11:43 AM
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.
j

John Nichol

08/09/2022, 12:06 PM
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
20 Views
Powered by