Почему ListView в Flutter не применяет высоту?

Question

У меня есть простой код:

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 60.0,),
        color: Color(0xFF24323F),
        child: Container(
          color: Colors.green,
          margin: EdgeInsets.symmetric(vertical: 10.0),
          height: 200.0,
        ),
      ),
    );
  }
}

Я пытаюсь изменить высоту контейнера, но он не работает.Почему?

Результат рендера:

Answer 1

Основано на ответе @ rémi-rousselet (за который вы действительно должны ответить):

Вам нужно указать флаттеру, как выровнять элементы, если они меньшеих родитель.В противном случае Flutter обычно заставляет их заполнять пространство

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

return Align(alignment: Alignment.topCenter,
  child: Directionality(
    textDirection: TextDirection.ltr,
    child: Container(
      padding: EdgeInsets.symmetric(
        vertical: 60.0,
      ),
      color: Colors.blue,
      child: Container(
        color: Colors.green,
        margin: EdgeInsets.symmetric(vertical: 10.0),
        height: 200.0,
      ),
    ),
  ),
);

Это уменьшит весь ваш виджет до размера, который вы определили, как 200,0 + 60,0 (заполнение) + 60,0 (заполнение).

Однако,если вы хотите, чтобы внутренний (зеленый) контейнер имел высоту 200, а голубоватый - полноэкранный, вы можете адаптировать ответ к чему-то вроде этого (не стесняйтесь изменять директиву Alignemt в соответствии с вашими потребностями):

return Directionality(
  textDirection: TextDirection.ltr,
  child: Container(
    padding: EdgeInsets.symmetric(
      vertical: 60.0,
    ),
    color: Colors.blue,
    child: Align(alignment: Alignment.topCenter,
      child: Container(
        color: Colors.green,
        margin: EdgeInsets.symmetric(vertical: 10.0),
        height: 200.0,
      ),
    ),
  ),
);

Answer 2

Вы должны указать флаттеру, как выровнять элементы, если они меньше, чем их родитель.В противном случае Flutter обычно заставляет их заполнять пространство

. В этом случае упаковка вашего Directionality в Align должна помочь