ListWheelScrollView es un widget de aleteo que se usa para construir ListView con un efecto 3D . También podemos usar ListView para crear una lista de elementos, pero no podemos agregarle un efecto 3D y además viene con la restricción de que todos los niños dentro de este widget deben tener el mismo tamaño a lo largo del eje de paseo. ListWheelScrollView de Flutteragrega sus elementos secundarios en una rueda desplazable. Eso da como resultado un efecto 3D como si los niños estuvieran girando en una rueda. Este widget viene con muchas propiedades. Algunos nos permiten establecer el diámetro de la rueda, hacer desfases o incluso añadir un efecto de aumento.
Constructor de la clase ListWheelScrollView:
Syntax:
ListWheelScrollView({Key key,
ScrollController controller,
ScrollPhysics physics,
double diameterRatio,
double perspective,
double offAxisFraction,
bool useMagnifier,
double magnification,
double overAndUnderCenterOpacity,
double itemExtent,
double squeeze,
void Function(int) onSelectedItemChanged,
bool clipToSize,
bool renderChildrenOutsideViewport,
List<Widget> children})
Constructor ListWheelScrollView.useDelegate
Syntax:
const ListWheelScrollView.useDelegate(
{Key key,
ScrollController controller,
ScrollPhysics physics,
double diameterRatio: RenderListWheelViewport.defaultDiameterRatio,
double perspective: RenderListWheelViewport.defaultPerspective,
double offAxisFraction: 0.0,
bool useMagnifier: false,
double magnification: 1.0,
double overAndUnderCenterOpacity: 1.0,
@required double itemExtent,
double squeeze: 1.0,
ValueChanged<int> onSelectedItemChanged,
bool renderChildrenOutsideViewport: false,
Clip clipBehavior: Clip.hardEdge,
String restorationId,
@required ListWheelChildDelegate childDelegate}
)
Propiedades de ListWheelScrollView:
- childDelegate: esta propiedad toma la clase ListWheelChildDelegate como el valor del parámetro (final). Inicia perezosamente al niño.
//Implementation final ListWheelChildDelegate childDelegate
- childBehaviour: esta propiedad toma Clip enum como parámetro. Controla la parte del contenido que se va a recortar.
- controlador: esta propiedad toma la clase ScrollController como parámetro y se usa para controlar el elemento actual.
- diámetroRatio: Esta propiedad toma como parámetro un valor doble y determina la relación entre el tamaño de la rueda y el tamaño de vireport.
- itemExtent : esta propiedad toma un valor doble como parámetro, que tiene que ser un número positivo. Decide el tamaño de cada niño en la rueda.
- ampliación : esta propiedad también toma un valor doble como parámetro y valor de zoom, por defecto se establece en 1.0. Si es mayor que 1.0, el elemento central se ampliará por ese factor y viceversa.
- OffAxisFraction: esta propiedad también toma un valor doble como parámetro y controla cómo la rueda está descentrada horizontalmente.
//Implementation final double offAxisFraction
- onSelectedItemChanged: esta propiedad toma ValueChanged<T> typedef como parámetro. Siempre se llama cuando cambia el widget secundario central en la rueda.
// Syntax void ValueChanged ( T value )
- overAndUnderCenterOpacity: esta propiedad toma un valor doble (final) como parámetro y, en consecuencia, aplica opacidad a los widgets secundarios, excepto al que está en el centro de la rueda.
- perspectiva: Esta propiedad también toma un valor doble (final), que tiene que ser un número positivo como parámetro. Controla la distinción entre las partes lejanas y las partes cercanas de la rueda.
- física: este widget también toma la clase ScrollPhysics como parámetro para determinar el comportamiento físico de la rueda con respecto a los comportamientos de los usuarios (por ejemplo, cuando el usuario se desplaza o cuando el usuario deja de desplazarse).
//Implementation final ScrollPhysics physics
- renderingChildOutsideViewport: esta propiedad toma un valor booleano (final) como parámetro para decidir si mostrar el widget secundario solo dentro de la ventana gráfica o no.
- restoreId: esta propiedad toma una string como parámetro. Esto guarda y restaura el desplazamiento de desplazamiento del desplazable en la rueda.
- squeeze: Esta propiedad toma como parámetro un valor doble (final) . El valor doble siempre debe ser un número positivo. Esto controla la compacidad de los widgets secundarios en la rueda.
//Implementation final double squeeze
- useMagnifier: esta propiedad también toma un valor booleano (final) como parámetro para controlar la ampliación del elemento central de la rueda.
Ejemplo:
Archivo: main.dart
Dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root
// of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ListWheelScrollView Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const Wheel(),
);
}
}
class Wheel extends StatefulWidget {
const Wheel({Key? key}) : super(key: key);
@override
// ignore: library_private_types_in_public_api
_WheelState createState() => _WheelState();
}
class _WheelState extends State<Wheel> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Geeksforgeeks"),
backgroundColor: Colors.green,
),
body: ListWheelScrollView(
itemExtent: 100,
// diameterRatio: 1.6,
// offAxisFraction: -0.4,
// squeeze: 0.8,
// DEPRECATED : clipToSize does not exist anymore.
// USe clipBehaviour instead.
// clipToSize: true,
clipBehavior: Clip.antiAlias,
children: const <Widget>[
ElevatedButton(
onPressed: null,
child: Text(
'Item 1',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 25,
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
ElevatedButton(
onPressed: null,
child: Text(
'Item 2',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 25,
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
ElevatedButton(
onPressed: null,
child: Text(
'Item 3',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 25,
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
ElevatedButton(
onPressed: null,
child: Text(
'Item 4',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 25,
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
ElevatedButton(
onPressed: null,
child: Text(
'Item 5',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 25,
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
ElevatedButton(
onPressed: null,
child: Text(
'Item 6',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 25,
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
ElevatedButton(
onPressed: null,
child: Text(
'Item 7',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 25,
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
ElevatedButton(
onPressed: null,
child: Text(
'Item 8',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 25,
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
// RaisedButton(
// onPressed: null,
// child: Text(
// "Item 1",
// textAlign: TextAlign.start,
// style: TextStyle(
// color: Colors.black,
// fontWeight: FontWeight.bold,
// fontSize: 25),
// ),
// ),
// RaisedButton(
// onPressed: null,
// child: Text(
// "Item 2",
// textAlign: TextAlign.center,
// style: TextStyle(
// color: Colors.black,
// fontWeight: FontWeight.bold,
// fontSize: 25),
// ),
// ),
// RaisedButton(
// onPressed: null,
// child: Text(
// "Item 3",
// textAlign: TextAlign.center,
// style: TextStyle(
// color: Colors.black,
// fontWeight: FontWeight.bold,
// fontSize: 25),
// ),
// ),
// RaisedButton(
// onPressed: null,
// child: Text(
// "Item 4",
// textAlign: TextAlign.center,
// style: TextStyle(
// color: Colors.black,
// fontWeight: FontWeight.bold,
// fontSize: 25),
// ),
// ),
// RaisedButton(
// onPressed: null,
// child: Text(
// "Item 5",
// textAlign: TextAlign.center,
// style: TextStyle(
// color: Colors.black,
// fontWeight: FontWeight.bold,
// fontSize: 25),
// ),
// ),
// RaisedButton(
// onPressed: null,
// child: Text(
// "Item 6",
// textAlign: TextAlign.center,
// style: TextStyle(
// color: Colors.black,
// fontWeight: FontWeight.bold,
// fontSize: 25),
// ),
// ),
// RaisedButton(
// onPressed: null,
// child: Text(
// "Item 7",
// textAlign: TextAlign.center,
// style: TextStyle(
// color: Colors.black,
// fontWeight: FontWeight.bold,
// fontSize: 25),
// ),
// ),
// RaisedButton(
// onPressed: null,
// child: Text(
// "Item 8",
// textAlign: TextAlign.center,
// style: TextStyle(
// color: Colors.black,
// fontWeight: FontWeight.bold,
// fontSize: 25),
// ),
// ),
],
),
);
}
}
Las siguientes propiedades se definen en el ejemplo anterior:
itemExtent: 100, clipToSize: true
Producción:
Si las propiedades se definen de la siguiente manera:
itemExtent: 100, clipToSize: true, diameterRatio: 1
Los siguientes cambios de diseño se pueden observar como se muestra a continuación de la siguiente manera:
Si las propiedades se definen de la siguiente manera:
itemExtent: 100, clipToSize: true, diameterRatio: 1 offAxisFraction: -0.4
Los siguientes cambios de diseño se pueden observar como se muestra a continuación de la siguiente manera:
Si las propiedades se definen de la siguiente manera:
itemExtent: 200, diameterRatio: 1.5, clipToSize: true
Los siguientes cambios de diseño se pueden observar como se muestra a continuación de la siguiente manera:
Si las propiedades se definen de la siguiente manera:
itemExtent: 200, diameterRatio: 1.5, offAxisFraction: 0.4, squeeze: 0.8, clipToSize: true
Se pueden observar los siguientes cambios de diseño:
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA