Flat fold ear cup что это
Правила компоновки во Flutter, которые должен знать каждый
Не надо так делать
Сначала объясните, что Flutter компоновка очень отличается от HTML компоновки (особенно, если говорите с веб-разработчиком), а затем скажите, что необходимо запомнить следующее правило:
Ограничения для виджетов объявляются в родителях. Размеры (желаемые) задаются в самом виджете. Позиция виджета на экране устанавливается родителем
На мой взгляд, это правило нужно изучить, как можно раньше, так как без него по-настоящему понять компоновку во Flutter нельзя.
Например, виджет, похожий на столбец с некоторыми отступами, хочет расположить два дочерних элемента: 
Виджет: Родитель, каковы мои ограничения?
Родитель: Ты должен быть от 90 до 300 пикселей в ширину и от 30 до 85 в высоту.
Виджет: Хм, так как я хочу иметь 5 пикселей отступа, то мои дети могут иметь не более 290 пикселей ширины и 75 пикселей высоты.
Виджет: Первый ребенок, вы должны быть от 0 до 290 пикселей в ширину и от 0 до 75 в высоту.
Первый ребенок: Хорошо, тогда я хочу быть 290 пикселей в ширину и 20 пикселей в высоту.
Виджет: Хм, поскольку я хочу поместить своего второго ребенка ниже первого, это оставляет только 55 пикселей высоты для моего второго ребенка.
Виджет: Эй, второй ребенок, ты должен быть от 0 до 290 в ширину и от 0 до 55 в высоту.
Второй ребенок: Хорошо, я хочу быть 140 пикселей в ширину и 30 пикселей в высоту.
Виджет: Родитель, я решил, что мой размер будет 300 пикселей в ширину и 60 пикселей в высоту.
Ограничения
В результате вышеописанного правила механизм компоновки Flutter имеет несколько важных ограничений:
Примеры
Чтобы посмотреть, как работают примеры, можно:
Пример 1
Итак, Container полностью заполняет видимую область, и та становится красной.
Примечание переводчика. У автора говорится, что «screen» определяет ограничения, но самом деле родителем виджета-примера является
Примечание к примечанию. Если проверять приведенные примеры следующим образом
то поведение соответствуют описанному автором.
Пример 2
Красный Container хочет быть 100 × 100, но он не может, потому что «экран» приводит его к своим размерам.
Таким образом, Container заполняет экран.
Пример 3
Пример 4
Пример 5
Пример 6
Пример 7
Красный Container говорит своему дочернему виджету, что тот может быть любого размера, но не больше «экрана».
Пример 8
Размер красного Container будет соответствовать размеру своих детей, но в этот раз необходимо учесть собственные отступы (padding). Так что итоговый размер красного Container будет 30 × 30 плюс отступы. Благодаря отступам красный цвет будет виден, а зеленый Container будет того же размера, что и в предыдущем примере.
Пример 9
Вы могли бы предположить, что размер Container должен быть от 70 до 150 пикселей, но это не так. ConstrainedBox только накладывает дополнительные ограничения к тем, что она получила от своего родителя.
В данном случае «экран» приводит ConstrainedBox к своему размеру, поэтому дочерний Container также будет получит размеры «экрана», игнорируя полученные ограничения.
Пример 10
Пример 11
Пример 12
Пример 13
«Экран» приводит UnconstrainedBox к своему размеру. Как бы то ни было, UnconstrainedBox позволяет дочернему Container быть желаемого размера, в данном случае 20 × 50.
Пример 14
«Экран» приводит UnconstrainedBox к своему размеру. Как бы то ни было, UnconstrainedBox позволяет дочернему Container быть желаемого размера (4000 × 50).
Пример 15
«Экран» приводит OverflowBox к своему размеру. Как бы то ни было, OverflowBox позволяет дочернему Container быть желаемого размера (4000 × 50).
Пример 16
На экране ничего не отобразистя, и вы получите ошибку в консоли.
UnconstrainedBox позволяет своему ребенку иметь любой размер, который он хочет, однако, у его дочернего виджета Container ширина бесконечна ( width: double.infinity ).
Пример 17
Пример 18
«Экран» приводит FittedBox к своему размеру. Text будет иметь некоторую естественную ширину (также называемую его intrinsic width), которая зависит от количества текста, его размера шрифта и т.д.
Пример 19
Пример 20
Пример 21
Пример 22
Пример 23
«Экран» приводит Row к своему размеру.
Пример 24
Пример 25
Когда у Row дочерний элемент обернут в Expanded виджет, то Row больше не позволяет этому дочернему элементу определять свою ширину.
Вместо этого он будет определять ширину Expanded в соответствии с другими дочерними элементами, и затем Expanded приводит ширину исходного дочернего элемента к своей.
Пример 26
Пример 27
Пример 28
«Экран» приводит Scaffold к своему размеру. Так что Scaffold заполняет весь «экран».
Примечание: когда виджет сообщает своему дочернему элементу, что он может быть меньше определенного размера, мы говорим, что виджет предоставляет «loose» (пер. свободные) ограничения своему дочернему элементу. Но об этом чуть позже.
Пример 29
Примечание: когда виджет сообщает своему дочернему элементу, что он должен иметь определенный размер, мы говорим, что виджет предоставляет «tight» (пер. жесткие) ограничения своему дочернему элементу.
Tight × Loose ограничения
Очень часто можно услышать, что некоторые ограничения являются «tight» или «loose», поэтому стоит знать, что это значит.
tight ограничение предполагает только точный размер. Другими словами, tight ограничение определяет свою максимальную ширину, равную его минимальной ширине, и определяет свою максимальную высоту, равную его минимальной высоте.
loose ограничение, с другой стороны, устанавливает максимальную ширину/высоту, но позволяет виджету быть таким маленьким, каким он хочет. Другими словами, loose ограничение определяет минимальную ширину/высоту равной нулю:
Если вы вернетесь к Примеру 3, то увидите, что Center позволяет красному Container быть меньше, но не больше «экрана». Center делает так, передавая loose ограничения контейнеру. В конечном счете, сама цель центра Center в том, чтобы преобразовать tight ограничения, которые он получил от своего родителя («экрана»), в loose ограничения для своего потомка ( Container ).
Изучение правил компоновки для конкретных виджетов
Знание общего правила компоновки необходимо, но его недостаточно.
Каждый виджет имеет большую свободу в рамках общего правила, поэтому нет никакого способа узнать, что будет делать виджет, просто прочитав его имя.
Если вы попытаетесь угадать, то, скорее всего, ошибетесь. Вы не можете точно знать, как будет вести себя виджет, если не прочитали его документацию или не изучили исходный код.
Исходный код обычно сложен, поэтому, вероятно, лучше просто прочитать документацию. Однако, если вы решили изучить код, то его легко найти, используя навигационные возможности ваших IDE.
Спасибо Simon Lightfoot за помощь в написании данной статьи.
Пакеты для компоновки за моим авторством
Еще мои Flutter пакеты
Обо мне
PS Всю критику, вопросы и предложения по переводу буду рад услышать в (личных) сообщениях.
PSS Ещё раз ссылка на оригинальную статью Flutter: The Advanced Layout Rule Even Beginners Must Know от Marcelo Glasberg