Строка, которая является самой высокой дочерней и позволяет другим дочерним элементам CrossAxisAlignment.stretch - PullRequest
Новая
       20

Строка, которая является самой высокой дочерней и позволяет другим дочерним элементам CrossAxisAlignment.stretch

0 голосов
/ 16 марта 2019

Я хочу создать 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) виджет, однако это не то, чего я хочу достичь.

Есть ли какой-нибудь виджет или трюк, которые могли бы помочь мне решить мою проблему?

1 Ответ

1 голос
/ 16 марта 2019

Рассмотрим строку, которая отображает красный и желтый контейнер неизвестного и другого размера: 

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

enter image description here

Для достижения желаемого результата вам понадобятся две вещи:

  • CrossAxisAlignment.strectch. При этом все дети должны взять одну и ту же высоту - и заставить строку вертикально заполнить своего родителя
  • Оберните Row в IntrinsicHeight виджет. Этот виджет заставляет своего ребенка брать минимально возможную высоту.

Конечный результат: 

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

enter image description here

...