将 Container 放入 Expanded inside A Row 以垂直扩展以适应 Row 中的可用空间

Question

我有一行包含四个 Expanded 小部件。 它的代码如下所示：

Row(
            children: [
              Expanded(
                child: Container(
                  width: double.infinity,
                  color: Colors.blueGrey,
                  padding: const EdgeInsets.all(10),
                  child: (Text(
                    lessonData.language,
                    style: const TextStyle(
                      color: Colors.white,
                    ),
                  )),
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  width: double.infinity,
                  color: Colors.blueGrey,
                  padding: const EdgeInsets.all(10),
                  child: (Text(
                    lessonData.cEFRLevelName,
                    style: const TextStyle(
                      color: Colors.white,
                    ),
                  )),
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  width: double.infinity,
                  color: Colors.blueGrey,
                  padding: const EdgeInsets.all(10),
                  child: (Text(
                    lessonData.lessonTopic,
                    style: const TextStyle(
                      color: Colors.white,
                    ),
                  )),
                ),
              ),
              Expanded(
                child: Container(
                  width: double.infinity,
                  color: Colors.blueGrey,
                  padding: const EdgeInsets.all(10),
                  child: (
                      Text(
                    lessonData.lessonHeading,
                    style: const TextStyle(
                      color: Colors.white,
                    ),
                  )),
                ),
              )
            ],
          ),

如果 Expanded 小部件内的 Container 中的任何文本被迫换行，则结果显示将不令人满意。 如下图所示：

单击此处显示我的问题的图像，当文本包裹在一个 Container 而不是其他三个 Container 中时。

此图像显示了我希望 Row 看起来像的东西。

我根本无法让包含文本的容器小部件没有任何换行以扩展到行的高度。

在其他候选解决方案中，我尝试将高度设置为 double.infinity 和 double.maxFinite，将容器中的约束设置为约束：BoxConstraints.expand()。 所有这些选项要么什么都不做，要么在热重载时产生错误。

我不愿意尝试 IntrinsicHeight 小部件，因为我被警告说它非常饥饿。

如果您有任何解决方案和/或评论，我将不胜感激！

TIA

海梅

Answer 1

如果我明白你想要什么，我可能会有一个建议。 这更像是一种解决方法，但是您可以将具有彩色背景的Container向上移动一个级别并相互删除Container ，使新的Container成为整个Row的父级：我将代码放在 DartPad 中，这就是它的外观.

只是代码的摘录：

Container(color: Colors.red,child: Row(
            children: [
              Expanded(...),
              Expanded(...),
              //and so on...

这仅适用于审美层面：每个Text仍会调整大小，但您不会注意到。