Jetpack Compose - Колонна - Гравитационный центр

Question

Я создаю макет с помощью Jetpack Compose, и в нем есть столбец. Я бы хотел, чтобы центральные элементы внутри этой колонки:

 Column(modifier = ExpandedWidth) {
        Text(text = item.title)
        Text(text = item.description)
 }

Answer 1

У вас есть возможность применить гравитацию к отдельным предметам следующим образом, тогда она будет центрировать предметы.

Column(modifier = ExpandedWidth) {
       Text(modifier = Gravity.Center, text = item.title)
       Text(modifier = Gravity.Center, text = item.description)
}

Answer 2

Это то, как вы делаете это с последней версией compose (0.1.0-dev05)

Чтобы центрировать текст внутри этого контейнера, вам нужно использовать модификатор LayoutAlign.

Column(modifier = LayoutWidth.Fill + LayoutAlign.Center) {
    Text(text = item.title)
    Text(text = item.description)
}

Answer 3

Вы можете использовать Arrangement.Center

• Размещать дочерние компоненты как можно ближе к центру главной оси

SAMPLE CODE

@Composable
fun Column(

    arrangement: Arrangement = Arrangement.Center,

)

Answer 4

Вы можете использовать Column(crossAxisAlignment = CrossAxisAlignment.Center). Это работает как гравитация.

Answer 5

если вы используете 0.1.0-dev09, вы можете изменить атрибуты гравитации или расположения, используя параметры horizontalGravity и verticalArrangement

@Composable
fun centeredColumn() {
    return Column (
        modifier = Modifier.height(100.dp), 
        horizontalGravity = Alignment.CenterHorizontally, 
        verticalArrangement = Arrangement.Center
    ) {
            Image(asset = imageResource(id = R.drawable.ic_emojo_logo_white))
            Text(text = stringResource(id = R.string.login_subtitle))
    }
}

Answer 6

Вы можете использовать FlexColumn для переноса контента в центр, поскольку он поддерживает CrossAxisAlignment.

FlexColumn(crossAxisAlignment = CrossAxisAlignment.Center) {
    inflexible {
        Text(text = item.title)
        Text(text = item.description)
    }
}

Деформируйте его внутри негибкого, чтобы виджеты не занимали весь экран.

В том же самом Кстати, если вы хотите, чтобы с помощью FlexColumn вывести представления в центр экрана, используйте mainAxisAlignment вместе с crossAxisAlignment

FlexColumn(mainAxisAlignment = MainAxisAlignment.Center,
        crossAxisAlignment = CrossAxisAlignment.Center) {
    inflexible {
        Text(text = item.title)
        Text(text = item.description)
    }
}