Hello! Has anyone by any chance encountered a prob...
# compose
t
Hello! Has anyone by any chance encountered a problem where a line appears in Previews between two composables that use background X, if the parent composable uses background Y? More details in thread.
This is the preview:
image.png
Copy code
@Composable
fun TestScreen() {
    Column(
        modifier = Modifier
            .background(Color.White)
            .fillMaxSize()
    ) {
        Spacer(
            modifier = Modifier
                .fillMaxWidth()
                .height(20.dp)
                .background(color = Color.Black)
        )
        Spacer(
            modifier = Modifier
                .fillMaxWidth()
                .height(20.dp)
                .background(color = Color.Black)
        )
    }
}

@Preview
@Composable
fun TestScreenPreview() {
    TestScreen()
}
Simple code to recreate
This only seems to appear in Previews, I tried running this on a Pixel 4 preview and emulator, and the former had the issue whereas the latter didn’t. But I want to be sure that this is indeed a preview issue and will not ever be seen by users. I can’t seem to find anything online about it.
e
this can happen on any device where
20.dp
is not an integer number of pixels
t
Right, that was exactly my worry.
Is there any hack I could use to close the gap between the Spacers? For my use case it’s slightly hard to just put same background behind both, as they can’t live under the same layout