dart - 与最高 child 一样高并允许其他 child CrossAxisAlignment.stretch 的行

Question

我想在 Flutter 中创建一个 Row，它的最高子元素的高度最大。然后其他较小的 child 应该在可用空间中拉伸(stretch)。

我尝试在 Row 上使用 CrossAxisAlignment.stretch 和 MainAxisSize.min:

    Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(child: Text("1")),
        Container(child: SizedBox(height: 200))
      ]);

在这种情况下，带有 Text 的 Container 应该拉伸(stretch)到与带有 SizedBox Container 一样高.

但是这会导致运行时异常:

flutter: The following RenderObject was being processed when the exception was fired:
flutter:   RenderFlex#93aae relayoutBoundary=up5 NEEDS-LAYOUT NEEDS-PAINT
flutter:   creator: Row ← Column ← Column ← Padding ← Expanded ← Row ← Builder ← MediaQuery ←
flutter:   LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← ⋯
flutter:   parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
flutter:   constraints: BoxConstraints(0.0<=w<=174.3, 0.0<=h<=Infinity)
flutter:   size: MISSING
flutter:   direction: horizontal
flutter:   mainAxisAlignment: spaceBetween
flutter:   mainAxisSize: min
flutter:   crossAxisAlignment: stretch
flutter:   textDirection: ltr
flutter:   verticalDirection: down
flutter: This RenderObject had the following descendants (showing up to depth 5):
flutter:   RenderDecoratedBox#2c670 NEEDS-LAYOUT NEEDS-PAINT
flutter:     RenderPadding#94471 NEEDS-LAYOUT NEEDS-PAINT
flutter:       RenderPositionedBox#38d50 NEEDS-LAYOUT NEEDS-PAINT
flutter:         RenderFlex#c2d46 NEEDS-LAYOUT NEEDS-PAINT
flutter:           RenderPadding#e6dc8 NEEDS-LAYOUT NEEDS-PAINT
flutter:           RenderParagraph#d7b38 NEEDS-LAYOUT NEEDS-PAINT
flutter:   RenderConstrainedBox#a7e45 NEEDS-LAYOUT NEEDS-PAINT
flutter:   RenderDecoratedBox#31487 NEEDS-LAYOUT NEEDS-PAINT
flutter:     RenderPadding#0cf57 NEEDS-LAYOUT NEEDS-PAINT
flutter:       RenderPositionedBox#df396 NEEDS-LAYOUT NEEDS-PAINT
flutter:         RenderParagraph#868d2 NEEDS-LAYOUT NEEDS-PAINT

如果我是对的，那么这个异常告诉我 Row 正试图扩展到无穷大，因为它不受约束。在 SizedBox(height: x) 小部件中包装 Row 时，我没有遇到异常，但这不是我想要实现的。

是否有一些小部件或技巧可以帮助我解决问题？

Answer 1

考虑显示一个未知大小不同的红色和黄色容器的行:

Row(
  children: <Widget>[
    red,
    yellow,
  ],
),

要达到预期的结果，您需要做两件事:

• CrossAxisAlignment.strectch。这要求所有 child 采用相同的高度 - 并使行垂直填充其父级
• 将 Row 包装到 IntrinsicHeight 小部件中。此小部件强制其子项采用尽可能少的高度。

最终结果是:

IntrinsicHeight(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      red,
      yellow,
    ],
  ),
)