Размеры необходимы в любом приложении (динамическая компоновка виджетов и т. д.…). В то время как в наших разработках мы упустили эту возможность, чтобы справиться с развертыванием продукта до того, как наступит крайний срок. Это портит весь наш код. Итак, вот еще одна наводящая на размышления статья. Мне пришлось много исследовать эту выделенную тему, но я не смог найти разумного объяснения соотношения сторон, поэтому я решил записать свое собственное. Давайте начнем!
Я работаю в этой области около 2,5 лет и не могу понять важность этого встроенного виджета во Flutter. Давайте перейдем к разделу контента и прольем на него свет.
Оглавление
Демистифицированное объяснение
Выполнение
- Демистифицированное объяснение + Реализация
Активатор, который допускает определенный размер соотношения сторон своего дочернего элемента.
Это структура AspectRatio:
AspectRatio( aspectRatio -> double child -> Widget key -> Key )
Здесь свойство «aspectRatio» обязательно в форме «ширина: высота»
— — -OR — — -
«ширина/высота». Поскольку алгоритм Flutter умен и выполняет вычисления в указанном выше формате.
Перед использованием этого виджета необходимо учесть два важных фактора:
1- Если макет или максимальная ширина бесконечны по своей природе, то начальная ширина определяется в соответствии с предоставленным значением высоты.
Для расчета ширины используется следующая формула:
maximum height / aspectRatio’s height value x aspectRatio’s width
Допустим, максимальная высота – 75 , а соотношение сторон – 16:9, тогда:
75 / 9 * 16 => Width: 133.3
Давайте разберемся с этим через фрагмент
return Container( alignment: Alignment.center, color: Colors.blue, width: double.infinity, height: 100.0, child: Container( color: Colors.green, ), ),
Обертывание второго контейнера с помощью AspectRatio приведет к:
return Container(
color: Colors.blue,
alignment: Alignment.center,
width: double.infinity,
height: 100.0,
child: AspectRatio(
aspectRatio: 16 / 9,
child: Container(
color: Colors.green,
),
),
);
2- Если макет или максимальная ширина конечны, то начальная высота будет определяться в соответствии с предоставленным значением ширины аспектаRatio.
Давайте разберемся с этим через фрагмент
return Container( alignment: Alignment.center, color: Colors.blue, width: 100.0, height: 100.0, child: Container( color: Colors.green, ), ),
Обертывание второго контейнера с помощью AspectRatio приведет к:
return Container(
color: Colors.blue,
alignment: Alignment.center,
width: 100.0,
height: 100.0,
child: AspectRatio(
aspectRatio: 2:0,
child: Container(
width: 100.0,
height: 50.0,
color: Colors.green,
),
),
);
Примечание. Здесь изменение значения высоты дочернего элемента ни к чему не приведет, оно определяется значением соотношения – Ширина.
Изменив значение AspectRatio:
aspectRatio: 2:0 -> 3:0
Источник: это лучший пример, который я нашел в официальном документе.
Вот, эта статья подходит к своему завершению.
👏 И не забывайте подписываться на меня.
Дайте мне знать, если я что-то упустил, а также я открыт для новых предложений с вашей стороны. Я хотел бы услышать от вас.
Проверьте мои ручки в социальных сетях:
