Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 30
×

Flutter-разработка. Зачем я использую Slivers

Усі статті, обговорення, новини про Mobile — в одному місці. Підписуйтеся на телеграм-канал!

Приветствую читателей и фанатов Flutter. Сегодня мы поговорим о узкоспециализированной теме, а точнее о Slivers. Обычно, чтобы добиться scroll effect на нашем дисплее, большинство разработчиков могут легко воспользоваться преимуществами SingleChildScrollView, который отлично выполнит эту работу. Но если вы ищете более глубокие знания и хотите улучшить свои способности в scrolling, в таком случае Slivers — это то, что вам нужно!

Итак. Что такое Slivers?

Sliver — это часть прокручиваемой области. Используя Slivers, мы можем легко создавать множество фантастических результатов для реализации собственных эффектов прокрутки. По сути, все scrolling виджеты, такие как ListView или GridView, фактически реализованы с помощью Slivers.

Slivers очень полезны, если вам нужно разместить различные виды виджетов внутри прокручиваемой области. Например, ListView, за которым следует GridView. Если мы хотим чтобы они прокручивались как одно целое, они должны быть определены с помощью специального Sliver виджета, который нужно разместить внутри CustomScrollView. Flutter предоставляет большое количество видов Slivers для реализации наших идей. В этой и следующих статьях мы увидим, какие типы нам доступны, и как их использовать в различных случаях. А также узнаем о некоторых типичных ошибках, с которыми вы можете столкнуться.

Начнем мы с одного из основных видов slivers — это SliverAppBar. Так же, как и другие slivers, SliversAppBar прокручивается вместе с остальным контентом, однако он остается привязанным к верхней части экрана. Как и обычный AppBar, вы можете использовать его для отображения виджетов типа title, action и leading.

Вдобавок у данного типа Sliver есть некоторые интересные параметры, такие как flexibleSpace и expandedHeight. Используя их вместе, вы можете создать более крупный заголовок на фоне интересующего вас виджета, который сжимается при прокручивании вниз, как стандартный AppBar.

Если вы хотите, чтобы SliverAppBar был закреплен вверху при прокрутке,тогда параметр pinned — это то, что вам нужно!

Float более гибкое свойство. Мы используем его, когда хотим, чтобы appBar стал видимым как только мы прокручиваем вверх.

Кстати, распространенная ошибка, которую делают некоторые разработчики — это помещать AppBar в CustomScrollView, а не SliverAppBar. Сообщение об ошибке подскажет нам, что мы не можем использовать стандартные виджеты к аналогу Slivers.

Далее мы рассмотрим SliverPersistentHeader. Этот sliver используется под

капотом SliverAppBar для реализации вашего собственного эффекта сжатия и роста.

Выполнение своего собственного SliverPersistentHeader работает путем его объявления, который в свою очередь имеет закрепленные и плавающие эффекты, аналогичные как у SliverAppBar.

Для начала вам нужно реализовать SliverPersistentHeaderDelegate , который является регулированным классом. После его объявления , вам нужно переопределить несколько свойств, включая minExtent и maxExtent. Вдобавок вам нужен специальный метод build, который предоставит вам дополнительные аргументы,благодаря которым можно контролировать ваш пользовательский интерфейс в зависимости от того, какая часть Slivers была уменьшена. Например, в моем случае я использую стек для размещения двух разных виджетов.

Первый виджет — это фоновое изображение, второй — текст, который располагается внизу заголовка SliverPersistentHeader.

Я могу контролировать прозрачность текста в зависимости от функции titlleOpacity. Теперь, когда я прокручиваю вниз, мой текст медленно исчезает, и здесь я вычисляю прозрачность заголовка на основе shrinkOffset и maxExtent ленты, но вы можете использовать shrinkOffset другими занимательными способами.

Вместе с тем, когда вы реализуете SliverPersisentHeaderDelegate, вам также необходимо переопределить переменные shouldRebuild и snapConfiguration. К месту, это одно из нередких ошибок , которые разработчики совершают!

Поэтому я рекомендую вам прочитать документацию для SliverPersisentHeaderDelegate, чтобы узнать обо всех свойствах и о том, как их использовать.

Таким образом, вы можете использовать SliverAppBar в качестве альтернативы стандартному AppBar при работе с Slivers, а если вам нужен расширенный контроль, вы можете использовать SliverPersisentHeaderDelegate. Итак, в следующих статьях я расскажу о дополнительных Slivers.

Source code: bitbucket.org/...​Timoshenko/my_slivers.git

👍ПодобаєтьсяСподобалось1
До обраногоВ обраному1
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

*хлопают все дружно компании AppVesto и ее ботоферме.

Підписатись на коментарі