Блог

Главная - Вопросы по программированию - размер контейнера flutter расширение родительской области

размер контейнера flutter расширение родительской области

#flutter

#flutter

Вопрос:

У меня вопрос, почему размер синего контейнера расширит всю область (размер не работает). Спасибо

     return Scaffold(
  body: Container(
    color: Colors.green,
    width: 256,
    height: 174,
    child: Container(
      height: 50,
      width: 50,
      color: Colors.blue,
    ),
  ),
);

Комментарии:

1. используйте alignment: во внешнем Container — или нет … лучше прочитайте Понимание ограничений — в первых абзацах говорится: «Когда кто-то, изучающий Flutter, спрашивает вас, почему какой-то виджет с шириной 100 не имеет ширины 100 пикселей, ответ по умолчанию — сказать им поместить этот виджет в центр, верно? Не делайте этого. Если вы это сделаете, они будут возвращаться снова и снова, спрашивая, почему какой-то FittedBox не работает, почему этот столбец переполнен или что должна делать IntrinsicWidth . Вместо этого…»

Ответ №1:

Из документов:

Поскольку контейнер объединяет ряд других виджетов, каждый со своим собственным поведением макета, поведение макета контейнера несколько сложнее.

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

(…)

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

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

Попробуйте это:

 return Scaffold(
  body: Container(
    color: Colors.green,
    width: 256,
    height: 174,
    alignment: Alignment.topLeft,
    child: Container(
      height: 50,
      width: 50,
      color: Colors.blue,
    ),
  ),
);