如何使文本动态调整自身大小以适应容器答案

【问题标题】：How to make Text dynamically size itself to the container如何使文本动态调整自身大小以适应容器
【发布时间】：2021-09-09 10:38:26
【问题描述】：

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

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

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

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

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

auto_size_text 你可以使用这个插件。 minFont, maxlines 可以在这个小部件中设置。这是一个示例代码sn -p;

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

【讨论】：

【解决方案2】：

有一个包叫auto_size_text

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

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

您可以给minFontSize 将其调整为最小尺寸，而如果小部件无法容纳更多文本，则它使用省略号或任何提到的textOverflow 方法

【讨论】：

【解决方案3】：

您无需任何额外的依赖即可实现这一目标，只需在 Container 内使用所需宽度的 FittedBox

          Container(
            alignment: Alignment.centerLeft,
            width: 120,
            padding: EdgeInsets.only(left: 15),
            child: FittedBox(
              fit: BoxFit.scaleDown,
              child: Text(
                "here is the long text to be scaled down",
                textAlign: TextAlign.start,
              ),
            ),
          ),

或者，您可以在 Container 内使用所需宽度的 Flexible，这将使要包装的文本根据需要变为多行

          Container(
            alignment: Alignment.centerLeft,
            width: 120,
            padding: EdgeInsets.only(left: 15),
            child: Flexible(
              child: Text(
                "here is the long text to be wrapped to be multiline as needed",
                textAlign: TextAlign.center,
              ),
            ),
          ),

【讨论】：