My intuition is failing me. I'm not sure if this i...

# compose

[Logan Knight]

My intuition is failing me. I'm not sure if this is a bug in desktop, or a failure of my understanding. See thread.

[Logan Knight]

Box(
            Modifier
                .fillMaxSize()
                .background(Color.White)
        ) {

            Column(
                Modifier
                    .fillMaxWidth()
                    .verticalScroll(rememberScrollState())
                    .align(Alignment.Center)
            ) {
                for (i in 1..15) {
                    Box(
                        Modifier
                            .size(96.dp)
                            .padding(0.dp, 16.dp)
                            .align(Alignment.CenterHorizontally)
                            .background(Color.LightGray)) {
                        Text(
                            i.toString(),
                            Modifier.align(Alignment.Center)
                        )
                    }
                }
            }

            Surface(
                Modifier
                    .align(Alignment.TopStart),
                elevation = 24.dp
            ) {
                Box(
                    Modifier
                        .fillMaxWidth()
                        .height(48.dp)
                        .background(Color.White)
                )
            }

            Surface(
                Modifier
                    .align(Alignment.BottomStart),
                elevation = 24.dp
            ) {
                Box(
                    Modifier
                        .fillMaxWidth()
                        .height(48.dp)
                        .background(Color.White)
                )
            }

[Logan Knight]

Yields

[Logan Knight]

Where as

Box(
            Modifier
                .fillMaxSize()
                .background(Color.White)
        ) {
            Surface(
                Modifier
                    .align(Alignment.TopStart),
                elevation = 24.dp
            ) {
                Box(
                    Modifier
                        .fillMaxWidth()
                        .height(48.dp)
                        .background(Color.White)
                )
            }

            Column(
                Modifier
                    .fillMaxWidth()
                    .verticalScroll(rememberScrollState())
                    .align(Alignment.Center)
            ) {
                for (i in 1..15) {
                    Box(
                        Modifier
                            .size(96.dp)
                            .padding(0.dp, 16.dp)
                            .align(Alignment.CenterHorizontally)
                            .background(Color.LightGray)) {
                        Text(
                            i.toString(),
                            Modifier.align(Alignment.Center)
                        )
                    }
                }
            }

            Surface(
                Modifier
                    .align(Alignment.BottomStart),
                elevation = 24.dp
            ) {
                Box(
                    Modifier
                        .fillMaxWidth()
                        .height(48.dp)
                        .background(Color.White)
                )
            }

[Logan Knight]

Yields:

[Logan Knight]

Why would rendering the Surface first break the elevation ?

[Logan Knight]

I have not yet found documentation explaining this aspect of the rendering logic and would be grateful to be pointed to it.

[Zach Klippenstein (he/him) [MOD]]

if this is desktop-specific you might want to ask in #compose-desktop

[Logan Knight]

Thank you. Thing is, I don't know if it is. All the components used are to the best of my knowledge not in the desktop specific packages. I will tomorrow if no one is able to correct my understanding here.

[Logan Knight]

So I just found this note.

elevation - The size of the shadow below the surface. Note that It will not affect z index of the Surface. If you want to change the drawing order you can use Modifier.zIndex.

...
Surface(
    Modifier
        .zIndex(2f)
        .align(Alignment.TopStart),
    elevation = 24.dp
)
...

works.

So now my questions now are why does the bottom bar receive a z-index derived from the elevation param?

How am I to know what value it has relative to the other components?

Does specifying a z-index override the one derived from the elevation param?

[Andrey Kulikov]

elevation is purely a size of the shadow to be drawn. it is not changing the drawing order. so if inside the main Box you defined grey boxes after the surface, boxes are drawn on top of the surface.

[Andrey Kulikov]

if you set Modifier.zIndex(1f) for the Surface it will be drawn on top as the default zIndex is 0

[Logan Knight]

Thank you for your response. Can you help me understand why the bottom Surface does seem to receive or assign a zIndex to it's children? Or if the first Surface is called after the Column it seems receive or assign a zIndex to it's children?

[Andrey Kulikov]

z indexes work only within one parent. you have a topmost Box and it has 3 children: Surface, Column and Surface(the ordering from the second example). They are drawn it this exact order, that why the Boxes inside of Column are drawn on top of Surface.

[Logan Knight]

I see, that now makes sense. I had assumed it was the elevation value of the third child (the Surface) that had caused it to appear and behave as though it was on top of the second child (the Column ) when it is simply the order in which they were drawn. Removing the elevation from the third child simply removes the shadow but still causes the Column to be behind it inline with what you said. Thank you for taking the time to help with this.