web-dev-qa-db-fra.com

Comment utilisez-vous un TextPainter pour dessiner du texte?

Le documentation de la méthode Paint de CustomPainter dit, "Pour peindre du texte sur un Canvas, utilisez un TextPainter". Donc, dans la méthode Paint de mon MyCustomPainter, j'ai les éléments suivants:

TextSpan span = new TextSpan(text: 'Yrfc');
TextPainter tp = new TextPainter(text: span, textAlign: TextAlign.left);
tp.layout();
tp.Paint(canvas, new Offset(5.0, 5.0));

J'ai essayé une variété de compensations (Offset.zero, Offset.infinite, new Offset(10.0, 10.0) mais je ne peux jamais voir le texte peint à l'écran.

dartflutter
17
Reagankm

J'ai trouvé la réponse en tapant cette question, mais je lutte avec elle depuis un moment maintenant, alors postez au cas où cela aiderait quelqu'un d'autre.

Ce qui a résolu cela était de changer la ligne TextSpan en:

TextSpan span = new TextSpan(style: new TextStyle(color: Colors.grey[600]), text: 'Yrfc');

Apparemment, il s'agissait de dessiner le texte de manière invisible ou en blanc (arrière-plan) car je n'avais pas rendu mon choix de couleur explicite.

19
Reagankm

Dans le constructeur TextPainter, vous devez également spécifier le paramètre TextDirection, sinon vous recevrez une exception:

TextSpan span = new TextSpan(style: new TextStyle(color: Colors.blue[800]), text: name);
TextPainter tp = new TextPainter(text: span, textAlign: TextAlign.left, textDirection: TextDirection.ltr);
tp.layout();
tp.Paint(canvas, new Offset(5.0, 5.0));
10
user3161078

Comment utiliser TextPainter pour dessiner du texte

enter image description here

Pour peindre dans Flutter, vous utilisez le widget CustomPaint . Le widget CustomPaint prend un objet CustomPainter comme paramètre. Dans cette classe, vous devez remplacer la méthode Paint, qui vous donne un canevas sur lequel vous pouvez peindre. Voici le code pour dessiner le texte dans l'image ci-dessus.

@override
void Paint(Canvas canvas, Size size) {
  final textStyle = TextStyle(
    color: Colors.black,
    fontSize: 30,
  );
  final textSpan = TextSpan(
    text: 'Hello, world.',
    style: textStyle,
  );
  final textPainter = TextPainter(
    text: textSpan,
    textDirection: TextDirection.ltr,
  );
  textPainter.layout(
    minWidth: 0,
    maxWidth: size.width,
  );
  final offset = Offset(50, 100);
  textPainter.Paint(canvas, offset);
}

Remarques:

  • Si vous utilisez un fond blanc, veillez à définir la couleur du texte sur une autre couleur que le blanc, qui est la valeur par défaut.
  • Flutter fait un effort pour ne pas assumer la direction du texte, vous devez donc le définir explicitement. L'abréviation ltr signifie de gauche à droite, que les langues comme l'anglais utilisent. L'autre option est rtl (de droite à gauche), que les langues comme l'arabe et l'hébreu utilisent. Cela aide à réduire les bogues lorsque le code est utilisé dans des contextes linguistiques auxquels les développeurs ne pensaient pas.

Le contexte

Voici le code main.Dart afin que vous puissiez le voir en contexte.

import 'package:flutter/material.Dart';

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

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

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint( //                       <-- CustomPaint widget
        size: Size(300, 300),
        Painter: MyPainter(),
      ),
    );
  }
}

class MyPainter extends CustomPainter { //         <-- CustomPainter class
  @override
  void Paint(Canvas canvas, Size size) {
    //                                             <-- Insert your painting code here.
  }

  @override
  bool shouldRepaint(CustomPainter old) {
    return false;
  }
}

Voir également

Voir cet article pour ma réponse plus complète.

8
Suragch