web-dev-qa-db-fra.com

Widgets d'alignement de texte dans un widget de ligne

J'ai une rangée avec 3 widgets de texte.

L'entrée de texte du milieu peut s'étendre sur plusieurs lignes, mais les deux premières seront vraiment petites.

Je veux que le premier widget ait le texte en haut de la ligne et le 3ème widget pour avoir le texte en bas de la ligne.

C'est fondamentalement quelque chose de similaire à cette image

enter image description here

Donc, fondamentalement, le premier widget serait la citation d'ouverture, puis le 3ème la citation de fin.

Je peux définir un crossAxisAlignment sur la ligne pour commencer ou terminer et cela déplacera les guillemets, mais cela les déplacera tous les deux.

En ce moment, j'ai quelque chose comme ça:

return Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        child: Text('"'),
      ),
      Expanded(
        child: Text(
          entry.text,
          style: style,
        ),
      ),
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        color: Colors.yellow,
        child: Text(
          '”',
          textAlign: TextAlign.start,
        ),
      ),
    ],
  );

mais je ne sais pas comment aligner la citation du bas sur le bas du texte, au moment où elle se trouve en haut.

flutterflutter-layout
7
Andrew

IntrinsicHeight est le widget que vous recherchez. Cela fonctionne bien avec ce widget.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new IntrinsicHeight(
        child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Align(
            alignment: Alignment.topLeft,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: Text('"'),
            ),
          ),
          Expanded(
            child: Text(
              "The middle text entry can span several lines, but the first two will be really small. I'm wanting to have the first widget have the text at the top of the row and the 3rd widget to have the text at the bottom of the row. It's basically something similar to this image"
            ),
          ),
          new Align(
            alignment: Alignment.bottomRight,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: Text(
                '”',
                textAlign: TextAlign.start,
              ),
            ),
          ),
        ],
        ),
      ));
  }
6
Vinoth Kumar

une idée serait de créer une pile, que d'envelopper le Text() avec Positioned widget. positionnez le guillemet gauche à top: et left: et le guillemet droit à bottom:right:. et enveloppez le texte du milieu avec Container, calculez la taille restante à partir de MediaQuery.of(context).size.width - qouoteWidth*2 et définissez la taille fixe sur conteneur et positionnez-la aux coordonnées calculées.

Je suis sûr qu'il existe également d'autres solutions

1
Tree

Vous pouvez toujours faire Colonne -> [Développé (texte), Développé (Conteneur (), Développé (texte)] et ajuster la flexion de la boîte vide selon vos besoins.

Il y a aussi Container (ou Column/Row) -> Stack -> [Column (mainAxis start), Column (mainAxis end)].

Travaillez plus intelligemment, pas plus dur. Le widget IntrinsicHeight est coûteux en calcul et je ne recommanderais pas de l'utiliser pour cela.

1
Christian