https://kotlinlang.org logo
#compose
Title
# compose
l

Logan Knight

01/21/2021, 9:19 PM
My intuition is failing me. I'm not sure if this is a bug in desktop, or a failure of my understanding. See thread.
Copy code
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)
                )
            }
Yields
Where as
Copy code
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)
                )
            }
Yields:
Why would rendering the
Surface
first break the
elevation
?
I have not yet found documentation explaining this aspect of the rendering logic and would be grateful to be pointed to it.
z

Zach Klippenstein (he/him) [MOD]

01/21/2021, 9:38 PM
if this is desktop-specific you might want to ask in #compose-desktop
l

Logan Knight

01/21/2021, 9:41 PM
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.
👍 2
So I just found this note.
Copy code
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.
Copy code
...
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?
a

Andrey Kulikov

01/22/2021, 1:58 PM
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.
if you set Modifier.zIndex(1f) for the Surface it will be drawn on top as the default zIndex is 0
l

Logan Knight

01/22/2021, 3:41 PM
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?
a

Andrey Kulikov

01/22/2021, 4:25 PM
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.
l

Logan Knight

01/22/2021, 4:33 PM
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.
3 Views