El widget PageView permite al usuario hacer la transición entre diferentes pantallas en su aplicación flutter. Todo lo que necesita para configurarlo es un PageViewController y un PageView .
Constructor de la clase PageView:
Syntax:
PageView({Key key,
Axis scrollDirection,
bool reverse,
PageController controller,
ScrollPhysics physics,
bool pageSnapping,
void Function(int) onPageChanged,
List<Widget> children,
DragStartBehavior dragStartBehavior,
bool allowImplicitScrolling})
Propiedades del widget de página vista:
- scrollDirection: Establece el eje de desplazamiento ( Vertical u horizontal ).
- reverse: Define la dirección de desplazamiento. De forma predeterminada, se establece en falso .
- controlador: Se utiliza para controlar las páginas.
- física: establece la animación de la página después de dejar de arrastrar.
- onPageChanged: se llama cuando se produce un cambio de página.
- children: Muestra la lista de widgets.
- allowImplicitScrolling: esta propiedad toma un valor booleano como objeto. Controla si asignar desplazamiento implícito a la página del widget.
- childDelegate: la clase SliverChildDelegate es el objeto asignado a esta propiedad. Proporciona widgets secundarios al widget PageView .
- clipBehaviour: esta propiedad toma Clip enum como el objeto. Controla si el contenido dentro del widget PageView se recortará o no.
- dragStartBehaviour: esta propiedad contiene la enumeración DragStartBehavior (final) como objeto. Controla la forma en que se comenzará a registrar el comportamiento de arrastre.
- pageSnapping: se necesita un valor booleano para determinar si el ajuste de página estará activado o desactivado para el widget PageView .
- restoreID: el restoreID toma una string como objeto. Se utiliza para guardar la posición de desplazamiento y luego restaurarla.
- scrollDirection: esta propiedad contiene Axis enum como el objeto para decidir el eje de desplazamiento de PageView , que puede ser vertical u horizontal.
Ejemplo:
El archivo main.dart .
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root
// of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'PageView',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
PageController controller=PageController();
List<Widget> _list=<Widget>[
new Center(child:new Pages(text: "Page 1",)),
new Center(child:new Pages(text: "Page 2",)),
new Center(child:new Pages(text: "Page 3",)),
new Center(child:new Pages(text: "Page 4",))
];
int _curr=0;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
appBar:AppBar(
title: Text("GeeksforGeeks"),
backgroundColor: Colors.green,
actions: <Widget>[
Padding(
padding: const EdgeInsets.all(3.0),
child: Text(
"Page: "+(
_curr+1).toString()+"/"+_list.length.toString(),textScaleFactor: 2,),
)
],),
body: PageView(
children:
_list,
scrollDirection: Axis.horizontal,
// reverse: true,
// physics: BouncingScrollPhysics(),
controller: controller,
onPageChanged: (num){
setState(() {
_curr=num;
});
},
),
floatingActionButton:Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children:<Widget>[
FloatingActionButton(
onPressed: () {
setState(() {
_list.add(
new Center(child: new Text(
"New page", style: new TextStyle(fontSize: 35.0))),
);
});
if(_curr!=_list.length-1)
controller.jumpToPage(_curr+1);
else
controller.jumpToPage(0);
},
child:Icon(Icons.add)),
FloatingActionButton(
onPressed: (){
_list.removeAt(_curr);
setState(() {
controller.jumpToPage(_curr-1);
});
},
child:Icon(Icons.delete)),
]
)
);
}
}
class Pages extends StatelessWidget {
final text;
Pages({this.text});
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:<Widget>[
Text(text,textAlign: TextAlign.center,style: TextStyle(
fontSize: 30,fontWeight:FontWeight.bold),),
]
),
);
}
}
Hemos establecido los siguientes parámetros en el ejemplo anterior:
scrollDirection: Axis.horizontal, controller: controller,
Producción:
Si las propiedades se cambian como se indica a continuación en el ejemplo anterior:
scrollDirection: Axis.horizontal, reverse: true, physics: BouncingScrollPhysics(), controller: controller,
Dará como resultado lo siguiente:
Si las propiedades se cambian como se indica a continuación en el ejemplo anterior:
scrollDirection: Axis.vertical, physics: BouncingScrollPhysics(), controller: controller,
Dará como resultado lo siguiente:
Para obtener el código completo, puede consultar https://github.com/singhteekam/Flutter-PageView-Example
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