AutoSizeText

Flutter 小部件，可自动调整文本大小以完美地适应其边界。

请给予一些❤️并点亮仓库以支持该项目

AutoSizeText

用法

AutoSizeText 的行为与 Text 完全相同。唯一区别在于它会根据边界自动调整文本大小。

AutoSizeText(
  "The text to display",
  style: TextStyle(fontSize: 20.0),
  maxLines: 2,
)

maxLines

maxLines 参数的使用方式与您熟悉的 Text widget 一样。如果未指定 maxLines 参数，AutoSizeText 将仅根据可用宽度和高度来调整文本。

AutoSizeText(
  "A really long String",
  style: TextStyle(fontSize: 30.0),
  maxLines: 2,
)

上面的示例

minFontSize & maxFontSize

AutoSizeText 从 TextStyle.fontSize 开始。它会测量生成的文本并将其重新缩放到适合其边界。但是，您可以设置生成字体大小的允许范围。

使用 minFontSize，您可以指定最小可能的字体大小。如果文本仍然不适合，它将根据 overflow 进行处理。默认的 minFontSize 为 12.0。

maxFontSize 设置了最大可能的字体大小。如果 TextStyle 继承了字体大小并且您想限制它，这将非常有用。

AutoSizeText(
  "A really long String",
  style: TextStyle(fontSize: 30.0),
  minFontSize: 18.0,
  maxLines: 4,
  overflow: TextOverflow.ellipsis,
)

stepGranularity

AutoSizeText 会尝试所有字体大小，从 TextStyle.fontSize 开始，直到文本适合其边界为止。
stepGranularity 指定了每一步字体大小减小的量。通常，为了获得最佳性能，此值不应低于 1.0。

AutoSizeText(
  "A really long String",
  style: TextStyle(fontSize: 40.0),
  minFontSize: 10.0,
  stepGranularity: 10.0,
  maxLines: 4,
  overflow: TextOverflow.ellipsis,
)

presetFontSizes

如果您只想允许特定的字体大小，可以使用 presetFontSizes 进行设置。
如果设置了 presetFontSizes，则会忽略 minFontSize、maxFontSize 和 stepGranularity。

AutoSizeText(
  "A really long String",
  presetFontSizes: [40.0, 20.0, 14.0],
  maxLines: 4,
)

富文本

您还可以将富文本（例如不同的文本样式或链接）与 AutoSizeText 一起使用。只需使用 AutoSizeText.rich() 构造函数即可。
（它与 Text.rich() 构造函数的工作方式完全相同）。

您唯一需要注意的就是字体大小的计算方式：AutoSizeText 的 style 参数中的 fontSize
（或者如果未设置，则为继承的 fontSize）将作为参考。

例如

AutoSizeText.rich(
  TextSpan(text: "A really long String"),
  style: TextStyle(fontSize: 20.0),
  minFontSize: 5.0,
)

文本的大小将至少是其原始大小的 1/4（5 / 20 = 1/4）。
但这并不意味着所有 TextSpan 的字体大小都至少为 5.0。

性能

AutoSizeText 非常快。尽管如此，您也不应在 TextStyle 中使用不合理的过高的 fontSize。例如，如果您知道文本的最大尺寸不会超过 30.0，则不要将 fontSize 设置为 1000.0。

如果您的字体大小范围很大，请考虑增加 stepGranularity。

故障排除

如果 AutoSizeText 溢出或未调整文本大小，您应该检查它是否具有约束的宽度/高度。

错误代码

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        AutoSizeText(
          "Here is a very long text, which should be resized",
          maxLines: 1,
        ),
      ],
    );
  }
}

因为 Row 不会约束其子项的宽度，所以文本会溢出。

正确代码

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded( // Constrains AutoSizeText to the width of the Row
          child: AutoSizeText(
            "Here is a very long text, which should be resized",
            maxLines: 1,
          )
        ),
      ],
    );
  }
}

GitHub

https://github.com/leisim/auto_size_text