Annual Open Tech Conference - ISsoft Insights 2021. June 19. Learn more.
×Закрыть

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

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті.

Приветствую читателей и фанатов 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

👍НравитсяПонравилось0
В избранноеВ избранном1
Подписаться на тему «Flutter»
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 и ее ботоферме.

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