颤振 | auto_size_text Expanded FittedBox 内部

Flutter | auto_size_text inside of Expanded FittedBox

免责声明:

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

问题:

无法使 auto_size_text maxLines 正常工作。除此之外,无法 MaxFontSize 工作。

进一步说明

我正在使用auto_size_text package, setup with the pubspec.yaml dependency: auto_size_text: ^2.1.0 and import: 'package:auto_size_text/auto_size_text.dart'. I also changed my pubspec.yaml environment from sdk: ">=2.12.0 <3.0.0" to sdk: ">=2.11.0 <3.0.0" to allow non null safe packages to work - as per direction of 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 - 请注意,蓝线是标题上方的另一行,但仍在同一列小部件内。

期望的结果:

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

尝试的解决方案:

我已经厌倦了使用 auto_size_text 的 null 安全版本,但无法使其正常工作(因为它是预发行版,我认为它无法正常运行)。

我有另一个不使用 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 框边框

已解决

我在玩我在原始问题中发布的代码时几乎是偶然地解决了我自己的问题。

解决方案:

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

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

谢谢