наследование Constraints Flutter

Question

void main() {
  // Констрейнты экрана : width: double.infinity, height: double.infinity
  runApp(
    // Center наследует констрейнты от экрана и констрейнты становятся равными: width: double.infinity, height: double.infinity
    // То есть Center принмает размеры экрана
    Center(
      child: Container(
        // Container становится 100 на 100. Хотя он должен был унаследовать от Center констрейнты width: double.infinity, height: double.infinity
        // и растянуть его на весь экран 
        // ВОПРОС: почему  Container НЕ наследует "обновленные" констрейнты от Center ? и делает его именно 100 на 100
        color: Colors.orange,
        width: 100,
        height: 100,
      ),
    ),
  );
}

Вопрос такой. почему Center не передает Container-у констрейнты полученные от "экрана" ?

Answer 1

Давайте разберемся по шагам:

Констрейнты от экрана: runApp предоставляет корневому виджету (в данном случае Center) констрейнты, которые обычно соответствуют размеру экрана или доступному пространству. В большинстве случаев это width: double.infinity, height: double.infinity, что означает "занимай всю доступную ширину и высоту".
Center и констрейнты: Center получает эти констрейнты. Его задача - центрировать своего ребёнка в доступном пространстве. Чтобы это сделать, Center не передаёт дочернему виджету те же самые констрейнты, которые получил сам. Вместо этого, Center позволяет дочернему виджету самому выбрать свой размер, в пределах полученных констрейнтов, и затем центрирует его.

Ключевой момент: Center не заставляет дочерний виджет занимать все доступное пространство. Он лишь предлагает ему пространство и центрирует его, независимо от того, какой размер выберет дочерний виджет (в пределах констрейнтов).
Container и констрейнты:
- Если Container не имеет явно заданных width и height, он попытается занять максимально возможное пространство, которое ему позволяют констрейнты от родителя. В этом случае, если бы Center передал Container-у констрейнты width: double.infinity, height: double.infinity, то Container без размеров действительно растянулся бы на весь экран.
- Но! В вашем коде вы явно задаёте width: 100 и height: 100 для Container. Когда Container получает констрейнты от Center, и видит, что у него заданы размеры, он игнорирует большую часть констрейнтов, которые приходят от Center. Container приоритизирует свои собственные размеры, если они заданы.
- Container проверяет, допустимы ли его заданные размеры в рамках полученных констрейнтов. В данном случае, констрейнты от Center (которые, напомню, не обязуют быть бесконечными, а скорее позволяют быть любыми в пределах экрана) позволяют Container-у быть 100x100. Поэтому Container и становится размером 100x100.

Почему Container не растягивается на весь экран, как вы ожидали?

Потому что вы явно указали размер Container-а как 100x100. Container в этом случае ведет себя так, как и должен: он берет заданные размеры, проверяет, что они допустимы в рамках констрейнтов, и использует их.

Вот где можно почитать и посмотреть информацию:

Understanding layout constraints: Это ключевой раздел официальной документации. Он фундаментально объясняет, как работают констрейнты во Flutter. Здесь вы найдете ответы на вопросы:
- Что такое констрейнты (constraints)?
- Как констрейнты передаются от родителя к ребёнку?
- Какие типы констрейнтов существуют (минимальная и максимальная ширина/высота)?
- Как виджеты реагируют на констрейнты?
drawFrame: Этот раздел дает общее понимание процесса рендеринга виджетов во Flutter, включая этапы layout, paint и composition. Понимание общего процесса поможет лучше понять место констрейнтов в этом процессе.
Виджет Container: Изучите документацию Container, обратите внимание на разделы про constraints, width, height и как они взаимодействуют.
Layout widgets: Раздел документации, посвящённый layout-виджетам. Здесь вы найдете описание различных виджетов для управления расположением и размерами, включая Center, Container, Row, Column, Expanded, SizedBox и другие. Понимание различных layout-виджетов поможет вам строить более сложные и гибкие UI.

БЛОГ НА HUSL

наследование Constraints Flutter

Ответы (1 шт):