Jetpack Compose Alignment — неправильное понимание модификатора alignBy

Я работаю над всей документацией каждого модификатора. Теперь у меня есть некоторые проблемы с пониманием модификатора компоновки. Это модификатор .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)
        )
    }
}

Спасибо!

2
0
93
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Из документа:

Внутри 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.

Другие вопросы по теме