2
votes

Flutter TextField aligner le texte en haut

J'ai un TextField comme celui-ci:

Je veux que l'indice et le texte soient alignés en haut, pas au centre.

J'ai essayé textAlign: TextAlign.start mais c'est juste pour l'alignement horizontal.

TextField(
  textAlign: TextAlign.start,
  expands: true,
  maxLines: null,
  decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(3),
      ),
      hintText: 'Enter Unicode text'),
),

Comment faire monter le texte en haut?

J'ai trouvé la réponse, alors j'ajoute cela comme une question-réponse d'auto-réponse.

flutter textfield alignment

0 commentaires

3 Réponses :

5
votes

Pour aligner le texte à l'intérieur d'un TextField vers le haut, utilisez

TextField(
  textAlignVertical: TextAlignVertical.top,
  expands: true,
  maxLines: null,
  decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(3),
      ),
      hintText: 'Enter Unicode text'),
)

Cela vous donnera ce que vous voulez:

textAlignVertical: TextAlignVertical.top

0 commentaires

1
votes

L'alignement vertical du texte dans une zone de saisie sera utilisé.

Une valeur y unique pouvant aller de -1,0 à 1,0. -1.0 s'aligne sur le haut d'une zone de saisie afin que le haut de la première ligne de texte tienne dans la zone et son remplissage. 0.0 s'aligne sur le centre de la boîte. 1.0 s'aligne de sorte que le bas de la dernière ligne de texte s'aligne avec le bord intérieur inférieur de la zone de saisie.

Vous devez vous assurer que:

TextField.textAlignVertical, qui est transmis à InputDecorator.

TextField(
  textAlignVertical: TextAlignVertical.top,
  expands: true,
  maxLines: null,
  decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(3),
      ),
      hintText: 'Enter Unicode text'),
)

0 commentaires

1
votes

Ajoutez alignLabelWithHint: true,

TextFormField(
  maxLines: 10,
  minLines: 5,
  decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(3),
      ),
      hintText: 'Enter Unicode text'),
      alignLabelWithHint: true,
)

0 commentaires