2
votes

Comment définir un coin arrondi de TextSpan dans Flutter

Je veux définir le coin arrondi de Textspan en flutter, je pense que la classe Paint est nécessaire, mais je ne peux pas comprendre comment faire cela.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: new AppBar(),
        body: new RichText(
          text: new TextSpan(
            text: null,
            style: TextStyle(fontSize: 20.0, color: Colors.black),
            children: <TextSpan>[
              new TextSpan(
                text: 'inactive ',),
              new TextSpan(
                  text: 'active',
                  style: new TextStyle(
                    color: Colors.white,
                    background: Paint()
                      ..color = Colors.redAccent,
                  )),
            ],
          ),
        ),
      ),
    );
  }
}

Existe-t-il un moyen d'utiliser Textspan pour y parvenir au lieu d'utiliser un Container wrapping Text?

android flutter ios dart

0 commentaires

4 Réponses :

0
votes

Si vous souhaitez définir le coin arrondi du champ de texte dans Flutter Vous devez utiliser Container uniquement.Si vous souhaitez éviter Container, il existe un autre moyen, vous devez éviter d'utiliser ListView comme corps dans votre application. Si vous souhaitez ajouter un seul élément à l'écran, vous pouvez essayer sans conteneur, mais s'il y a plus d'un élément, vous n'avez pas le choix sans implémenter ListView et ajouter plusieurs conteneurs dans un but différent.

new Container(
              height: 80.0,
              color: Colors.transparent,
              child: new Container(
                  decoration: new BoxDecoration(
                      color: Colors.green,
                      borderRadius: new BorderRadius.only(
                          topLeft: const Radius.circular(30.0),
                          topRight: const Radius.circular(30.0),
                          bottomLeft: const Radius.circular(30.0),
                          bottomRight: const Radius.circular(30.0))),
                  child: new Center(
                    child: new Text("Active text"),
                  )),
            ),

3 commentaires

Merci, je sais que ça va marcher. Mais dans mon application, je dois rendre cliquable chaque mot (divisé par espace) d'un article. Cependant, si je crée un Texte pour chaque mot, il y a de fortes chances que dans certaines lignes, le premier mot de cette ligne soit un espace donc il n'y a pas d'alignement au début. exemple

Pour éviter l'espace au début ou à la fin du texte, vous pouvez utiliser trim () qui vous aidera à couper les espaces supplémentaires de la chaîne. Cela ne fonctionnera-t-il pas?

J'utilise Wrap (children: articleStr.split ('') .map ((w) => Text (w)). ToList ()) Je ne sais pas comment le premier composant de quelle ligne est un Texte avec un espace comme contenu.

6
votes

Sans utiliser Container ou autre chose - je ne vois qu'une seule façon d'arrondir les coins

TextSpan(
    text: 'active',
    style: TextStyle(
        fontSize: 20.0,
        color: Colors.white,
        background: Paint()
          ..strokeWidth = 24.0
          ..color = Colors.red
          ..style = PaintingStyle.stroke
          ..strokeJoin = StrokeJoin.round))

Mais dans ce cas, il y a des rembourrages autour du texte, donc je doute que ce soit la bonne manière

4 commentaires

Si je règle la largeur du trait = 1, la bordure n'est pas visible. Puis-je configurer le rayon de la bordure?

Il semble que vous ne pouvez pas. Comme je l'ai dit - je doute que ce soit la bonne manière, car elle n'est guère personnalisée.

Je vous remercie. Peut-être besoin d'une pile et calculez la position comme solution de contournement.

Je souhaite que nous ayons «PiantingStyle.both».

1
votes

si le texte en surbrillance est suffisamment court (vous ne voulez donc pas y couper la ligne), vous pouvez simplement utiliser WidgetSpan insted de TextSpan.

Par exemple:

RichText(
            textAlign: TextAlign.center,
            text: TextSpan(
              children: [
                TextSpan(
                  text: "some text",
                ),
                WidgetSpan(
                  child: Container(
                    padding: EdgeInsets.symmetric(vertical: 1),
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(999),
                    ),
                    child: IntrinsicWidth(
                      child: Text(
                        "some text",
                      ),
                    ),
                  )
                ),
                TextSpan(text: "some text"),
              ],
            ),
          ),

1 commentaires

mais pour cela, le texte doit être codé en dur ...

0
votes

J'ai créé un package qui est capable de personnaliser l'arrière-plan du texte -> vous pouvez changer le rayon, le remplissage et la couleur de l'arrière-plan du texte.

C'est une dérivation du widget AutoSizeText afin que vous puissiez même dimensionner automatiquement le texte si vous le souhaitez.

Voici un exemple d'image du texte avec l'arrière-plan, le rayon et le remplissage.

J'espère que cela pourra aider tous ceux qui en ont besoin.

Le lien vers le dépôt github est le suivant: https://github.com/Letalus/auto_size_text_background

0 commentaires