Enrutamiento en Flutter
En términos generales, el enrutamiento en Flutter es un salto de página y la navegación del enrutamiento se administra a través del componente Navigator en Flutter. Y proporciona métodos para administrar la pila, como: Navigator.pushy Navigator.pop
Flutter proporciona dos formas de configurar saltos de enrutamiento: 1. Enrutamiento básico 2. Enrutamiento con nombre
El uso del enrutamiento básico en Flutter
Por ejemplo, necesitamos bottonsaltar a la página después de hacer clic
RaisedButton(
onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder:(context){
return SearchPage();//返回需要启动的页面
}
)
);
},
),
Si necesitamos salir de la página actual
//悬浮button
floatingActionButton: FloatingActionButton(
child: Text('返回'),
onPressed: (){
Navigator.of(context).pop(); //退出当前页面
},
),
Utilice Navigatorla página para pasar el valor.
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _HomePageState();
}
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RaisedButton(
child: Text('跳转到搜索页面'),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => SeachPage(),
));
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
),
SizedBox(
height: 10,
),
RaisedButton(
child: Text('跳转至表单页面，并传值'),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context)=>FromPage(title: '这是传递的title') //因为此处向构造参数值传递，也可以通过get set去传递值
)
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
)
],
);
}
}
class FromPage extends StatelessWidget{
String title;
FromPage({this.title='默认From'});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title), //在此处，将传递的数据进行引用
),
body: ListView(
children: <Widget>[
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
ListTile(
title: Text('我是表单'),
),
],
),
);
}
}
Uso de rutas con nombre en Flutter
Al navegar con rutas con nombre, primero debemos declarar las rutas. Es decir, queremos configurar el enrutamiento MaterialAppenroutes
Cabe mencionar que el valor de las rutas es
Map<String, WidgetBuilder>de tipo
main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Tabs(),
routes: {
'/form':(context)=>FromPage(),//表单页面
'/Seach':(context)=>SeachPage(),//搜索页面
},
);
}
}
Al saltar, solo necesitamos realizar tales operaciones.
RaisedButton(
child: Text('跳转到搜索页面'),
onPressed: () {
Navigator.pushNamed(context, '/Seach');//这里的第二个参数就是我们的routes的Map集合中的key即可。
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
),
Pase por valor para rutas con nombre
En primer lugar, necesitamos crear uno Roustes.dartpara la gestión de rutas.
final routes={
'/':(context)=>Tabs(),
'/search':(context,{arguments})=>SeachPage(arguments:arguments),
"/from":(context)=>FromPage(),
};
//固定写法
var onGenerateRoute=(RouteSettings settings) {
// 统一处理
final String name = settings.name;
final Function pageContentBuilder = routes[name];
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = MaterialPageRoute(
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
}else{
final Route route = MaterialPageRoute(
builder: (context) =>
pageContentBuilder(context));
return route;
}
}
};
onGenerateRouteEsta es una forma fija de escribir parámetros para rutas con nombre. Al pasar parámetros en rutas con nombre, es necesario cambiar los parámetros de construcción de nuestra página.
MaterialAppHay un atributo en onGenerateRoute, que es lo que definimos onGenerateRoutey pasamos.
main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
// home: Tabs(),等同于 initialRoute: '/',
initialRoute: './',
onGenerateRoute: onGenerateRoute,
);
}
}
Por ejemplo, nuestra SeachPagepágina necesita agregar un parámetro opcional de 'argumentos'
class SeachPage extends StatelessWidget{
final arguments;
SeachPage({this.arguments});
}
Entonces, ¿cómo deberíamos pasar parámetros? Supongamos que pasamos parámetros a la página
en nuestra página ,HomePageSeachPage
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _HomePageState();
}
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RaisedButton(
child: Text('跳转到搜索页面'),
onPressed: () { //此处进行参数传递,arguments
Navigator.pushNamed("/search",arguments: {
"id":"213123"
});
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
),
SizedBox(
height: 10,
),
RaisedButton(
child: Text('跳转至表单页面，并传值'),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context)=>FromPage(title: '这是传递的title',)
)
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary,
)
],
);
}
}
SeachPageManejar parámetros en la página.
class SeachPage extends StatelessWidget{
final arguments;
SeachPage({this.arguments});
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
//悬浮button
floatingActionButton: FloatingActionButton(
child: Text('返回'),
onPressed: (){
Navigator.of(context).pop();
},
),
appBar: AppBar(
title: Text('搜索'),
),
body: Text("搜索页面区域${arguments['id']}")//进行参数的使用
);
}
}