Учебное пособие по возможностям виджетов Transform во Flutter
Эта статья - пятая из серии статей, посвященных детальному изучению виджетов Flutter. После подробного изучения ListViews, TextFields, FloatingActionButtons и Hero Widgets мы перейдем к виджету Transform во Flutter.
Введение в виджет Transform
Виджет Transform «трансформирует» (т. Е. Меняет форму, размер, положение и ориентацию) свой дочерний виджет перед его рисованием.
Это чрезвычайно полезно для нестандартных форм и многих различных видов анимации во Flutter. Это можно использовать для преобразования любого виджета и искажения его в любую форму, которая нам нравится, или для перемещения его.
Начнем с типов виджетов Transform.
Изучение типов виджета Transform
Виджет Transform предоставляет нам несколько конструкторов, которые помогают упростить создание преобразований. Общие операции, такие как масштабирование, вращение или перемещение, выполняются через конструкторы.
Типы виджетов Transform:
- Преобразование (конструктор по умолчанию)
- Transform.rotate
- Transform.scale
- Transform.translate
Сначала мы рассмотрим конструкторы с одной операцией.
Transform.rotate
Как следует из названия, Transform.rotate просто поворачивает дочерний элемент на угол. Здесь ребенок - квадратный контейнер.
Transform.rotate(
angle: 1.0,
child: Container(
height: 200.0,
width: 200.0,
color: Colors.pink,
),
),
Параметр angle позволяет нам установить угол (в радианах), на который будет повернут дочерний элемент.
Виджет также позволяет нам указать источник для поворота нашего виджета. Мы указываем происхождение с помощью параметра origin. Это требует смещения. Смещение отмечает расстояние от исходной точки по отношению к центру самого дочернего элемента.
Однако, когда нам не нужно явно устанавливать смещение, дочерний элемент вращается вокруг своего собственного центра.
Я сделал анимацию, чтобы лучше понять, где находится центр вращения.
Если повернуть ребенка от правой нижней точки квадрата, это будет выглядеть так.
Код для вышеуказанной ротации:
Transform.rotate(
angle: 1.0,
origin: Offset(50.0, 50.0),
child: Container(
height: 100.0,
width: 100.0,
color: Colors.blue,
),
),
Квадрат имеет стороны 100,0. Этот код вращает контейнер вокруг правой нижней вершины квадрата. Поскольку смещение составляет 50,0 вправо и 50,0 ниже, центр дочернего элемента определяется смещением (50,0,50,0)
Transform.scale
Конструктор масштабирования масштабирует дочерний элемент по заданному параметру scale.
Transform.scale(
scale: 0.5,
child: Container(
height: 200.0,
width: 200.0,
color: Colors.yellow,
),
),
Здесь мы устанавливаем масштаб на 0,5, чтобы уменьшить размер контейнера вдвое.
Подобно преобразованию поворота, мы также можем установить начало координат при масштабировании.
Когда начало координат оставлено пустым, используется центр виджета. При масштабировании изменения на каждой стороне точно такие же.
Как и в предыдущем примере, давайте теперь установим начало координат в правом нижнем углу. Если мы сейчас перезагрузим наше приложение, виджет будет масштабироваться иначе, чем по умолчанию (в центре).
Это достигается путем предоставления источника (50.0,50.0). Это смещение соответствует правому нижнему углу.
Transform.scale(
scale: 0.5,
origin: Offset(50.0, 50.0),
child: Container(
height: 100.0,
width: 100.0,
color: Colors.blue,
),
),
Transform.translate
Transform.translate переводит дочерний элемент виджета преобразования на указанную величину в направлениях X и Y. Мы предоставляем смещение, которое имеет величину, на которую мы хотим переместить ребенка в направлениях X и Y.
Transform.translate(
offset: Offset(100.0, 0.0),
child: Container(
height: 100.0,
width: 100.0,
color: Colors.yellow,
),
),
Здесь мы предоставляем смещение, которое перемещает контейнер на 100.0 в направлении X. Любое изменение второго параметра сдвинет его в направлении Y.
Мы не можем указать происхождение в переводе, поскольку на перевод не влияет происхождение. Поскольку мы даем смещение, а не координаты, исходная точка не имеет значения.
Преобразование (конструктор по умолчанию)
В отличие от других конструкторов в списке, конструктор по умолчанию позволяет нам выполнять несколько операций одновременно. Это самый мощный конструктор из списка.
Вместо использования определенного параметра, такого как угол или масштаб, этот конструктор принимает 4D-матрицу непосредственно в параметре transform. Это позволяет нам выполнять несколько операций.
Пример этого:
Transform(
transform: Matrix4.skewY(0.3)..rotateZ(3.14 / 12.0),
origin: Offset(50.0, 50.0),
child: Container(
height: 100.0,
width: 100.0,
color: Colors.blue,
),
),
Приведенный выше код дает нам наклон вокруг оси Y на 0,3 и поворот на π / 12 радиан вокруг оси Z.
Наклон - это, по сути, наклон ребенка в одном направлении, при этом стороны должны быть параллельны.
перекос
skewX
Matrix4 также позволяет нам устанавливать поворот и перевод.
Мы используем Matrix4 .rotationX (), rotationY () и rotationZ () для поворота и Matrix4 .translation () или Matrix4 .translationValues () для перевода.
Мы также можем установить начало координат в этом конструкторе, используя параметр origin, как мы это делали в первых двух конструкторах.
Теперь давайте применим бессмысленные преобразования к обычным виджетам Flutter.
«Хорошо, Флаттер, сделай бочку»
Очень большой FAB
Почему-то это выглядит лучше обычного FloatingActionButton.
Вот и все для этой статьи! Надеюсь, вам понравилось, и оставлю пару аплодисментов, если понравилось. Следуйте за мной, чтобы увидеть больше статей о Flutter и комментировать любые отзывы об этой статье.
Не стесняйтесь проверять и другие мои профили и статьи:
