Después de posponer las cosas durante varios días, finalmente se realiza el efecto de "carrusel de imágenes". ¿Estás muy emocionado?
Lo estudié hace unos días Timer, PageView¿todavía tienes alguna impresión? Si no, puedes volver atrás y echar un vistazo.
Veamos primero la animación del efecto.
Es en PageViewbase al anterior que se añade el efecto de rotación automática.
Entonces, sin más preámbulos, comencemos.
1. Preparar la fuente de datos
Es muy sencillo, prepara 5 fotos y róbalas de la web oficial de Xiaomi
Tenga en cuenta que, además de declarar 5 imágenes, también se proporciona una lista realImgspor . Su papel es muy importante y determina la experiencia del usuario.
这样做的目的是，「欺骗视觉」
Agregue "última imagen real" en la primera posición, agregue "primera imagen real" en la última posición, de modo que la "longitud de la imagen real" se convierta en "longitud de la imagen real + 2. De esta manera, simplemente deslice la vista de página cuando se deslice a la
" última pieza de la matriz real", el "primer elemento de la matriz expandida" se mostrará a la fuerza;
al deslizar manualmente a la "primera pieza de la matriz real", el "último elemento de la matriz expandida" se mostrará a la fuerza elemento ".
De esta manera, surge el efecto de "rotación circular".
2. Prepare un diseño de página única
Es muy simple, simplemente pegue el código directamente, tenga en cuenta que deliberadamente uso Texto para marcar el índice de la imagen real, para comprender el principio de "rotación de bucle"
3. Definir el temporizador cíclico
No leas las notas primero, si tienes dudas, lee las notas
Cuarto, prepare los atributos necesarios en PageView
control de niños
efecto deslizante
controlador
Supervisión de cambio de página
dirección de desplazamiento
Luego, debido a que aún necesita desplazarse para monitorear, debe preparar notificaciones
notificar
Finalmente, envuelva el PageView que creamos con NotificationListener, así
//创建类viewpager
Widget Pager(constraints, callback) {
return new NotificationListener(
child: new PageView.custom(....
5. De esta manera, bajo el ímpetu del Temporizador en el initState inicial, PageView comenzará a rotar en un bucle, y luego bajo la acción combinada de monitoreo y notificación de la página de PageView, creará la ilusión de 'rotación infinita'.
¡Bingo! en conclusión.
TimerPageViewPageControllerNotificationListenerPageScrollPhysics