Пример приложения, демонстрирующего виджет PageView
С очень растущей популярностью Flutter вы найдете все больше и больше блогов, средних статей и видео на YouTube о том, как использовать постоянно растущее количество виджетов Flutter. При этом я изменил свои усилия и теперь пишу больше статей о реализации этих виджетов, при этом, возможно, ссылаюсь на любые статьи и / или видео по этой теме.
Я имею в виду, зачем повторять то, что уже было сказано? Они уже описали множество параметров виджета и способы их использования, поэтому мои статьи теперь будут в основном включать в себя «заглядывать под капот», описывая, как эти многие параметры применяются, что даст вам более глубокое представление о внутренней работе виджета. . Мы надеемся, что эти статьи только помогут вам стать более опытным разработчиком Flutter.
Сегодня я выбрал виджет PageView и, конечно же, быстро нашел несколько фантастических статей и видео на YouTube о нем. Фактически, я решил написать две статьи о виджете PageView. Как и было обещано, будет статья, иллюстрирующая, как значения параметров PageView в конечном итоге применяются для представления его предполагаемой функции, однако в этой первой статье фактически будут представлены те статьи и видео, которые я нашел о виджете PageView, в форме моего собственного примера приложения. Тот, который я написал и представлю вам здесь.
С разрешения каждого из первоначальных авторов я взял сам пример кода из этих статей и видео и объединил их в одно приложение. Это приложение позволяет пользователю легко изменять настройки параметров виджета PageView, чтобы увидеть результаты в работающем приложении. Собственно в данном случае в двух рабочих приложениях. Те, что я нашел на YouTube.
Тензор и Йоханнес
Я слежу за этими двумя джентльменами почти с самого начала. Их видеопродукция на высшем уровне. Я определенно рекомендую вам подписаться на них. В произвольном порядке у вас есть одно видео с канала тензорного программирования, а другое с собственного канала Йоханнеса Милке на YouTube.
Я взял соответствующие примеры приложений из этих двух и поместил их в одно приложение под названием pageview_example. Что касается статей, я бы рекомендовал (опять же, без определенного порядка) статьи Сурагча и Девена Джоши.
Мне нравятся скриншоты. Нажмите «Подписи к спискам».
Как всегда, я предпочитаю использовать в своих статьях скриншоты, а не суть, чтобы показать концепции, а не просто показать код. Откровенно говоря, я считаю, что с ними легче работать. Тем не менее, вы можете щелкнуть или коснуться их подписей, чтобы увидеть код в сущности или в Github. Коснитесь или щелкните сами снимки экрана, чтобы увеличить их.
Никаких движущихся изображений, никаких социальных сетей
В этой статье будут файлы gif, демонстрирующие аспекты рассматриваемой темы. Однако при чтении этой статьи на таких платформах, как Instagram, Facebook и т. Д., Просмотр таких файлов gif невозможен. Они могут выглядеть как статические изображения или просто пустые заполнители. Помните об этом и, возможно, прочтите эту статью на medium.com.
Давайте начнем.
Я бы посоветовал сначала прочитать и посмотреть упомянутый выше материал. Они не занимают много времени и, как я уже сказал, очень информативны. Я приглашаю вас затем загрузить пример приложения, в котором используется большая часть описанного примера кода, и опробовать множество настроек в панели приложений. Я подозреваю, что тогда вы узнаете все, что вам нужно знать о виджете PageView.
Почти все настройки, показанные в приложении, представлены ниже в порядке списка параметров виджета. Вы легко увидите, какие варианты вам доступны, и есть надежда, что это поможет вам определить, подойдет ли PageView для вашего следующего приложения.
Горизонтальный или вертикальный
Порядок вещей
Нажмите в обратном порядке, и вы увидите, что страницы теперь расположены в обратном порядке.
Управление страницей
Вы можете контролировать, какая страница будет отображаться первой, а также их фактическую ширину.
Прикладная физика
Как страницы перемещаются и что происходит при достижении конца или начала.
Щелкать или нет
Если установлено значение false, страницы могут легко пройти и не встать на место одним движением.
С каждой новой страницей
Функцию обратного вызова можно вызывать с каждой новой страницей.
Как это происходит
Ближе к концу своей статьи Девен Джоши представляет несколько замечательных примеров переходов, которые вы могли бы реализовать для своих собственных просмотров страниц. Таким образом, перелистывание страницы на страницу отображается графически и дает некоторые интересные эффекты. Скачайте pageview_example и попробуйте сами.
Итак, поехали. Виджет PageView Flutter имеет очень приятный интерфейс. По этому виджету уже есть отличная документация. Мы надеемся, что объединение некоторых из них вместе с примером приложения еще больше убедит вас в его полезности.
TL;DR
Опять же, я был так впечатлен статьями и видео, уже посвященными виджету PageView, что не было смысла перефразировать тему. Вместо этого я решил написать небольшое приложение, чтобы продемонстрировать их собственные работы. В оставшейся части статьи будет рассказано, что было сделано, чтобы быстро это сделать. Я не хотел, чтобы при демонстрации этих других приложений производил большой объем работ, поэтому были сделаны некоторые ярлыки, которые я хотел бы отметить. Я писал код, честно говоря, я бы не стал писать в своем производственном коде.
Например, виджет PageView, используемый в моем небольшом примере приложения, был ключевым в отражении настроек, отображаемых в виджете Drawer моего приложения, для примеров приложений Johannes и Tensor, в которые инкапсулируется мое приложение. На скриншотах ниже выделены виджеты PageView Йоханнеса и Tensor. Как оказалось, они оба использовали конструктор «builder» из класса PageView. Однако хитрость здесь в том, что на самом деле это не класс PageView. Это одноименный подкласс! Ура !!
Опять же, просто чтобы запустить его, я просто создал подкласс StatelessWidget, PageView, и переопределил все его поля. Теперь, конечно, это можно делать, но это, конечно, не поощряется. Отмена поля или «затенение переменных» может привести к неожиданному поведению и путанице. Это просто дурной тон. Не говоря уже о том, чтобы переопределить установленный основной класс Flutter и присвоить ему одно и то же имя! В довершение всего, как вы можете видеть на скриншоте ниже, я наследую неизменяемый класс только для того, чтобы ввести изменяемые свойства. Во Flutter такой подход только снижает производительность. Это просто не лучшая практика. Итак, это случай: «Делай, как я говорю, а не как я». Однако выполнение всего этого позволило мне быстро объединить два отдельных приложения с общим классом «PageView».
В этой плохой «версии PageView» закрытая функция _setPageView вызывается в ее конструкторе. Именно в этой функции проверяются все статические поля, найденные в классе Drawer, PageViewDrawer. Если одно из этих статических полей не является нулевым, его значение присваивается собственному переопределенному полю PageView. В противном случае сохраняется исходное значение поля. Ага, быстро и грязно.
Пакет set_state использовался для быстрой ссылки на первый объект State, _MyAppState.. Это сделано для обновления ящика, когда пользователь нажимает на один из его переключателей или ползунков. Класс SetState также используется для обновления PageView любого запущенного в данный момент примера приложения с новыми настройками.
Конечно, именно в первом объекте State, _MyAppState, представлен Drawer, PageViewDrawer. Опять же, в качестве сокращения, я просто написал подкласс класса Drawer и переопределил его «дочернее» поле. Он заполнен статическими полями, которые отражают поля класса PageView, поэтому вы можете легко отключить настройки и посмотреть, что PageView может сделать для вас. Уродливо, но привет! Со щитом или на щите! Правильно? Опять же, я испортил неизменный класс. Не рекомендуется.
Переключатели и ползунки, соответствующие свойствам PageView, берутся из частных функций _switchFunc () и _sliderFunc (). Увидеть ниже.
Я скажу, что класс RadioButton, который я написал во время этого процесса, оказался полезным. Скорее всего, я буду использовать его в своих собственных приложениях. Ну, по крайней мере, это что-то.
Каков ваш источник?
Обратите внимание: все файлы с одним и тем же именем source.dart рассказывают о структуре каталогов приложения. На скриншоте ниже вы можете увидеть эти файлы, выделенные слева. Я называю такие файлы файлами экспорта, и, как это происходит в этом конкретном примере приложения, они разрешают каждому классу доступ ко всем другим классам, находящимся в файлах библиотеки Dart в каталоге приложения, src. Этот подход сродни подходу Google к организации пакетов библиотеки Dart. Благодаря этому вы обнаружите, что многие файлы библиотеки Dart находятся в каталоге src, в котором есть только один единственный оператор import:
import 'package:pageview_example/src/source.dart';
Источник для всех
Для дальнейшего пояснения на снимке экрана ниже показан файл source.dart, выделенный выше под директором с именем greg. Как видите, он просто «экспортирует» оставшиеся файлы библиотеки Dart, расположенные в этом каталоге.
Это верно для файла source.dart, находящегося в каталоге johannes. Каждый файл Dart, находящийся в каталоге johannes (даже в подкаталогах), просто перечисляется в этом единственном «исходном» файле. Идея в том, что эти «файлы экспорта», в свою очередь, упоминаются в другом файле экспорта. Этот файл также называется source.dart (может быть, лучше с другим, более отчетливым именем) и находится в верхнем каталоге src. Именно этот файл затем импортируется в определенные файлы Dart, требующие, конечно же, доступа к соответствующему коду.
Источник всего сущего
Как вы видите ниже с левой стороны, файл библиотеки Dart также называется source.dart и находится в каталоге src и содержит два других «исходных» файла. . Пример приложения Tensor состоял только из одного файла, main.dart, поэтому в «исходном» файле для этого приложения не было необходимости. Однако его единственный файл, конечно, экспортируется сюда, как и весь другой исходный код, необходимый для запуска этого приложения, включая собственный фреймворк Flutter и любые сторонние пакеты Dart. Обратите внимание, что собственный класс фреймворка Flutter, PageView, скрыт здесь, потому что должна использоваться моя собственная версия.
Такой порядок упрощает работу последующих разработчиков, которым, например, придется поддерживать такие приложения, как это. Какой исходный код следует использовать, все в сжатом виде можно найти в одном месте. Кроме того, во многих случаях допускается использование одного оператора импорта.
В ожидании второй статьи с акцентом на то, как фреймворк Flutter на самом деле реализует множество именованных параметров этого виджета, вот отрывок из того, что вы можете увидеть.
Прикладная физика
Когда вы используете PageView и проводите пальцем до конца / начала списка, появляется визуальный эффект, выделяющий событие. Такие визуальные эффекты являются частью того, что определяется как «физика прокрутки» виджета. «Физика», определенная для виджета PageView, берется из класса PageScrollPhysics.
Другими словами, если вы явно не передаете объект Scrolling Physics с использованием именованного параметра, Physics (см. Ниже) при создании экземпляра виджета PageView, по умолчанию используется класс PageScrollPhysics. с его характерной чертой - «защелкивание» страниц на месте при каждом новом смахивании. Фактически, в следующей статье я объясню, что это всегда будет эта черта, если для параметра pageSnapping не установлено значение False.
Обратите внимание, что на приведенном ниже снимке экрана явно отключен эффект «привязки страницы», но в следующей статье я покажу «под капотом», что, поскольку мы затем явно передаем объект «PageScrollPhysics», у нас все еще будет происходит много щелчков. Увидимся позже.
Ваше здоровье.
Следите за сообществом Flutter в Twitter: https://www.twitter.com/FlutterComm
