Как сделать гибким только распределение пустого места в столбце?

У меня колонка с 2 детьми. Первый дочерний элемент имеет фиксированную высоту, а второй дочерний элемент имеет динамическое содержимое.

Двое детей

Я хочу, чтобы первый дочерний элемент был во главе экрана, а второй ребенок был посередине по вертикали.

Итак, я добавил пустой третий дочерний элемент и сделал первый и третий дочерние элементы гибкими, чтобы они одинаково разделяли вертикальное пространство:

Column(
  children: [
    Flexible(
      child: Column(
        children: [_firstChild()],
      ),
    ),
    _secondChild(),
    Flexible(child: Container()),
  ],
)

Это работает, когда содержимое второго дочернего элемента короткое.

Малая секунда

Но если второй ребенок вырастает, он подрезает первого ребенка:

Высокая секунда

Разве Flexible не должен распределять только пустое пространство, когда fit: FlexFit.loose? Я попробовал обе fit возможности. Я пытался поместить первого ребенка в SizedBox и Align

Я пытался сделать третьего ребенка Spacer. Пока ничего не помогло. Пустой третий дочерний элемент занимает половину оставшегося вертикального пространства.

РЕДАКТИРОВАТЬ:

Когда высота второго дочернего элемента слишком велика, чтобы сделать его вертикально центрированным без обрезки первого дочернего элемента, я хочу, чтобы он просто вел себя как Column по умолчанию с MainAxisAlignment.start (как первое изображение)


person alokraop    schedule 09.12.2020    source источник
comment
Что вы хотите во втором случае? Center и Stack вам подходят?   -  person ch271828n    schedule 09.12.2020
comment
О, если использовать Stack и Center, второй дочерний элемент будет перекрывать первого ребенка. Если второй ребенок слишком высокий, я хочу, чтобы он просто сидел под первым ребенком. Ему больше не нужно быть в центре.   -  person alokraop    schedule 09.12.2020
comment
По сути, я хочу, чтобы второй дочерний элемент был вертикальным центром, если есть место, а если нет, я хочу, чтобы он находился непосредственно под первым дочерним элементом.   -  person alokraop    schedule 09.12.2020
comment
тогда посмотри на мой ответ   -  person ch271828n    schedule 09.12.2020


Ответы (1)


Как насчет этого:

Stack(children:[
  Center(child: SecondChild()),
  Align(alignment: Alignment.topCenter, child: FirstChild()),
])
person ch271828n    schedule 09.12.2020
comment
Эй, вот что я ответил в комментарии. Если SecondChild() станет слишком высоким, он будет перекрывать FirstChild(). Я хочу, чтобы SecondChild() вел себя как первое изображение, если оно слишком высокое. Это то, на что я надеялся с двумя блоками Flexible. - person alokraop; 09.12.2020
comment
@alokraop ответ отредактирован (поменяйте порядок местами). это нормально? - person ch271828n; 09.12.2020
comment
Теперь FirstChild() будет перекрывать SecondChild(). Я не хочу, чтобы какой-либо контент перекрывался. Если SecondChild() слишком высок, чтобы быть в центре вертикальной оси, я хочу, чтобы он находился под первым дочерним элементом. Со стеком этого не добиться. - person alokraop; 09.12.2020
comment
@alokraop запутался ... не могли бы вы дать несколько пояснений или скриншотов того, что вы хотите - person ch271828n; 10.12.2020