如何在Flutter中动态调整文本大小？

Question

我从API中检索一段文本.我想为它分配一定量的空间(比如一个宽度为300.0且高度为100.0的最大容器).有时,这段文本适合此容器,字体大小为30.0.在其他时候,除非我将文本大小设置为24.0,否则它将不适合.

有没有办法根据其父容器空间动态调整文本大小？

我已经构建了一个带有ConstrainedBox的Container,它允许我定义文本空间的最大大小.我还用LayoutBuilder包装了我的Text.我希望我可以检查文本空间的高度,并在此基础上确定如何调整文本大小.像这样:

    Container(
      child: ConstrainedBox(
        constraints: BoxConstraints(
          minWidth: 300.0,
          maxWidth: 300.0,
          minHeight: 30.0,
          maxHeight: 100.0,
        ),
        child: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
          if (/* height is larger than 100.0? height is over the constraints? */) { return textWithSize24(); }
          return textWithSize30();
        }),
      ),
    ),

如何确定"文本大小为30.0时文本占用的高度"？也许我正在接近这个错误的方式而我应该maxLines用来确定这个呢？但是我们怎么知道我们达到了更多maxLines？

另一种方法是使用我的String中的字符数来确定何时更改字体大小.这似乎是一种手册.

Answer 1

使用 BoxFit.scaleDown 并修复FontSize您可以调整字体的最大大小。

如果内容较小，则占用指定字体大小的最小宽度。同时，如果内容很大，则将其调整为最小的字体大小。

FittedBox(
                      fit: BoxFit.scaleDown,
                      child: 
                          Text(
                            "Text here",
                            style: TextStyle(fontSize: 18),
                          ),)

如果您需要文本填充整个宽度，请使用任何字体大小使用BoxFit.cover

FittedBox(
                      fit: BoxFit.cover,
                      child: 
                          Text(
                            "Text here",
                            //style: TextStyle(fontSize: 18),
                          ),)

Answer 2

您可以用来FittedBox根据高度或宽度来管理文本。

对于前

只需将您的Text窗口小FittedBox部件包装为窗口小部件即可，在这里，我想根据宽度调整AppBar文本的大小。

 AppBar(
    centerTitle: true,
    title: FittedBox(fit:BoxFit.fitWidth, 
    child: Text('Hey this is my long text appbar title')
    ),
  ),

文字将根据AppBar的宽度进行调整。

Answer 3

你可以使用auto_size_text包来完成它:

Container(
  child: ConstrainedBox(
    constraints: BoxConstraints(
      minWidth: 300.0,
      maxWidth: 300.0,
      minHeight: 30.0,
      maxHeight: 100.0,
    ),
    child: AutoSizeText(
      "yourText",
      style: TextStyle(fontSize: 30.0),
    ),
  ),
);

您还可以设置maxLines为进一步约束文本,或者presetFontSizes如果您只想允许特定字体大小则使用.

Answer 4

我这样使用它并且效果很好：

Flexible(
  child: FittedBox(
    fit: BoxFit.contain,
    child: AutoSizeText(
      'your specific text',
      maxLines: 1,
      style: TextStyle(),
    ),
  ),
),

除了使用auto_size_text之外，这为我们提供了灵活性，并确保我们的子窗口小部件位于内部并按预期运行（包含） 。

Answer 5

FittedBox 在我的案例中使用多行。

SizedBox(
            width: MediaQuery.of(context).size.width,
            child: FittedBox(
              fit: BoxFit.contain,
              child: Text(
                widget.model.poem,
                textAlign: TextAlign.justify,
                style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.w600,
                    fontStyle: FontStyle.normal),
              ),
            ),
          ),

Answer 6

以下是我尝试过的可能对您有用的列表，具体取决于您的用例：https : //github.com/flutter/flutter/issues/18431

最终我使用了一个基于字符串长度设置字体大小的函数（即使用 if-else 语句）。

Answer 7

Responsive_Flutter，自从阅读您的问题以来，我遇到了同样的问题。我发现每次使用这个包来调整字体大小时它都有效。

此 Flutter 包用于在不同大小的设备上缩放应用程序 UI 和 fontSize 的大小。（该示例显示了使用 Responsive_Flutter 包的顶部文本和没有插件的底部文本。

https://github.com/layounisl/responsive_flutter

您可以在 30 秒内安装 - 3 个步骤

1. 向 yaml 文件“responsive_flutter: ^0.0.4”添加依赖项
2. 导入 'package:responsive_flutter/responsive_flutter.dart';
3. child: Text("响应式颤振", style: TextStyle(fontSize: ResponsiveFlutter.of(context).fontSize(3)),

Answer 8

我找到了一种在不使用插件的情况下缩小文本最大字体大小的解决方案：

Expanded(
  child: FittedBox(
    fit: BoxFit.scaleDown,
    child: Text('${widget.article.price * chosenQuantity} DH',
      style: const TextStyle(fontSize: 25 , fontWeight: FontWeight.w700),
    ),
  ),
),

正常状态： fontSize 为 25 的正常文本

如果文本较大： 文本会缩小，因为没有更多空间