Я работаю над всей документацией каждого модификатора. Теперь у меня есть некоторые проблемы с пониманием модификатора компоновки. Это модификатор .alignBy. Выравнивание с полем и текстом ясно. Текст выравнивается по базовой линии. Я вижу, где находится базовая линия текста. Середина пурпурного поля находится в том же положении, что и базовая линия красного текста. Если поле ближе к верхней части строки, то текст скользит вниз.
@Preview(heightDp = 200, backgroundColor = 0xFFCCCCCC, showBackground = true)
@Composable
fun test1() {
Row(Modifier.fillMaxHeight()) {
Box(
modifier = Modifier.size(80.dp, 40.dp)
.alignBy { it.measuredHeight / 2 }
.background(Color.Magenta)
)
Text(
text = "Text 1",
fontSize = 40.sp,
modifier = Modifier.alignByBaseline().background(color = Color.Red)
)
Text(
text = "Text 2",
modifier = Modifier.alignByBaseline().background(color = Color.Cyan)
)
}
}
Сейчас попробовал с двумя ящиками в один ряд и теперь не понимаю, как происходит выравнивание. Базовая линия коробки, кажется, находится посередине. Нужно ли мне два раза "alignBy {}"? Я не могу найти хорошее объяснение или учебник, объясняющий мою проблему. Документация и пример для разработчиков Android, на мой взгляд, не очень полезны.
@Preview(heightDp = 200, backgroundColor = 0xFFCCCCCC, showBackground = true)
@Composable
fun test2() {
Row(Modifier.fillMaxHeight()) {
Box(
modifier = Modifier.size(80.dp, 40.dp)
.alignBy { it.measuredHeight / 1 }
.background(Color.Magenta)
)
Box(
modifier = Modifier.size(80.dp, 20.dp)
.alignBy { it.measuredHeight / 2 }
.background(Color.Green)
)
}
}
Спасибо!
Из документа:
Внутри
Row
все компоненты сalignBy
будут выравниваться по вертикали с использованием указанногоHorizontalAlignmentLines
или значений, полученных изalignmentLineBlock
, образуя родственную группу.
В вашем втором примере:
Пурпурный Box
расположен в верхней части строки, так как он имеет Alignment.Top
выравнивание по Row
. Затем центр зеленого Box
(it.measuredHeight / 2
) выравнивается по вертикали с концом пурпурного Box
(it.measuredHeight / 1
)
С использованием:
Box(
modifier = Modifier.size(80.dp, 40.dp)
.alignBy { it.measuredHeight / 3 }
.background(Color.Magenta)
)
Box(
modifier = Modifier.size(80.dp, 20.dp)
.alignBy { it.measuredHeight / 2 }
.background(Color.Green)
)
Затем 1/3 пурпурного Box
(it.measuredHeight / 3
) выравнивается по вертикали с серединой зеленого Box
(it.measuredHeight / 2
)
Обратите внимание, что alignBy()
или alignByBaseline()
должны быть указаны для всех детей, которых мы хотим принять участие в выравнивании.
Row(Modifier.fillMaxHeight()) {
Box(
modifier = Modifier.size(80.dp, 40.dp)
.alignBy { it.measuredHeight / 1 }
.background(Color.Magenta)
)
Box(
modifier = Modifier.size(80.dp, 20.dp)
.alignBy { it.measuredHeight / 2 }
.background(Color.Green)
)
Box(
modifier = Modifier.size(20.dp, 20.dp)
.background(Color.Blue)
)
}
В этом случае синий Box
не входит в группу братьев и сестер, и он выровнен по верхней части Row
, поскольку у него есть Alignment.Top
.