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

Question

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

预期布局：

我的密码是

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 引擎还没有开始渲染“短文本”小部件，所以它的大小暂时未知。

我们将不胜感激。

Answer 1

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

Answer 2

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

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

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

结果：

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

Using space left by siblings in a row - MediaQuery.of(): context is null

layout

text

row

ellipsis

flutter