Третье простое в использовании колесо Flutter — супер-карусель Swiper

предисловие

Flutter — это платформа мобильного пользовательского интерфейса Google для быстрого создания высококачественных нативных пользовательских интерфейсов на iOS и Android.

Знаменитый Николас Гольбао в ИТ-индустрии однажды сказал: Колесо — это лестница ИТ-прогресса! Популярные фреймворки такие же, простые в использовании колеса, чтобы выбрать один из тысячи! В качестве кроссплатформенной среды разработки, появившейся за последние два года, сторонняя экосистема Flutter немного меньше, чем другие зрелые среды, но количество колес уже велико. В этой серии статей выбираются и делятся колесами, которые обычно используются в повседневной разработке приложений, чтобы повысить эффективность перемещения кирпичиков для всех.В то же время я надеюсь, что экология флаттера будет становиться все более и более совершенной, и будет все больше и больше больше колес.

В этой серии статей подготовлено более 50 рекомендаций по колесам, причины работы, и постарайтесь публиковать статью каждые 1-2 дня.

совет: эта серия статей подходит для разработчиков, у которых уже есть основы флаттера.Чтобы начать, нажмите:официальный сайт флаттера

текст

рулевое колесо

Название колеса: flutter_swiper
Обзор колеса: самый мощный siwiper Flutter, несколько методов компоновки, бесконечная карусель, двусторонняя адаптация для Android и IOS.
Колесо Автор: JZoom
Рекомендуемый индекс: ★★★★★
Общий индекс: ★★★★★
Предварительный просмотр эффекта:

Установить

dependencies:
  flutter_swiper: ^1.1.6

import 'package:flutter_swiper/flutter_swiper.dart';

Функциональный маршрут

1.x.x реализация функции:

карусель с бесконечным циклом
кнопка управления
индикатор пагинации
режим без бесконечного цикла
модульный тест
пример
направление прокрутки
Настраиваемые кнопки управления
Настраиваемая нумерация страниц
Автовоспроизведение
контроллер
Внешний индикатор пагинации
Дополнительные параметры макета

Введение в использование

Создайте элемент управления каруселью с помощью widget => new Swiper() и используйте разные свойства для соответствия различным эффектам: Предположим, есть набор картинок:

List<String> imgs=[
    'http://xxxx/img1.jpg',
    'http://xxxx/img2.jpg',
    'http://xxxx/img3.jpg',
    'http://xxxx/img4.jpg'
];

Эффект по умолчанию

Container(
    height: 250,
    child: new Swiper(
        itemBuilder: (BuildContext context,int index){
            return new Image.network(imgs[index],fit: BoxFit.cover,);
        },
        itemCount: imgs.length,
        pagination: new SwiperPagination(),//如果不填则不显示指示点
        control: new SwiperControl(),//如果不填则不显示左右按钮
    ),
),

Прокрутка 3D-карты

Container(
    height: 250,
    child: new Swiper(
        itemBuilder: (BuildContext context, int index) {
            return new Image.network(imgs[index],fit: BoxFit.cover,);
        },
        itemCount: imgs.length,
        viewportFraction: 0.8,
        scale: 0.9,
    ),
),

Неограниченное количество карт

Container(
    height: 300,
    child: new Swiper(
        itemBuilder: (BuildContext context, int index) {
            return new Image.network(imgs[index],fit: BoxFit.cover,);
        },
        itemCount: imgs.length,
        itemWidth: 300.0,
        layout: SwiperLayout.STACK,
    ),
),

Неограниченная стопка карт 2

Container(
    height: 300,
    child: new Swiper(
        itemBuilder: (BuildContext context, int index) {
            return new Image.network(imgs[index],fit: BoxFit.cover,);
        },
        itemCount: imgs.length,
        itemWidth: 300.0,
        itemHeight: 300.0,
        layout: SwiperLayout.TINDER,
    ),
),

Пользовательские эффекты

Container(
    height: 200,
    child: new Swiper(
    layout: SwiperLayout.CUSTOM,
    customLayoutOption: new CustomLayoutOption(
        startIndex: -1,
        stateCount: 3
    ).addRotate([
        -45.0/180,
        0.0,
        45.0/180
    ]).addTranslate([
        new Offset(-370.0, -40.0),
        new Offset(0.0, 0.0),
        new Offset(370.0, -40.0)
    ]),
    itemWidth: 300.0,
    itemHeight: 200.0,
    itemBuilder: (context, index) {
        return new Image.network(imgs[index],fit: BoxFit.cover,);
    },
    itemCount: imgs.length),
)

Построить

Основные параметры

параметр	По умолчанию	описывать
scrollDirection	Axis.horizontal	Направление прокрутки, установите Axis.vertical, если требуется вертикальная прокрутка.
loop	true	Бесконечный переключатель режима карусели
index	0	Начальная позиция нижнего индекса
autoplay	false	Переключатель автозапуска.
onIndexChanged	void onIndexChanged(int index)	Вызывается, когда пользователь вручную перетаскивает или автоматически воспроизводит, что приводит к изменению нижнего индекса.
onTap	void onTap(int index)	Вызывается, когда пользователь нажимает на карусель
duration	300.0	Время анимации в миллисекундах
pagination	null	настраивать`new SwiperPagination()`Показать индикатор пагинации по умолчанию
control	null	настраивать`new SwiperControl()`Показать кнопки пагинации по умолчанию

индикатор пагинации

Индикатор пагинации унаследован отSwiperPlugin,SwiperPluginдляSwiperПредоставляет дополнительный интерфейс.new SwiperPagination()Показать пагинацию по умолчанию.

параметр	По умолчанию	описывать
alignment	Alignment.bottomCenter	Если вы хотите поместить индикатор пейджинга в другое место, вы можете изменить этот параметр.
margin	const EdgeInsets.all(10.0)	Расстояние между индикатором пагинации и границей контейнера
builder	SwiperPagination.dots	В настоящее время определены два стиля индикатора разбиения на страницы по умолчанию:`SwiperPagination.dots`,`SwiperPagination.fraction`, могут быть дополнительно настроены.

Если вам нужно настроить свой собственный индикатор подкачки, вы можете написать его так:

new Swiper(
    ...,
    pagination:new SwiperCustomPagination(
        builder:(BuildContext context, SwiperPluginConfig config){
            return new YourOwnPaginatipon();
        }
    )
);

кнопка управления

Компонент кнопки управления также унаследован отSwiperPlugin,настраиватьnew SwiperControl()Отображает кнопки управления по умолчанию.

параметр	По умолчанию	описывать
iconPrevious	Icons.arrow_back_ios	IconData на предыдущей странице
iconNext	Icons.arrow_forward_ios	IconData на следующей странице
color	Theme.of(context).primaryColor	цвет кнопки управления
size	30.0	размер кнопки управления
padding	const EdgeInsets.all(5.0)	Расстояние между кнопкой управления и контейнером

Контроллер (SwiperController)

SwiperControllerдля управления Swiperindexсвойства, останавливать и запускать автовоспроизведение.new SwiperController()Создайте экземпляр SwiperController и сохраните его для будущего использования.

метод	описывать
void move(int index, {bool animation: true})	Перейти к указанному индексу, установить, воспроизводить ли анимацию
void next({bool animation: true})	следущая страница
void previous({bool animation: true})	Предыдущая страница
void startAutoplay()	запустить автозапуск
void stopAutoplay()	остановить автозапуск

Автовоспроизведение

параметр	По умолчанию	описывать
autoplayDely	3000	Задержка автозапуска в миллисекундах.
autoplayDisableOnInteraction	true	Остановить ли автовоспроизведение, когда пользователь перетаскивает.

Все возможности настройки:GitHub.com/zoom/грипп ТТ…

конец

Адрес склада колес: г.universal.flutter-io.capable/packages/law…
Исходный код демонстрационной версии серии:GitHub.com/826327700/…