auto_size_text

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

img

特拉维斯 编解码器 版本 GitHub 许可证

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

展示一些 ❤️ 并为 repo 加注星标以支持该项目

资源:

还可以查看速度极快的键值存储hive

img

内容

用法

AutoSizeText行为与Text. 唯一的区别是它会调整文本大小以适应其边界。

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

注意: AutoSizeText需要有界约束来调整文本大小。更多信息在这里

最大行数

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

img

您可以同步多个AutoSizeText. 他们将符合他们的界限,并且AutoSizeText同一组中的所有人都具有相同的大小。这意味着他们将字体大小调整为具有最小有效字体大小的组成员。

**注意:**如果 aAutoSizeText由于诸如 之类的限制而无法调整minFontSize,则它不会与其他组成员具有相同的大小。

的实例AutoSizeGroup代表一个组。将此实例传递给AutoSizeText您要添加到该组的所有人。如果不再需要该组,则不必关心处置该组。

**重要提示:**请不要传递AutoSizeGroup每个构建的新实例。换句话说,将AutoSizeGroup实例保存在StatefulWidget.

var myGroup = AutoSizeGroup();

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

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

img

步骤粒度

AutoSizeText会尝试每个字体的大小,开始TextStyle.fontSize直至其边界内的文本适合。 stepGranularity指定每一步减少多少字体大小。通常,该值不应低于1最佳性能。

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

img

预设字体大小

如果您只想允许特定的字体大小,您可以使用presetFontSizes. 如果presetFontSizes设置,minFontSizemaxFontSizestepGranularity将被忽略。

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

img

溢出替换

如果文本溢出并且不符合其边界,则会显示此小部件。这对于防止文本太小而无法阅读很有用。

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

img

富文本

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

你必须要知道的唯一的事情是字体大小的计算工作原理如下:fontSizestyle 参数AutoSizeText(或继承fontSize,如果没有设置)作为参考。

例如:

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

文本将至少是其原始大小的 1/4 (5 / 20 = 1/4)。 但这并不意味着所有的TextSpans 都至少有 font size 5

img

关于flutter - 时间轴 View ,日 View ,周 View ,月 View 并添加事件日历 flutter 库

***最佳答案*https://pub.dev/packages/flutter_week_view(如果有人要查看一天/一周的 View ),或者了解如何自己构建 View 。