Flutter - Ellipsis de débordement d'insertion dans le texte

Question

J'essaie de créer une ligne dans laquelle le texte central a une taille maximale, et si le contenu du texte est trop volumineux, sa taille correspond.

J'insère la propriété TextOverflow.Ellipsis pour raccourcir le texte et insérer le point triple ... mais cela ne fonctionne pas.

main.Dart

import 'package:flutter/material.Dart';

void main() {
runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    appBar: new AppBar(
      backgroundColor: new Color(0xFF26C6DA),
    ),
    body: new ListView  (
      children: <Widget>[
        new Card(
          child: new Container(
            padding: new EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0),
            child: new Row(
              children: <Widget>[
                new Container(
                  padding: new EdgeInsets.only(right: 24.0),
                  child: new CircleAvatar(
                    backgroundColor: new Color(0xFFF5F5F5),
                    radius: 16.0,
                  )
                ),
                new Container(
                  padding: new EdgeInsets.only(right: 13.0),
                  child: new Text(
                    'Text lar...',
                    overflow: TextOverflow.Ellipsis,
                    style: new TextStyle(
                      fontSize: 13.0,
                      fontFamily: 'Roboto',
                      color: new Color(0xFF212121),
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                new Container(
                  child: new Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: <Widget>[
                      new Row(
                        children: <Widget>[
                          new Text(
                            'Bill  ',
                            style: new TextStyle(
                              fontSize: 12.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                          new Text(
                            '\$ -999.999.999,95',
                            style: new TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF212121)
                            ),
                          ),
                        ],
                      ),
                      new Row(
                        children: <Widget>[
                          new Text(
                            'Limit  ',
                            style: new TextStyle(
                              fontSize: 12.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                          new Text(
                            'R\$ 900.000.000,95',
                            style: new TextStyle(
                              fontSize: 14.0,
                              fontFamily: 'Roboto',
                              color: new Color(0xFF9E9E9E)
                            ),
                          ),
                        ],
                      ),
                    ]
                  )
                )
              ],
            ),
          )
        ),
      ]
    )
  );
}

résultat:

 

attendu:

 

Answer 1

Vous devriez envelopper votre Container dans un Flexible pour que votre Row sache qu’il est normal que Container soit plus étroit que sa largeur intrinsèque. Expanded fonctionnera également.

 

            new Flexible(
              child: new Container(
                padding: new EdgeInsets.only(right: 13.0),
                child: new Text(
                  'Text largeeeeeeeeeeeeeeeeeeeeeee',
                  overflow: TextOverflow.Ellipsis,
                  style: new TextStyle(
                    fontSize: 13.0,
                    fontFamily: 'Roboto',
                    color: new Color(0xFF212121),
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),

Answer 2

Vous pouvez utiliser cet extrait de code pour afficher du texte avec Ellipsis

Text(
    "Introduction to Very very very long text",
    maxLines: 1,
    overflow: TextOverflow.Ellipsis,
    softWrap: false,
    style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),

Answer 3

Utilisant des ellipses 

Text(
  "This is a long text",
  overflow: TextOverflow.Ellipsis,
),

 

---

Utilisation du fondu

Text(
  "This is a long text",
  overflow: TextOverflow.fade,
  maxLines: 1,
  softWrap: false,
),

 

---

Utilisant Clip

Text(
  "This is a long text",
  overflow: TextOverflow.clip,
  maxLines: 1,
  softWrap: false,
),

 

Answer 4

SizedBox(
    width: 200.0,
    child: Text('PRODUCERS CAVITY FIGHTER 50X140g',
                overflow: TextOverflow.Ellipsis,
                style: Theme.of(context).textTheme.body2))

Il suffit d’envelopper à l’intérieur d’un widget qui peut prendre une largeur spécifique pour que cela fonctionne ou assumer la largeur du conteneur parent.

Answer 5

L'habillage dont les éléments enfants sont dans une ligne ou une colonne, veuillez envelopper votre colonne ou cette ligne est new Flexible ();

https://github.com/flutter/flutter/issues/4128

Answer 6

Je pense que le conteneur parent doit recevoir une largeur maximale de la taille appropriée. Il semble que la zone de texte remplisse l’espace précédent.