Как работает раскладка во Flutter
Вопрос
Объясните, как Flutter раскладывает виджеты, и разберите ошибку ListView внутри Column.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Ограничения вниз, размеры вверх, позицию задаёт родитель
Tight, loose и unbounded ограничения
`Row`/`Column`: сначала дети без flex, затем `Expanded`/`Flexible` делят остаток
`ListView` в `Column` получает бесконечную высоту: `Expanded`, фиксированная высота или слайверы
`shrinkWrap` убирает ошибку, но строит всех детей
Что могут спросить следом
- Почему
Container(width: 100)иногда игнорирует ширину? - Как отлаживать ошибки раскладки?
Разбор
Образцовый ответ: «Раскладка идёт за один проход: родитель передаёт ребёнку ограничения, минимальные и максимальные ширину и высоту, ребёнок выбирает размер в этих пределах и возвращает его, а родитель решает позицию. Ограничения бывают жёсткие, когда размер задан, свободные, когда можно быть меньше, и неограниченные. Column сначала даёт детям без flex неограниченную высоту, а остаток делит между Expanded. Отсюда ошибка: ListView хочет занять всю доступную высоту, а она бесконечна. Правильное решение обычно Expanded вокруг списка, тогда он получит конкретный остаток. shrinkWrap тоже убирает ошибку, но заставляет построить все элементы. Если на экране несколько прокручиваемых частей, использую CustomScrollView со слайверами. Для отладки смотрю Layout Explorer в DevTools»
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.