Flutter文本自适应插件text_sizer_plus的使用

TextSizerPlus 是一个 Flutter 插件，可以自动调整文本大小以完美地适应其边界。本文将详细介绍如何使用 TextSizerPlus，并提供一个完整的示例代码。

目录

• 用法
  • maxLines
  • minFontSize & maxFontSize
  • group
  • stepGranularity
  • presetFontSizes
  • overflowReplacement
• 富文本
• 参数
• 性能
• 故障排除
  • 缺少边界
  • minFontSize 太大
• MIT 许可证

用法

TextSizerPlus 的行为与 Text 完全相同，唯一的区别是它会调整文本大小以适应其边界。

TextSizerPlus(
  'The text to display',
  style: TextStyle(fontSize: 20),
  maxLines: 2,
)

maxLines

maxLines 参数的工作方式与 Text 小部件相同。如果没有指定 maxLines 参数，TextSizerPlus 只会根据可用宽度和高度来适配文本。

TextSizerPlus(
  'A really long String',
  style: TextStyle(fontSize: 30),
  maxLines: 2,
)

minFontSize & maxFontSize

TextSizerPlus 从 TextStyle.fontSize 开始，测量结果文本并重新缩放以适应其边界。你可以设置允许的结果字体大小范围。

• minFontSize 指定最小可能的字体大小。如果文本仍然无法适应，将根据 overflow 处理。默认 minFontSize 是 12。
• maxFontSize 设置最大的可能字体大小。这在 TextStyle 继承字体大小时非常有用。

TextSizerPlus(
  'A really long String',
  style: TextStyle(fontSize: 30),
  minFontSize: 18,
  maxLines: 4,
  overflow: TextOverflow.ellipsis,
)

group

你可以同步多个 TextSizerPlus 的字体大小。它们会适应各自的边界，并且所有 TextSizerPlus 在同一组中的字体大小相同。这意味着它们会调整字体大小以适应组中最小的有效字体大小。

var myGroup = TextSizerGroup();

TextSizerPlus(
  'Text 1',
  group: myGroup,
);

TextSizerPlus(
  'Text 2',
  group: myGroup,
);

stepGranularity

TextSizerPlus 会尝试每个字体大小，从 TextStyle.fontSize 开始，直到文本适应其边界。stepGranularity 指定每次减少字体大小的步长。通常，此值不应低于 1 以获得最佳性能。

TextSizerPlus(
  'A really long String',
  style: TextStyle(fontSize: 40),
  minFontSize: 10,
  stepGranularity: 10,
  maxLines: 4,
  overflow: TextOverflow.ellipsis,
)

presetFontSizes

如果你只想允许特定的字体大小，可以使用 presetFontSizes 设置。如果设置了 presetFontSizes，minFontSize、maxFontSize 和 stepGranularity 将被忽略。

TextSizerPlus(
  'A really long String',
  presetFontSizes: [40, 20, 14],
  maxLines: 4,
)

overflowReplacement

如果文本溢出且无法适应其边界，将显示此小部件。这可以防止文本变得太小而难以阅读。

TextSizerPlus(
  'A String tool long to display without extreme scaling or overflow.',
  maxLines: 1,
  overflowReplacement: Text('Sorry String too long'),
)

富文本

你也可以使用富文本（如不同的文本样式或链接）与 TextSizerPlus。只需使用 TextSizerPlus.rich() 构造函数（与 Text.rich() 构造函数完全相同）。

TextSizerPlus.rich(
  TextSpan(text: 'A really long String'),
  style: TextStyle(fontSize: 20),
  minFontSize: 5,
)

参数

带有 * 的参数与 Text 的行为完全相同。

性能

TextSizerPlus 非常快。事实上，你可以将所有 Text 小部件替换为 TextSizerPlus。尽管如此，你不应该在 TextStyle 中使用不合理的高 fontSize。例如，如果知道文本永远不会大于 30，不要将 fontSize 设置为 1000。

如果字体大小范围非常大，考虑增加 stepGranularity。

故障排除

缺少边界

如果 TextSizerPlus 溢出或不调整文本大小，你应该检查它是否有受约束的宽度和高度。

错误 代码：

Row(
  children: [
    TextSizerPlus(
      'Here is a very long text, which should be resized',
      maxLines: 1,
    ),
  ],
)

因为 Row 和其他小部件（如 Container、Column 或 ListView）不会约束其子小部件，所以文本会溢出。你可以通过限制 TextSizerPlus 来解决这个问题。在 Row 和 Column 的情况下，将其包装在 Expanded 中，或者使用 SizedBox 或其他具有固定宽度（和高度）的小部件。

正确 代码：

Row(
  children: [
    Expanded( // 限制 TextSizerPlus 到 Row 的宽度
      child: TextSizerPlus(
        'Here is a very long text, which should be resized',
        maxLines: 1,
      ),
    ),
  ],
)

进一步的解释可以在这里找到：Stack Overflow。如果你仍然有问题，请打开一个 issue。

minFontSize 太大

TextSizerPlus 不会将文本大小调整到低于 minFontSize，默认值为 12。如果你使用 TextSizerPlus.rich()，这种情况很容易发生。

错误 代码：

TextSizerPlus.rich(
  TextSpan(
    text: 'Text that will not be resized correctly in some cases',
    style: TextStyle(fontSize: 200),
  ),
)

这段富文本没有样式，因此会回退到默认样式（可能是 fontSize = 14）。它有一个隐式的 minFontSize 为 12，这意味着它可以调整到最多 86% 的原始大小（14 -> 12）。只需将 minFontSize 设置为 0 或在 TextSizerPlus 中添加 style: TextStyle(fontSize: 200)。

注意：如果你使用第一种选项，还应考虑降低 stepGranularity。否则，调整大小的步骤会非常大。

正确 代码：

TextSizerPlus.rich(
  TextSpan(
    text: 'Text that will be resized correctly',
    style: TextStyle(fontSize: 200),
  ),
  minFontSize: 0,
  stepGranularity: 0.1,
)

MIT 许可证

Copyright (c) 2018 Simon Leier

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

示例代码

以下是一个完整的示例代码，展示了如何使用 TextSizerPlus：

import 'package:flutter/material.dart';
import 'package:text_sizer_plus/text_sizer_plus.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 200,
            height: 140,
            child: TextSizerPlus(
              'This string will be automatically resized to fit in two lines.',
              style: TextStyle(fontSize: 30),
              maxLines: 2,
            ),
          ),
        ),
      ),
    );
  }
}

希望这篇文档对你有所帮助！如果有任何问题或建议，请随时联系我。