如何使文本动态调整自身大小以适应容器 [英] How to make Text dynamically size itself to the container

问题描述

上图未使用FittedBox Widget，此处文字溢出

The above image is without using the FittedBox Widget, here the text overflows

上图是使用FittedBox Widget，这里所有的文字都包含在一行中

The above image is with using the FittedBox Widget, here all the text contained in a single line

Container(
              width: double.infinity,
              height: 100,
              color: Colors.red,
              child: FittedBox(child: Text("hello" * 20))),

如何使 Text Widget 动态调整自身大小以适应可用空间，以便所有文本都可见(没有任何可滚动的小部件)

How to make the Text Widget dynamically size itself to the available space, so that all the text is visible (without any scrollable widget)

推荐答案

有个包叫auto_size_text

用于自动调整文本大小到给定的边界，边界不能是行或列，它们应该用 Expanded 或 Flexible 小部件包裹

which is used to automatically size text to the given bounds, bounds cannot be row or column, they should be wrapped with either Expanded or Flexible widget

AutoSizeText(
  'hello'*20,
  style: TextStyle(fontSize: 60),
  maxLines: 2,
)

你可以给 minFontSize 来调整它到最小的大小，而如果 Widget 不能容纳更多的文本，那么它使用省略号或任何提到的 textOverflow 方法

you can give minFontSize to adjust it to the least size, while if the Widget cannot fit more text then it uses ellipsis or any mentioned textOverflow method

这篇关于如何使文本动态调整自身大小以适应容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！