与最高子项一样高的行，并允许其他子项为CrossAxisAlignment.stretch

Question

我想在Flutter中创建一个Row，它的最大高度是其最高的孩子。其他较小的孩子应该在可用空间内伸展。

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

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

在这种情况下，Container与Text应该伸展，直到它与Container和SizedBox一样高。

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

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正在尝试扩展到无穷大，因为它没有受到限制。将Row包装在SizedBox(height: x)小部件中时，我没有异常，但这不是我想要实现的。

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

Answer 1

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

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

要达到预期的效果，您需要两件事：

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

最终结果是：

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