LOUIS VUITTON как интерфейс

В этой статье мы собираемся создать горизонтальную прокрутку списка, аналогичную мобильному приложению LOUIS VUITTON.

Окончательное приложение работает следующим образом:

Видеоурок

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

Вид страницы

PageView — это виджет, который генерирует прокручиваемые страницы экрана. Страницы могут быть фиксированными или повторяющимися страницами, созданными функцией компоновщика.

PageView ведет себя как ListView при построении элементов. PageView также позволяет пользователю переходить между разными экранами в приложении Flutter.

Конструкторы класса PageView

PageView({Key key, 
Axis scrollDirection, 
bool reverse, 
PageController controller, 
ScrollPhysics physics, 
bool pageSnapping, 
void Function(int) onPageChanged, 
List<Widget> children, 
DragStartBehavior dragStartBehavior, 
bool allowImplicitScrolling})

Свойства виджета PageView:

  • scrollDirection: определяет, по какой оси прокручивается страница, т. е. по вертикали или по горизонтали.
  • reverse: определяет направление прокрутки. По умолчанию установлено значение false.
  • controller: Это позволяет нам управлять тем, какая страница видна в PageView.
  • physics: определяет, как страница анимируется в конечной точке страницы, когда ее нельзя перетащить.
  • pageSnapping: Это полезно для пользовательского поведения прокрутки. Он принимает логическое значение.
  • onPageChanged: Это функция, которая срабатывает при изменении страницы.
  • children: Содержит список виджетов.
  • dragStartBehaviour: это свойство содержит DragStartBehavior enum (final) в качестве объекта. Он управляет тем, как будет регистрироваться поведение перетаскивания.
  • allowImplicitScrolling: это свойство принимает логическое значение в качестве объекта. Он определяет, выделять ли неявную прокрутку на страницу виджета.

PageView.builder

PageView.builder создает прокручиваемый список, который работает страница за страницей, используя виджеты, которые создаются по запросу.

Этот конструктор подходит для просмотра страниц с большим (или бесконечным) числом дочерних элементов, поскольку построитель вызывается только для тех дочерних элементов, которые действительно видны.

Предоставление ненулевого itemCount позволяет PageView вычислить максимальную степень прокрутки.

Свойства виджета PageView.builder

Он содержит все свойства PageView, но имеет некоторые собственные свойства.

  • itemBuilder: Будет вызываться только с индексами больше или равными нулю и меньше itemcount.
  • restoralionID: restorationID принимает строку в качестве объекта. Он используется для сохранения позиции прокрутки и последующего ее восстановления.
  • clipBehaviour: Контент будет обрезан (или нет) в соответствии с этой опцией.
  • padEnds: Добавлять ли отступы к обоим концам списка.

Куча

Стек — это встроенный виджет Flutter SDK, который позволяет пользователям размещать виджеты друг над другом, создавая слои виджетов. Первый виджет — это элемент bottommost, а lastwidget — элемент topmost.

Некоторые из ключевых моментов виджетов Stack:

  • Дочерний элемент в стеке может быть позиционирован или непозиционирован.
  • Позиционированные дочерние элементы — это те, которые заключены в виджет Positioned, который имеет хотя бы одно ненулевое свойство.
  • Размер стека сам по себе содержит все непозиционированные дочерние элементы, которые расположены в соответствии с выравниванием (которое по умолчанию находится в верхнем левом углу в средах с письмом слева направо и в правом верхнем углу в средах с письмом справа налево). ).
  • Затем позиционированные дочерние элементы размещаются относительно стека в соответствии с их свойствами сверху, справа, снизу и слева.
  • Атрибут выравнивания можно использовать для изменения выравнивания виджетов.

Давайте копать

Сначала мы создаем данные, которые будем использовать в нашем приложении.

Создайте папку dummy_data.dartвнутри папки lib. Здесь мы размещаем массив элементов.

dummy_data.dart:

Данные готовы, теперь давайте создадим виджеты, которые будут элементом просмотра страницы. Создайте папку page_view_item.dartвнутри папки lib.

page_view_item.dart

Двигаясь вперед, мы создаем наш файл homepage.dart:

Во-первых, мы настраиваем представление нашей страницы и создаем PageController, где мы предоставляем viewportFraction.

final _controller = PageController(    viewportFraction: 0.5,  );

ViewPortFraction

Он определяет долю области просмотра, которую должна занимать каждая страница. По умолчанию 1.0, что означает, что каждая страница заполняет область просмотра в направлении прокрутки.

Когда наш контроллер установлен, мы вычисляем ширину отдельных элементов страницы.

late final _itemWidth =MediaQuery.of(context).size.width * _controller.viewportFraction;

А затем мы инициализируем контроллер внутри файла initState.

@override  void initState() {    
super.initState();
_controller.addListener(() => setState(() {          
_page = _controller.page!;        
}));  }

Вот как будет выглядеть наш файл homepage.dart.

homepage.dart:

Давайте подключимся

Мы можем быть друзьями. Найдите на Facebook, Linkedin, Github, Youtube, BuyMeACoffee и Instagram.

Посещение: Flatter Junction

Добавить:КупиКофе

Заключение

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



GitHub — nbnD/lvscroll
Новый проект Flutter. Этот проект является отправной точкой для приложения Flutter. Несколько ресурсов для начала…github.com



Want to Connect?
Find me on Facebook, Linkedin, Github, Instagram.