Flutter自动调整文本大小插件auto_size_text_pro的使用

Flutter自动调整文本大小插件auto_size_text_pro的使用

AutoSizeTextPro 是一个 Flutter 小部件，它能够自动调整文本大小以完美适应其边界。以下是如何使用该插件的详细指南。

资源

目录

使用

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

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

注意: AutoSizeText 需要受约束才能调整文本大小。更多详情请参阅这里。

maxLines

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

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

minFontSize & maxFontSize

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

minFontSize 可以指定最小可能的字体大小。如果文本仍然无法适应，将根据 overflow 进行处理。默认的 minFontSize 是 12。

maxFontSize 设置最大的可能字体大小。这在 TextStyle 继承了字体大小且你想对其进行限制时很有用。

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

group

你可以同步多个 AutoSizeText 的字体大小。它们将根据边界进行调整，并且同一组中的所有 AutoSizeText 具有相同的大小。这意味着它们会调整字体大小以匹配组中具有最小有效字体大小的成员。

注意: 如果 AutoSizeText 因为像 minFontSize 这样的约束无法调整，则它不会与其他组成员具有相同的大小。

AutoSizeGroup 实例代表一组。将此实例传递给你要添加到该组的所有 AutoSizeText。你不必担心在不再需要时处置该组。

重要: 请不要在每次构建时都传递一个新的 AutoSizeGroup 实例。换句话说，在 StatefulWidget 中保存 AutoSizeGroup 实例，或者使用 AutoSizeGroupBuilder。

var myGroup = AutoSizeGroup();

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

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

stepGranularity

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

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

presetFontSizes

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

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

overflowReplacement

如果文本溢出并且无法适应其边界，将显示此小部件。这对于防止文本太小而难以阅读非常有用。

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

富文本

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

注意: 字体大小计算的工作方式：AutoSizeText 的 style 参数中的 fontSize（如果没有设置则继承的 fontSize）将作为参考。

例如：

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

文本至少会缩小到其原始大小的 1/4（5 / 20 = 1/4）。但这并不意味着所有的 TextSpan 至少具有字体大小 5。

参数

参数 描述
key* 控制一个组件如何替换另一个组件在树中的位置。
textKey 设置生成的 Text 小部件的键。
style* 如果非空，则为该文本使用的样式。
minFontSize 当自动调整文本大小时使用的最小文本大小约束。如果设置了 presetFontSizes 则被忽略。
maxFontSize 当自动调整文本大小时使用的最大文本大小约束。如果设置了 presetFontSizes 则被忽略。
stepGranularity 字体大小适应约束时的步长。
presetFontSizes 预定义所有可能的字体大小。必须按降序排列。
group 同步多个 AutoSizeText 的大小。
textAlign* 文本如何水平对齐。
textDirection* 文本的方向性。这决定了 textAlign 值如 TextAlign.start 和 TextAlign.end 如何解释。
locale* 用于选择字体，当同一个 Unicode 字符可以根据不同的区域设置呈现不同效果时。
softWrap* 文本是否应在软换行处断开。
wrapWords 是否应包装不适应一行的单词。默认为 true 以行为 Text。
overflow* 如何处理视觉溢出。
overflowReplacement 如果文本溢出且无法适应其边界，则显示此小部件。
textScaleFactor* 每个逻辑像素的字体像素数。也影响 minFontSize、maxFontSize 和 presetFontSizes。
maxLines 文本可跨越的最大行数。
semanticsLabel* 该文本的替代语义标签。

标记为 * 的参数的行为与 Text 完全相同。

性能

AutoSizeText 非常快。事实上，你可以将所有的 Text 小部件替换为 AutoSizeText。

然而，你不应该在 TextStyle 中使用不合理的高 fontSize。例如，如果你知道文本永远不会大于 30，则不应将 fontSize 设置为 1000。

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

故障排除

缺失边界

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

错误 代码：

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

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

正确 代码：

Row(
  children: [
    Expanded( // 约束AutoSizeText的宽度为Row的宽度
      child: AutoSizeText(
        'Here is a very long text, which should be resized',
        maxLines: 1,
      )
    ),
  ],
)

更多解释可以在这里找到。如果仍有问题，请打开一个问题。

MinFontSize 太大

AutoSizeText 不会将文本调整到低于 minFontSize，其默认值为 12。这很容易发生，如果你使用 AutoSizeText.rich()：

错误 代码：

AutoSizeText.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 或向 AutoSizeText 添加 style: TextStyle(fontSize: 200)。

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

正确 代码：

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

更多关于Flutter自动调整文本大小插件auto_size_text_pro的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自动调整文本大小插件auto_size_text_pro的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用auto_size_text_pro插件的详细代码示例。auto_size_text_pro是一个用于自动调整文本大小的Flutter插件，非常适合用于响应不同屏幕尺寸和分辨率的场景。

首先，确保你的pubspec.yaml文件中已经包含了auto_size_text_pro的依赖：

dependencies:
  flutter:
    sdk: flutter
  auto_size_text_pro: ^x.y.z  # 请将x.y.z替换为最新的版本号

然后，运行flutter pub get来获取依赖。

接下来，你可以在你的Flutter项目中使用AutoSizeTextPro组件。下面是一个完整的示例，展示了如何在不同的屏幕布局中自动调整文本大小：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AutoSizeTextPro Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AutoSizeTextPro Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text('Default Size Text:'),
            Text(
              'This is a normal text that does not resize.',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            Text('AutoSizeTextPro Example:'),
            AutoSizeTextPro(
              'This text will automatically resize based on the container size.',
              style: TextStyle(fontSize: 24),  // Initial fontSize, will be adjusted
              maxLines: 2,
              minFontSize: 12,
              maxFontSize: 48,
              stepGranularity: 1.0,
            ),
            SizedBox(height: 20),
            Text('AutoSizeTextPro with Constraints:'),
            Container(
              width: 200,
              height: 100,
              color: Colors.grey.withOpacity(0.2),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: AutoSizeTextPro(
                  'This text is inside a constrained container and will resize.',
                  style: TextStyle(fontSize: 24),
                  maxLines: 3,
                  minFontSize: 10,
                  maxFontSize: 32,
                  stepGranularity: 2.0,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 依赖引入：

    • 在pubspec.yaml中添加auto_size_text_pro依赖。

  2. 主应用入口：

    • MyApp类作为应用的入口，包含了一个MaterialApp，其中设置了主题和主页。

  3. 主页：

    • MyHomePage是一个无状态组件，包含一个Scaffold，其中包含一个AppBar和一个Column。
    • Column中包含了几个文本示例，一个是普通文本，另一个是使用AutoSizeTextPro的文本。

  4. AutoSizeTextPro使用：

    • AutoSizeTextPro接受多个参数，如style、maxLines、minFontSize、maxFontSize和stepGranularity。
    • style参数用于设置初始文本样式。
    • maxLines限制文本的最大行数。
    • minFontSize和maxFontSize定义了文本大小的范围。
    • stepGranularity定义了调整文本大小时的步长。

  5. 带有约束的容器：

    • 另一个AutoSizeTextPro示例被放置在一个有固定宽度和高度的Container中，以展示在不同约束条件下的文本大小调整。

通过这个示例，你可以看到如何使用auto_size_text_pro插件来根据容器大小自动调整文本大小，从而提升应用的响应性和用户体验。

回到顶部