颤振 |扩展 FittedBox 内的 auto_size_text

Posted 2023-02-23

【中文标题】颤振 |扩展 FittedBox 内的 auto_size_text

【英文标题】：Flutter | auto_size_text inside of Expanded FittedBox

【发布时间】：2021-11-20 10:25:06

【问题描述】：

免责声明：

我对 Flutter 很陌生，这是我正在创建的第一个个人项目。所有其他项目都只是非常简短的教程。我遇到的问题（如下所述）似乎很容易解决，但由于我是新手，请尽可能详细地解释它，能够可视化您所说的内容也有帮助（通过代码、图表等） .谢谢。

问题：

无法让auto_size_text maxLines 正常工作。最重要的是，无法让MaxFontSize 工作。

进一步说明

我正在使用auto_size_text package，设置了pubspec.yaml 依赖项：auto_size_text: ^2.1.0 和import: 'package:auto_size_text/auto_size_text.dart'。我还将pubspec.yaml 环境从sdk: ">=2.12.0 <3.0.0" 更改为sdk: ">=2.11.0 <3.0.0"，以允许非空安全包工作 - 按照this tutorial 的方向。

我正在我的应用程序内部创建一个容器，该容器内部是一个 Column 小部件，Column 小部件内部是几行。这些行之一用作标题。它的代码如下：

Row( // Row is inside of a Column which is inside of a Container
                children: [
                  const SizedBox(width: 55), // Used to create padding either side of text
                  Expanded(
                    child: FittedBox(
                        child: AutoSizeText(
                          '70 | Brighton  - Abbotsford and Green Island', // Header Example
                          maxLines: 2, // Cannot get this to work, always remains one line
                          maxFontSize: 20, // Does not work, always resizes to max font in order to fill whole FittedBox
                          style: TextStyle(
                            fontSize: 20, // Unsure if I need this, adding or removing seems to have to effect.
                            color: color.AppColor.textMain.withOpacity(0.8), 
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  const SizedBox(width: 55), // Used to create padding either side of text
                ],
              ),

使用此代码，我得到 this result - 请注意，蓝线是标题上方的另一行，但仍在同一个 Column 小部件内。

期望的结果：

字体太小了，所以我想把它分成两行。我正在设计这个容器以供重复使用，稍后我将对其进行更改，以便从 CSV 文件中导入文本，因此名称长度会有所不同。它们都需要可读，虽然对于较小的标题（example）来说很好，但较大的标题需要有更大的字体，同时仍然适合相同的边界，所以需要两行。如前所述，我无法让maxFontSize 工作，导致较短的标题具有太大的字体。

尝试的解决方案：

我已经厌倦了使用 auto_size_text 的空安全版本，但无法让它工作（因为它是一个预发布版本，我认为它不能正常工作）。

【参考方案1】：

已解决

在玩弄我在原始问题中发布的代码时，我几乎意外地解决了自己的问题。

解决方案：

虽然不是最方便，但解决方案是将Expanded 小部件和FittedBox 替换为SizedBox。以下是调整后的代码，包括有关所做更改的 cmets。

               Row( // Row is inside of a Column which is inside of a Container
                children: [
                  const SizedBox(width: 55), // Used to create padding either side of text
                  SizedBox( // Changed the Expanded and FittedBox to a sized box with a width of 280, source container has a width of 390, so text is allowed a width of 280 once you subtract the width 55 SizedBox's either side
                    width: 280,
                      child: AutoSizeText(
                        '70 | Brighton  - Abbotsford and Green Island', // Header Example
                        maxLines: 2, // Cannot get this to work, always remains one line
                        maxFontSize: 20, // Does not work, always resizes to max font in order to fill whole FittedBox
                        style: TextStyle(
                          fontSize: 20, // Unsure if I need this, adding or removing seems to have to effect.
                          color: color.AppColor.textMain.withOpacity(0.8),
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  const SizedBox(width: 55), // Used to create padding either side of text
                ],
              ),

谢谢

【参考方案2】：

我有另一个不使用auto_size_text 包的解决方案

SizedBox(
    child: TextField(
        controller: _yourController,
        decoration: InputDecoration(
            border: InputBorder.none,
            contentPadding: EdgeInsets.all(8),
        ),
        textInputAction: TextInputAction.done,
        keyboardType: TextInputType.multiline,
        maxLines: null,
    ),
),

keyboardType: TextInputType.multiline 使TextField 可以自动调整大小并在达到最大宽度时移动到新行，并且

maxLines: null让你的文字可以写多行，然后

decoration 在这里我用来删除TextField 框边框

【讨论】：

这不是我想要的，标题不会是用户输入。标题将来自我已经加载到应用程序中的 CSV 文件（通过我的资产文件夹）。我已经这样做了，因为如果 CSV 被更新，我可能需要快速复制我的容器和另一个新标题。我将把我发布的代码转换成一个小部件，所以这是可以实现的。目前它的目的只是让我弄清楚如何制作它，以便所有标题都适合并且可读，这意味着有些必须占用两行。