layout - 在Flutter中，如何使用FittedBox调整行内文本的大小？

Question

我有一行，每边都有一个图标，然后是中间有一个图标的文本:

@override
Widget build(BuildContext context) {
  return Row(
    children: [
      Icon(Icons.arrow_back),
      Expanded(child: SizedBox()),
      Icon(Icons.account_box),
      Text("Some Text Here ", maxLines: 1), // ➜ This is the text.
      Expanded(child: SizedBox()),
      Icon(Icons.arrow_forward),
    ],
  );
}

当文本变得足够大以填满整个空间时，我希望 FittedBox 变小。所以我尝试了这个:

      FittedBox(child: Text("Some Text Here. More. More. More. More. More. More. More. More. ", maxLines: 1)), 

它不起作用(溢出)。我认为问题是 Row 没有告诉 FittedBox 它可能拥有的最大尺寸。我考虑过将 FittedBox 与 Expanded、IntrinsicWidth、UnconstrainedBox、Flexible 和对齐，无济于事。

我该如何解决这个问题？

更新:我写了一篇可以帮助我解决这个问题的文章:https://medium.com/flutter-community/flutter-the-advanced-layout-rule-even-beginners-must-know-edc9516d1a2

Answer 1

据我了解，您需要根据文本长度将文本放入行内。

工作代码:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Icon(Icons.arrow_back),
    Expanded(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(Icons.account_box),
          Flexible(
            child: FittedBox(
              fit: BoxFit.scaleDown,
              child: Text(
                "  Text HereSome Text Here Text HereSomext HereSome TText HereSome Text HereSome Text HereSome Text HereSome Text HereSome TText HereSome Text HereSome Text HereSome",
                maxLines: 1,
              ),
            ),
          )
        ],
      ),
    ),
    Icon(Icons.arrow_forward),
  ],
);

输出，长文本:

输出，短文本: