flutter Text自动计算文本内容的宽度

---

前言

在项目开发中，我们有时候需要获取当前文本类容的宽度，并拿到这宽度去做其他的属性设置，本篇文章将主要讲解，如何使用TextPainter 来绘制文本，并获取它的宽高属性。

---

一、什么是TextPainter

在内容开始之前，我们先来看一下它的属性

TextPainter({
    
    
    InlineSpan? text,      // TextSpan 文本组件
    TextAlign textAlign = TextAlign.start,   // 文本对齐方式
    TextDirection? textDirection,      // 文本开始方向
    double textScaleFactor = 1.0,      // 内容间隔
    int? maxLines,                   // 最大显示行数，默认1
    String? ellipsis,                  // 内容截取方式
    Locale? locale,                    // 显示文本语言设置
    StrutStyle? strutStyle,            // struts 的样式
    TextWidthBasis textWidthBasis = TextWidthBasis.parent,    // 多行文本将占用父文件所给出的全部宽度
    ui.TextHeightBehavior? textHeightBehavior,    // TextHeightBehavior对象
  })

组件中的有些属性，大家都比较陌生，当然，在外面日常开发中，也基本上不会用。

二、封装TextPainter 并返回内容宽度

///value: 文本内容；fontSize : 文字的大小；fontWeight：文字权重；maxWidth：文本框的最大宽度；maxLines：文本支持最大多少行
static double calculateTextHeight(BuildContext context, String value, FontWeight fontWeight, fontSize, double maxWidth, int maxLines){
    
    
  if(value.isEmpty){
    
    
    return 0.0;
  }

  TextPainter painter = TextPainter(
    locale: Localizations.localeOf(context),
    maxLines: maxLines,
    textDirection: TextDirection.ltr,
    text: TextSpan(
      text: value,
      style: TextStyle(
        fontSize: fontSize,
        fontWeight: fontWeight,
      ),
    ),
  );

  painter.layout(maxWidth: maxWidth);

  return painter.width;
}

总结

本篇文件，我并不打算详细介绍TextPainter 组件的使用，主要讲解是我们怎么使用 TextPainter 组件，来绘制我们需要的自动获取文本内容的宽度功能。