为什么从顶部填充根据元素的对齐方式获得不同的长度值？

Question

假设我有两个场景有分隔符，从顶部填充。

第一个场景(Aligment.TopCenter);

Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.TopCenter
                ) {
                    Divider(
                        thickness = 3.dp,
                        color = Color.Red)
                    Divider(
                        modifier = Modifier.padding(top = 200.dp),
                        thickness = 3.dp,
                        color = Color.Black)
                }

屏幕：

第二种情况(Aligment.Center);

Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center
                ) {
                    Divider(
                        thickness = 3.dp,
                        color = Color.Red)

                    Divider(
                        modifier = Modifier.padding(top = 200.dp),
                        thickness = 3.dp,
                        color = Color.Black)
                }
            }

屏幕：

问题是：为什么 a 不等于 b，即使它们具有相同的填充？

Answer 1

Modifier.padding 增加视图的大小。当它放在 Box 的中心时，看起来只应用了一半的填充，但视图的另一半位于屏幕的上半部分。

您可以添加边框以查看此处的实际情况：

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    Divider(
        thickness = 3.dp,
        color = Color.Red)

    Divider(
        modifier = Modifier.border(2.dp, color = Color.Green).padding(top = 200.dp),
        thickness = 3.dp,
        color = Color.Black)
}

您可以使用 Modifier.offset 来获得您期望的结果

为什么从顶部填充根据元素的对齐方式获得不同的长度值？

why padding from top gets different length value based on element's alignment?

android

kotlin

android-jetpack-compose