web-dev-qa-db-fra.com

Comment aligner des widgets simples dans Flutter?

Je souhaite aligner un widget Flutter dans son parent. Je sais que je peux centrer un widget en l'enveloppant dans un widget Centre.

  Center(
    child: Text("widget"),
  )

Mais comment puis-je l'aligner à droite, en bas, en haut au milieu, etc.?

Notes:

Je parle d'un seul enfant, pas de plusieurs enfants dans une rangée ou une colonne. Voir ces SO questions:

Celui-ci est sur la bonne voie, mais j'essaie de poser une question plus canonique:

Ceci est une auto-réponse Q & A. Ma réponse est ci-dessous.

dartflutteralignment
15
Suragch

Comment aligner les widgets

Pour aligner un widget enfant dans son parent, utilisez le widget Align . Si vous savez utiliser le widget Center, alors vous êtes la bonne piste, car Center n'est qu'un cas particulier de Align.

Enveloppez le widget que vous souhaitez aligner avec le widget Aligner et définissez sa propriété d'alignement. Par exemple, cela alignerait un widget de texte sur le milieu droit du parent.

Align(
  alignment: Alignment.centerRight,
  child: Text("widget"),
)

D'autres options sont

  • Alignment.topLeft
  • Alignment.topCenter
  • Alignment.topRight
  • Alignment.centerLeft
  • Alignment.center
  • Alignment.centerRight
  • Alignment.bottomLeft
  • Alignment.bottomCenter
  • Alignment.bottomRight

Voici à quoi ça ressemble:

enter image description here

Vous n'êtes pas limité à ces endroits. Vous pouvez aligner votre widget n'importe où. en spécifiant une paire x, y, où (0,0) est le centre de la vue et les bords sont 1.0 unité tout autour. Peut-être qu'une image aiderait:

alignment

où pour toute position relative (x,y)

  • Alignment.topLeft Est Alignment(-1.0, -1.0)
  • Alignment.topCenter Est Alignment(0.0, -1.0)
  • Alignment.topRight Est Alignment(1.0, -1.0)
  • Alignment.centerLeft Est Alignment(-1.0, 0.0)
  • Alignment.center Est Alignment(0.0, 0.0)
  • Alignment.centerRight Est Alignment(1.0, 0.0)
  • Alignment.bottomLeft Est Alignment(-1.0, 1.0)
  • Alignment.bottomCenter Est Alignment(0.0, 1.0)
  • Alignment.bottomRight Est Alignment(1.0, 1.0)

Notez dans l'image que l'alignement (x,y) N'a pas besoin d'être dans la plage [-1, +1]. L'alignement (1,2) Signifie qu'il se trouve à droite du widget et en dessous du widget, moitié moins que sa hauteur.

Voici un exemple de position d’alignement personnalisé.

Align(
  alignment: Alignment(0.7, -0.5),
  child: Text("widget"),
)

alignment

Code supplémentaire

Voici le code main.Dart Utilisé pour créer les exemples ci-dessus pour votre commodité de couper-coller.

import 'package:flutter/material.Dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: myLayoutWidget(),
      ),
    );
  }
}

Widget myLayoutWidget() {
  return Align(
    alignment: Alignment(0.7, -0.5),
    child: Text(
      "widget",
      style: TextStyle(fontSize: 30),
    ),
  );
}
35
Suragch
  Expanded(
    child: Align(
      alignment: Alignment.centerRight,
      child: Text("widget"),
    ),
  )
1
Brinda Rathod