Jetpack Compose - Colonne - Centre de gravité

Vous pouvez utiliser Column(crossAxisAlignment = CrossAxisAlignment.Center) . Cela fonctionne comme la gravité.

Vous pouvez utiliser Arrangement.Center

• Placer les composants enfants aussi près que possible du centre de l'axe principal

CODE D'ÉCHANTILLON

@Composable
fun Column(

    arrangement: Arrangement = Arrangement.Center,

)

Vous avez la possibilité d'appliquer la gravité sur les éléments individuels comme suit, puis il centrera les éléments.

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

Vous pouvez utiliser FlexColumn pour amener le contenu au centre car il prend en charge CrossAxisAlignment.

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

Déformez-le à l'intérieur de manière inflexible afin que les widgets n'occupent pas le plein écran.

De la même manière, si vous souhaitez placer des vues au centre de l'écran avec FlexColumn, utilisez mainAxisAlignment avec crossAxisAlignment

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

Voici comment procéder à partir de la dernière version de compose (0.1.0-dev05)

Pour centrer le texte à l'intérieur de ce conteneur, vous devez utiliser le modificateur LayoutAlign .

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

si vous utilisez 0.1.0-dev09 vous pouvez modifier les attributs de gravité ou d'arrangement en utilisant les paramètres horizontalGravity et 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))
    }
}

Avec 1.0.0-alpha03 vous pouvez utiliser ces paramètres :

• horizontalAlignment = la gravité horizontale des enfants du modèle.
• verticalArrangement = la disposition verticale des enfants du layout

Quelque chose comme:

Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
) {
    Box (  ) { ... }

Si vous voulez seulement centrer horizontalement, utilisez simplement:

Column(
        modifier = Modifier.fillMaxWidth().fillMaxHeight(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
) {
    Box (  ) {
        Text(
                text = "First item",
                modifier = Modifier.padding(16.dp)
        )
        Text(
                text = "Second item",
                modifier = Modifier.padding(16.dp)
        )
        Text(
                text = "Third item",
                modifier = Modifier.padding(16.dp)
        )
    }
}

Vous pouvez utiliser Box , par défaut, il l'aligne dans un ColumnScope, vous pouvez penser à Box comme un conteneur pour des vues alignées verticalement si vous souhaitez aligner n'importe quel composant au lieu de créer à chaque fois une Column pour aligner les composants

@Composable
fun BoxDemo(){
    Box(modifier = Modifier.fillMaxSize(),gravity = Alignment.Center){
        Text(text = "First text",modifier = Modifier.padding(top = 8.dp))
        Text(text = "Second text",modifier = Modifier.padding(top = 8.dp))
        Text(text = "Third text",modifier = Modifier.padding(top = 8.dp))
    }
}

Centrer horizontalement

Column(modifier = Modifier.fillMaxWidth().fillMaxHeight(), verticalArrangement = Arrangement.Center) {
        Text(text = item.title)
        Text(text = item.description)
 }

Pour centrer à la fois horizontalement et verticalement dans la surface parent

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

Vous pouvez définir l'alignement dans la ligne ou la colonne pour le texte composable dans alpha07

Text(text = "someText" , modifier = Modifier.align(Alignment.CenterVertically))