web-dev-qa-db-fra.com

Limiter la largeur maximale du conteneur en flottement

  Widget build(context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 300,
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: color ?? Colors.blue,
            borderRadius: BorderRadius.circular(10)
          ),
          child: msg
        )
      ],  
    );
  }

C'est la méthode de construction de mon widget et elle rend cette interface utilisateur en fonction de ce que je passe en tant que paramètre msg

  1. Chargement du texte enter image description here
  2. Un très long texte enter image description here

Maintenant, le problème auquel je suis confronté est que je ne peux pas envelopper le texte à l'intérieur de ce conteneur/boîte bleue sans définir sa largeur, mais si je règle la largeur du conteneur/boîte bleue, il restera toujours aussi large, quelle que soit la longueur du texte. .

Maintenant, existe-t-il un moyen de définir maxWidth (comme disons 500) de conteneur/boîte bleue? Pour que la boîte bleue devienne aussi large que nécessaire pour un petit texte comme "Chargement" et pour un texte long, elle s'agrandira jusqu'à atteindre une largeur de 500 unités, puis enveloppera le texte?

Sortie requise pour le texte long:

Pour le petit texte comme le chargement, je ne veux pas de changement dans l'interface utilisateur, mais pour le texte long, je veux qu'il ressemble à ceci. enter image description here

user-interfaceflutterflutter-layoutword-wrapflutter-container
14
Nishant Desai

Vous pouvez ajouter une contrainte au widget conteneur avec le maxWidth préféré comme ceci:

Widget build(context) {
return Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Container(
      constraints: BoxConstraints(minWidth: 100, maxWidth: 200),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: color ?? Colors.blue,
        borderRadius: BorderRadius.circular(10)
      ),
      child: msg
    )
  ],  
);
}

J'espère que ça aide!

36
Kappadona

Peut-être utiliser un flexible autour du texte, puis envelopper le flexible dans un contenant de taille fixe? Juste une idée.

0
user11209319