31

CustomPainter 的绘制方法的文档说,“要在 a 上绘制文本Canvas,请使用 a TextPainter”。所以在我MyCustomPainter的绘画方法中,我有以下内容:

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));

我尝试了各种偏移(Offset.zero, Offset.infinite, new Offset(10.0, 10.0),但我永远无法看到屏幕上绘制的文本。

4

3 回答 3

34

我在输入这个问题时找到了答案,但我已经为此苦苦挣扎了一段时间,所以发布以防万一它对其他人有帮助。

解决它的方法是将 TextSpan 行更改为:

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

显然,它要么是不可见地绘制文本,要么是白色(背景)颜色,因为我没有明确选择颜色。

于 2016-12-29T00:05:53.160 回答
28

在此处输入图像描述

要在 Flutter 中绘画,请使用CustomPaint小部件。小CustomPaint部件将CustomPainter对象作为参数。在该类中,您必须重写该paint方法,该方法为您提供了一个可以在其上绘画的画布。这是在上图中绘制文本的代码。

@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 xCenter = (size.width - textPainter.width) / 2;
  final yCenter = (size.height - textPainter.height) / 2;
  final offset = Offset(xCenter, yCenter);
  textPainter.paint(canvas, offset);
}

笔记:

  • 如果您使用白色背景,请确保将文本颜色设置为除白色以外的其他颜色,这是默认颜色。
  • Flutter 努力不假设文本方向,因此您需要明确设置它。缩写ltr代表从左到右,英语等语言使用。另一个选项是rtl(从右到左),使用阿拉伯语和希伯来语等语言。当代码在开发人员没有考虑过的语言环境中使用时,这有助于减少错误。

语境

这是main.dart代码,以便您可以在上下文中查看它。

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;
  }
}

也可以看看

有关我更完整的答案,请参阅本文

于 2019-07-05T03:17:36.727 回答
19

在 TextPainter 构造函数中,还需要指定TextDirection参数,否则会收到异常:

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));
于 2018-03-19T19:52:44.507 回答