连续使用兄弟姐妹留下的空间 - MediaQuery.of(): context is null答案

【问题标题】：Using space left by siblings in a row - MediaQuery.of(): context is null连续使用兄弟姐妹留下的空间 - MediaQuery.of(): context is null
【发布时间】：2021-01-31 16:22:00
【问题描述】：

我正在尝试在row 中安排两个text。第二个文本只有几个字，但第一个可以很长。我的目标是完全显示第二个文本，并用第一个填充剩余空间。如果第一个小部件太宽，我想用省略号截断它。

预期布局：

我的代码是

class MyHomePage extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    GlobalKey key = GlobalKey();
    return Row(
      children: [
        Container(
            child: Text("Really really really long long long teeeeext",
                maxLines: 1,
                overflow: TextOverflow.ellipsis),
                width: MediaQuery.of(context).size.width - MediaQuery.of(key.currentContext).size.width),
        Text("short text", key: key)
      ],
    );

  }
}

The following assertion was thrown building MyHomePage(dirty, dependencies: [MediaQuery]): I/flutter (28083): 'package:flutter/src/widgets/media_query.dart': Failed assertion: line 810 pos 12: 'context != I/flutter (28083): null': is not true. 失败我猜是因为 Flutter 引擎还没有开始渲染“短文本”小部件，所以目前它的大小是未知的。

任何帮助将不胜感激。

【问题讨论】：

标签： flutter text layout row ellipsis

【解决方案1】：

如果您尝试像Text _secondText=Text("short text") 这样初始化您的第二个文本小部件会怎样？所以当你使用你的第一个小部件时，Flutter 应该已经知道它的内容。你可以试试看。

【讨论】：

不幸的是，我遇到了同样的错误（代码：hastebin.com/vumerusicu.js）。
所以，您可以尝试另一种解决方案：使用 Row Widget 的属性textDirection: TextDirection.rtl，它将小部件从右到左反转。因此，在您的代码中首先呈现短文本小部件，然后作为第二个孩子，您可以呈现长文本。像这样：pastebin.com/VipWYv7D
相同的错误信息 :(（并且 rtl 方向导致第二个小部件先行）
我想出了这个解决方案。只需使用 Flexible 小部件包装您的 Container，然后维护 Row 属性 rtl 以让您的第二个文本出现在第一个之前。并去掉Container的width和overflow属性。这是我使用和为我工作的：hastebin.com/donuraqamo.js

【解决方案2】：

MediaQuery.of(context).size 在构建阶段不可用。在构建小部件时，尚未计算大小。

但是您不需要MediaQuery.of(context).size 来实现布局。相反，您可以简单地用Expanded 换行左边的文本。然后它将占用所有剩余空间（总宽度减去右侧文本宽度）。

Row(
  children: [
    Expanded(
      child: Text(
        "Really really really long long long teeeeext 123 123 123 123 123 123 123 123",
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      ),
    ),
    Text(
      "short text",
    ),
  ],
)

结果：

【讨论】：